키자드에 등록된 총 21개의 포스트를 확인하실 수 있습니다.
슬릭(slick)이라는 사이트를 이용하여 손 쉽게 배너를 만들 수 있습니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that..
제이쿼리를 이용하여 탭메뉴 스크립트를 만드는 방법입니다. var $tab_list = $(".tab_menu"); $tab_list.find("ul ul").hide(); $tab_list.find("li.active > ul").show(); function tabMenu(e){ e.preventDefaul..
레이어 팝업과 윈도우 팝업을 만들어 봅니다. html <!-- 레이어 팝업 --> <div id="layer"> <img src="img/webstandard1.jpg" alt="레이어팝업"> <a href="#" class="close">닫기</a> </div> <!-- 윈도우 팝업 -->..
미디어 쿼리란? 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. @media only all and (조건문) {실행문} - @media: 미디어 쿼리가 시작됨을 표시합니다. - onl..
다음 라이트 갤러리는 자신의 포트폴리오를 보여주기에 적합한 제이쿼리 입니다. https://sachinchoolur.github.io/lightGallery/demos/ lightGallery: thumbnails Plugin dependency Lightgallery require the th..
서브라임 텍스트3(Sublimetext3)의 확장기능 중 하나인 SFTP 선행과정 Sublimetext3에서 SFTP를 사용할 경우에는 다른 에디터와는 달리 서버에 저장되어 있는 파일을 컴퓨터로 다운로드 한 후에 다시 서버로 전송..
메타 태그란? HTML 문서의 메타 정보를 나타내는 태그를 의미합니다. 메타 정보 즉, Meta data(메타 데이터)는 html 페이지에 표시 되지 않습니다. 페이지에 대한 설명, 키워드, 제작자 및 각종 정보를 지정하고..
스킵 네비게이션은 웹 표준을 준수하기 위해 그리고 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야 하는 요소 중 하나입니다. 웹표준에 대한 자세한 내용은 아래 웹 표준 사이트를 참고하세..
Display: block - 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다. - 블럭은 라인이 새롭게 추가 됩니다. - 블럭은 height값과 width 값, margin값 그리고 padding 값..
마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 자세한 내용은 아래 사진을 보면..
1. 구글 폰트에 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 나눔고딕 폰트가 보이네요. 이 폰트를 사용..
엔티티 코드(Entity Code)란? 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 입니다. 요즘은 UTF-8을 주로 이용하기 때문에 특수문자가 깨지지 않지만 W3C는 엔티티 코드가 아닌 특수 문..
다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. <img src="이미지 주소 기입" alt="대체..
IR 기법(Image Replacement)은 무엇인가? - IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. IR 기법(Image Re..
Float을 사용하게 되면 영역이 깨지는 즉, Height 값이 사라져 0이 되는 현상이 나타납니다. 이를 방지하기 위한 방법을 아래에 적어 보겠습니다. Float으로 인한 영역 깨짐(Height: 0)을 방지하는 방법 깨지는 영..
콘텐츠 요소를 보이지 않게 하는 방법은 아래와 같습니다. Display:none - display:none; <--> display:block; - 디스플레이를 사용해서 보이지 않게 하면 콘텐츠 영역 또한 사라집니다. Visibility: hidden - vis..
말줄임 효과(한줄 효과) 사용하는 방법 - 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다. - 영역을 넘어가게 되면 ... 으로 표시됩니다. - 말줄임 효과를 적용하고 싶은 영역에 아래 태그..
Margin-right: -1px 를 사용하는 경우 탭 메뉴를 만들 때 Border 값이 겹치는 경우에만 사용 합니다. 그 외에는 거의 사용하는 경우가 없습니다. i 태그와 em태그 b태그 strong 태그의 차이 - i 태그는 이탤릭체로..
다음의 코드는 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 입니다. //버튼을 클릭하면 전체 메뉴를 보이게 하세요. $(".tit .btn").click(function(e){ e.preventDefault(); //$("#cont_nav"..
문과생이라서 처음 브라켓을 알 게 되었을 때는 이 프로그램이 무척 생소했는데요. 혹시라도 저처럼 생소하신 분들을 위해서 브라켓 설치 방법 및 사용 방법을 적어 보겠습니다. 아래에는 이용하면 좋은 확장 기능..