퍼블리싱69 반응형 웹사이트 단위 vh/vw vh = Viewport Height vw = Viewport Width 현재 뷰포트란? 현재, 보여지는 영역을 의미 1vh = 뷰포트 높이의 1% 1vw = 뷰포트 너비의 1% 뷰포트가 현재 가로세로 100px 이라면 height:1vh = height:1px width:1vw = width:1px height:100% (부모 높이를 반드시 지정해줘야함) See the Pen full size section_% by lionbum (@lionbum) on CodePen. height : 100vh See the Pen full size section_vh by lionbum (@lionbum) on CodePen. 2020. 12. 27. [JS 활용]이미지맵속 내용 복사하기, 해시태그 내용 복사하기 스크립트 html 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 제이쿼리 소스 $('.hashtag').click(function(){ var urlAddress= $('#hashtagTxt'); urlAddress.css('display','block').select(); document.execCommand("Copy"); urlAddress.css('display','none'); alert('해시태그가 복사되었습니다'); return false; }); 결과 일전에 이미지맵 클릭시 새창 띄우기와 함께 같이 병행해서 사용하면 좋을듯 https://lionbum.tistory.com/37 이미지 맵 클릭시 새창 팝업 띄우기 이미지 .. 2020. 12. 15. [JS 활용]버튼을 누르면 보이기/감추기. 토글 함수를 사용 버튼을 누르면 보였다가 안보였다 하는 효과가 필요할 때가 있다. 이벤트나 그외 적용이 가능한 효과! 제이쿼리 토글 소스를 활용하여 간단하게 해결 HTML토글버튼 다시버튼 누르면 안보임 제이쿼리 - 토글 $(function (){ $("#btn_toggle").click(function (){ $("#Toggle").toggle(); }); }); 결과*Result 를 눌러주세요 2020. 12. 13. [JS 활용]이미지 맵 클릭시 새창 팝업 띄우기 이미지 맵 클릭시 새창 팝업 띄우기 이미지 상에 어떤 영역을 클릭했을때, 새창을 띄우는 스크립트! 이미지 맵에서 활용해야 하므로 이미지 맵 태그 사용 출처 : www.w3schools.com/html/html_images_imagemap.asp 1. 이미지 맵으로 지정될 영역을 coords 로 잡기 2020. 12. 11. 아웃룩, 이메일 HTML 코딩 시 꼭 알아야 할 3가지 유의사항 간혹 이메일 코딩을 하게 됩니다. 하지만 이 이메일폼 퍼블리싱의 경우 몇가지(꽤나..) 제약 사항들이 있습니다. ㅠㅠ 해당 사항들을 지키지 않으면 저처럼 수십번 테스트 메일을 보내다가 멘붕에 빠지게 될수 있어요. 그래서, 메일폼 퍼블리싱 할때 꼭! 알아야 할 유의 사항 3가지로 정리해 봤습니다. 1. 테이블로 코딩 아웃룩에선 div 사용이 안됩니다. 테이블을 중첩해서 사용해줘야 해요. 아래처럼 초기화 후 작업 합니다. 2. 여백은 패딩으로 여백을 주기 위해 마진과 패딩을 사용하지만, 메일폼에서는 패딩만 하용합니다.. (네이버 메일은 마진이 사용되긴 하는데, 아웃룩안 안돼요.. 😭) *단축속성(padding: 10px 10px 8px 5px;) 보다는 풀어서 써주는게 확실해요. 3.스타일링은 인라인으로 t.. 2020. 12. 10. [JS 활용]티스토리 카테고리 별로 갤러리형/리스트형 목록 다르게 출력 html에 (리스트형 목록) 와 내 (갤러리형 목록)을 추가. 이때 두 목록의 클래스 값은 다르게 설정. (searchList vs thumbList) ..리스트 치환자 등 생략.. ..썸네일 치환자 등등 생략.. ..생략.. ▶ 위에 아래의 스크립트 추가. ▶ 특정 카테고리 글 본문 출력됐을때 특정 div 스타일 다르게 주기 출처 : https://heeyat.tistory.com/9 2020. 7. 24. css background CSS 배경 웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다. CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다. CSS background 속성 속성설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정함. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정함. background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정시킴. ba.. 2020. 6. 18. SVG <라인> SVG 라인- 요소는 라인을 만드는 데 사용됩니다 : x1 속성은 x 축에서 선의 시작을 정의합니다 y1 속성은 y 축에서 선의 시작을 정의합니다 x2 속성은 x 축에서 선의 끝을 정의합니다 y2 속성은 y 축에서 선의 끝을 정의합니다 2020. 5. 7. CSS 이미지 스프라이트 이미지 스프라이트 이미지 스프라이트는 단일 이미지에 넣은 이미지 모음입니다. 이미지가 많은 웹 페이지는 여러 서버 요청을로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다. 이미지 스프라이트-간단한 예 세 개의 별도 이미지를 사용하는 대신이 단일 이미지 ( "img_navsprites.gif")를 사용합니다. #home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } -src 속성은 비워 둘 수 없으므로 작고 투명한 이미지 만 정의합니다. 표시된 이미지는 CSS에서 지정한 배경 이미지가됩니다. width: 46px; height: 44px; -사용하려.. 2020. 4. 8. 이전 1 2 3 다음 728x90 반응형
