웹사이트 만들기16 레이어 팝업과 윈도우 팝업 만드는 html과 css 그리고 스크립트 레이어 팝업과 윈도우 팝업을 만들어 봅니다. html 닫기 CSS /* 레이어 팝업 */ #layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);} #layer img {width: 100%; display: block;} #layer .close {position: absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;} #layer .close:hover {text-decoration: underlin.. 2019. 12. 27. 제이쿼리로 탭메뉴 스크립트 만들기 제이쿼리를 이용하여 탭메뉴 스크립트를 만드는 방법입니다. var $tab_list = $(".tab_menu"); $tab_list.find("ul ul").hide(); $tab_list.find("li.active > ul").show(); function tabMenu(e){ e.preventDefault(); var $this = $(this); $this.next("ul").show().parent("li").addClass("active") .siblings("li").removeClass("active").find(">ul").hide(); } $tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu); 2019. 12. 26. [사이트 추천] 제이쿼리로 배너를 만들고 싶을 땐? Slick! 슬릭(slick)이라는 사이트를 이용하여 손 쉽게 배너를 만들 수 있습니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 사이트로 들어갑니다. get it now 버튼을 클릭하여 css파일과 js 파일을 다운로드 합니다. 이를 html 파일에 연동 시킨 후 slick 에서 요구하는 방식대로 Markup을 진행합니다. 그리고 스크립트를.. 2019. 12. 25. 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 다음의 코드는 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 입니다. //버튼을 클릭하면 전체 메뉴를 보이게 하세요. $(".tit .btn").click(function(e){ e.preventDefault(); //$("#cont_nav").css("display","block") //$("#cont_nav").show(); //$("#cont_nav").fadeIn(); //$("#cont_nav").slideDown(); //$("#cont_nav").toggle(); //$("#cont_nav").fadeToggle(); //$("#cont_nav").slideToggle(300); //$(this).toggleClass("on"); }); 2019. 12. 24. 여러가지 html 공부(Margin-right:-1px/em/strong/b/i태그) Margin-right: -1px 를 사용하는 경우 탭 메뉴를 만들 때 Border 값이 겹치는 경우에만 사용 합니다. 그 외에는 거의 사용하는 경우가 없습니다. i 태그와 em태그 b태그 strong 태그의 차이 - i 태그는 이탤릭체로 표시할 때 사용합니다. - em 태그는 이탤릭체로 표시되며 글씨를 강조할 때 사용합니다. - b 태그는 bold의 약자로 글씨를 강조할 때 사용합니다. - strong 태그는 글씨를 강조 할 뿐만 아니라 글씨의 '중요성'을 강조할 때 사용합니다. 2019. 12. 23. 말줄임 효과(한줄 효과) 사용하는 방법 말줄임 효과(한줄 효과) 사용하는 방법 - 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다. - 영역을 넘어가게 되면 ... 으로 표시됩니다. - 말줄임 효과를 적용하고 싶은 영역에 아래 태그를 넣습니다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 자세한 예제는 아래 코드펜을 참고해 주세요. See the Pen 말줄임효과 by Sky Lee (@Tropicalsky) on CodePen. 2019. 12. 19. 콘텐츠 요소를 보이지 않게 하는 방법 과 차이점 콘텐츠 요소를 보이지 않게 하는 방법은 아래와 같습니다. Display:none - display:none; display:block; - 디스플레이를 사용해서 보이지 않게 하면 콘텐츠 영역 또한 사라집니다. Visibility: hidden - visibility: hidden; visibility: visible - 비저빌리티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. Opacity:0; - opacity:0; opacity:1; - 오파시티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. IR (Image Replacement) 기법 - overflow: hidden; position: absolute; width: 0; height: 0; lin.. 2019. 12. 18. Float으로 인한 영역 깨짐(height: 0)을 방지하는 방법 (클리어픽스) Float을 사용하게 되면 영역이 깨지는 즉, Height 값이 사라져 0이 되는 현상이 나타납니다. 이를 방지하기 위한 방법을 아래에 적어 보겠습니다. Float으로 인한 영역 깨짐(Height: 0)을 방지하는 방법 깨지는 영역에 똑같이 Float: left를 사용 - 위 방법을 사용하게 되면 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천하지 않습니다. 깨지는 영역에 Clear: both를 사용 - 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다. Float을 사용한 상위 박스에게 Overflow: hidden을 사용 - 2단 메뉴 사용 시에는 사용 할 수 없.. 2019. 12. 17. IR 기법(Image Replacement)의 의미와 종류 그리고 사용 방법 IR 기법(Image Replacement)은 무엇인가? - IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. IR 기법(Image Replacement)의 종류 Phark Method - 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다. - 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법입니다. .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR - .. 2019. 12. 16. HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) 다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. Background 속성 - 이미지가 의미가 없을 때 background 속성을 사용합니다. - 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다. - background: url(이미지 주소) center top repeat-x; - background: url(이미지 주소) no-repeat 9px(가로) 8px(세로); 이미지 스프라이트 기법(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. - 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니.. 2019. 12. 15. 엔티티 코드(Entity Code)의 사용 이유와 종류 정리(사이트 추천) 엔티티 코드(Entity Code)란? 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 입니다. 요즘은 UTF-8을 주로 이용하기 때문에 특수문자가 깨지지 않지만 W3C는 엔티티 코드가 아닌 특수 문자는 오류로 인식하기 때문에 특수 문자는 엔티티 코드로 작성하는 것이 좋습니다. 사용 빈도수가 높은 엔티티 코드 정리 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) > › © © © " " " & & & (공백) 엔티티 코드(Entity Code) 참고 사이트 https://entitycode.com/ Entity Code - A Clear and Quick Reference to HTML Entities Codes About EntityCod.. 2019. 12. 14. 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 자세한 내용은 아래 사진을 보면 쉽게 이해가 가능합니다. 마진(Margin)과 패딩(Padding)의 입력 방법 마진 혹은 패딩을 입력 방법에 대해 알아 보겠습니다. 기본적으로 입력 방법은 '위 -> 오른쪽 -> 아래 -> 왼쪽' 이렇게 시계 방향 순서라고 생각하시면 됩니다. 4개 값 입력 시 - 위 -> 오른쪽 -> 아래 -> 왼쪽 3개 값 입력 시 - 위 -> 오른쪽/왼쪽 -> 아래 2개 값 입력 시 - 위/아래 -> 오른쪽/왼쪽 1개 값 입력 시 - 위/아래/오른쪽/왼쪽 모두 동일한 마진 혹은 패딩값 자.. 2019. 12. 13. 웹폰트 사용하는 방법 1. 구글 폰트에 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 나눔고딕 폰트가 보이네요. 이 폰트를 사용하겠습니다. 플러스 버튼을 누릅니다. 3. 플러스 버튼을 누르면 Family Selected라는 버튼이 보이는데요. 그 버튼을 클릭하면 아래와 같은 화면이 나옵니다. 4. 위 화면에서 standard에 있는 부분은 html의 head 안쪽에 붙여넣기 해줍니다. 그리고 아래의 Specify in CSS의 부분은 복사해서 스타일시트에 붙여넣기 해주시면 됩니다. 자세한 내용은 아래 코드팬을 참고하세요. See .. 2019. 12. 12. Inline과 Block 그리고 Inline-block의 차이점 Display: block - 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다. - 블럭은 라인이 새롭게 추가 됩니다. - 블럭은 height값과 width 값, margin값 그리고 padding 값을 지정할 수 있습니다. Display: Inline - 인라인은 주로 텍스트를 기입할 때 사용합니다. 즉, 자신의 컨텐츠 영역이 자신의 width 값입니다. - 인라인은 라인이 새롭게 추가되지 않습니다. - 인라인은 width값과 height 값을 지정할 수 없습니다. - 인라인은 margin과 padding이 위와 아래에는 지정되지 않습니다. Display: Inline-block - 인라인 블럭은 줄바꿈이 되지 않습니다. - 인라인 블럭은 width값과.. 2019. 12. 11. 스킵 네비게이션(Skip Navigation)을 사용해야 하는 이유와 사용 방법 스킵 네비게이션은 웹 표준을 준수하기 위해 그리고 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야 하는 요소 중 하나입니다. 웹표준에 대한 자세한 내용은 아래 웹 표준 사이트를 참고하세요. 1. 다음 웹표준 사이트 http://darum.daum.net/ 다룸, Darum 웹표준을 다루다 스니펫 데이터 수 76 last update 2014/09/30 darum.daum.net 2. 네이버 웹표준 사이트 https://nuli.navercorp.com/ 널리 : Sharing is Victory! : NULI nuli.navercorp.com 웹표준 준수를 위한 스킵 네비게이션(Skip Navigation) 만드는 방법 스킵 네비게이션을 만드는 html 코드와 css 코드는 아래 코드.. 2019. 12. 10. META Tag의 정의와 메타 태그의 종류 메타 태그란? HTML 문서의 메타 정보를 나타내는 태그를 의미합니다. 메타 정보 즉, Meta data(메타 데이터)는 html 페이지에 표시 되지 않습니다. 페이지에 대한 설명, 키워드, 제작자 및 각종 정보를 지정하고 표시하는 데 사용합니다. 메타 태그의 종류 대략적인 메타 태그에 대해 적어보겠습니다. 1) 키워드 지정 2) html 사이트 지정 3) 작성자 지정 4) 30초마다 새로고침 지정 5) 브라우저 호환성 지정 6) 인코딩 방식 지정 2019. 12. 9. 이전 1 다음
