web sprit

우리가 흔히 마크업을 하게 되면layerPopUp을 만들게 됩니다. 레이어 팝업을 만들 경우 레이어팝업 안에 닫기 버튼이 존재하게 되는데요.PC 같은경우 닫기 버튼이 존재하게 되면 그리 큰 이상은 없습니다.만약 닫기 버튼이 없는 레이어 메뉴라고 가정합시다. 그리고 모바일 입니다.닫기 버튼이 없는 레이어 메뉴는 어떻게 숨김처리 해야할까요?? 이럴때 메뉴영역을 제외한 영역을 클릭했을 시 숨김처리되는 스크립트 소스가 필요한 것입니다. 검색을 통하여 여러가지 소스를 확인해 보았는데요. 정작 저에게 필요하고 깔금한 소스를 찾지 못했습니다.그래서 제가 정리한 소스를 정리하려 합니다.많은 분들이 참고하고 더 좋게 custom 하셧음 좋겠네요 소스는 아래와 같습니다. HTML1234567891011121314 targ..

CSS3 기술인 flex 에 관한 정리를 하려 합니다. flex를 사용하기 위하여 크게 감싸고 있는 부모요소에 적용해야 할것과자식요소에 적용할 부분을 나눠서 설명하도록 하겠습니다.우선 기본코드는 아래와 같습니다.HTML123456 cs CSS123456789101112131415161718192021222324252627282930.conbox{ width:500px; height:300px; -ms-display:flexbox; display:-webkit-flex; /* Safari */ display:flex; -webkit-flex-flow:row-reverse wrap; /* Safari 6.1+ */ flex-flow:row-reverse wrap;}.conbox div{ -webkit-fle..

나의 퍼블리셔 인생에서 HTML 문서의 Doctype 사용은XHTML 1.0 Transitional 과 html5 입니다. 기타 여러가지의 Doctype 버전을 알고 이해하려고 합니다. 평생 사용하지 않을 수 있지만 모르는것 보단 이해하고 사용하는 편이 좋겠죠~ ^&^ tip !!! 선언(DTD)은 대소 문자를 구분하지 않습니다. Doctype의 선언(DTD)은 아래와 같습니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546 cs

일반적으로 form 요소의 customize를 추천하지도 않고 사용하고 싶지도 않습니다. 이유는 브라우저별 모양이 너무 재각기이고 이러한 폼요소는 기본적으로 최소한의 꾸밈으로 사용하는 것이 디바이스별 사용성에도 좋은듯 합니다. 대부분 background 이미지를 이용하여 스크립트로 클래스 제어를 통해 form요소를 customize 하는 것으로 알고 있습니다. 지금 알려드릴 방법은 css를 이용한 방법이며 스크립트를 사용하지 않습니다. 그리고 브라우저는 IE를 기준으로 IE9 이상 잘 나오고 있습니다. 만약 더 하위버전을 맞추고 싶다면 그때 background 이미지를 이용하여 스크립트를 사용하는 방법말고는 생각이 나질 않네요. 제가 만든 소스를 보고 한번 그대로 가져다 확인해 보세요 정말 괜찮은 방법이..

1. History 객체(Object) 우리가 웹브라우저로 인터넷을 이용하면서 이전 페이지가 보고 싶다면 또는 이후 페이지를 보고싶다면 브라우저 상단의 ←(뒤로), →(앞으로) 의 버튼으로 페이지를 이동하는 원리와 같은데요. 이것에 대한 페이지 이동을 History 객체로 하여금 제어할 수 있습니다. 2. history 메소드(Method) history 객체는 다음과 같은 메소드를 가지고 있습니다.history.back();history.forward();history.go( 숫자[음수 가능] ); 3. 상세 설명back() - 이전 페이지로 이동.forward() - 다음 페이지로 이동.go( 숫자 ) - 현재 페이지를 기준으로 지정한 숫자(음수, 양수)만큼 페이지 이동. 4. 사용 방법 2페이지 이..

Sublime Text에서 Project 관리를 손쉽게 할 수 있는 방법을 알려 드리겠습니다. 우선 서브라임이 설치했다 가정해보죠. 설치가 안되셧다면 아래 링크를 참고 하세요. http://kcmschool.xyz/56 우선 서브라임을 실행합니다. 그럼 위처럼 빈털털이(?) 화면에서 project 메뉴를 클릭하면 하위메뉴로 여러가지 리스트들이 나오는데요. 이것에 대한 설명을 하겠습니다. 우선 프로젝트를 2개 만들어 보겠습니다.pro1 폴더안에 test1.htmlpro2 폴더안에 test2.html자 만들었다면 시작하죠. 이 폴더에 대한 프로젝트 파일을 만들어야 합니다. 아까 만든 폴더를 드래그해서 OPEN FILES(왼쪽 폴더 디렉토리 나오는 부분) 에 넣든 or 메뉴에서 Project > Add Fol..

https://owlcarousel2.github.io/OwlCarousel2/ 반응형웹이나 모바일웹에서 터치 슬라이드를 적용하는데 아주 유용한 플러그인을 소개해 드리겠습니다.플러그인의 사용이 무조건 좋다고 볼 수는 없으나 직접적인 소스를 만드는 시간에 대한 할애가 너무 많기 때문에 이런 플러그인을 잘 사용하는 것도 중요하다 생각합니다. 1. 사용방법위 사이트에서 Download 버튼을 클릭해 다운 받습니다.그럼 위사이트 전체적인 설명이 들어있는 폴더를 확인할 수 있는데요.아래의 파일을 찾아 원하는 경로위치에 넣어 줘야 하는데 정확히 어디 위치에 있는지 찾기 힘드실 수 있습니다.owl.carousel.min.css 와 owl.theme.default.min.css 는 OwlCarousel2 > docs ..

연말을 맞이해서 난 나에게 선물을 주기로 했습니다. 그것은 바로 소니 MDR-1000X!!!할인해서 안사면 자그마치 50만원대를 육박하는 소니에서 나온 헤드폰 중 제일 최신판@@!!!원래는 MDR-1ABT 와 너무 많이 고민했습니다.위의 두녀석이 MDR-1ABT 입니다. 이쁘지 않나요?? 하지만 욕심은 욕심을 부르고 부르다부르다 보니 MDR-1000X 까지 갔습니다.거기다 전 올레샵에 포인트가 있어서 원래 가격보다 50,000원 더 싸게 구매할 수 있었습니다.이런 기회 절대 놓칠 수 없어서 질럿습니다. ㅜㅜ 2일뒤...택배가 왔드랬죠~ 너무 행복했습니다. 리얼 실사 음 굳굳.!너무 감격한 상태라 안의 케이스 사진을 찍지 못했네요. 쩝 뜨악! 제품의 하자가 ㅜㅜ 분명히 내가 새포장지를 벗기고 내가 첫주인이..

tabindex는 사용자가 tab 키로 웹을 이용시 접근할 수 있도록 접근가능 또는 접근이 가능하지 않도록 만들 수 있습니다. 요즘 레이어 팝업의 접근성 문제로 작업을 하는 중 새삼 tabindex 에 대한 내용을 공부해봐야 겠다 생각이 들어 정리하게 됩니다.제가 실무에서 작업해 본 tabindex는 아래와 같았습니다. 1. tabindex 사용법tabindex는 tab으로 접근할 수 없는 부분에 사용할 수 있습니다. 1textcs위 처럼 설정하면 a, button, input 태그등 tab으로 접근가능한 태그가 아니더라도 접근 가능해 집니다. 2. tabindex 값 (-1, 0 ,1~)tabindex의 값은 -1, 0, 1~ 로 설정할 수 있습니다.그럼 위의 값으로 설정하면 어떠한 일이 일어 날까요?..

간단한 예를 들어character 라는 변수안에 라는 문자를 넣고 싶다면저 쌍따옴표는 어떻게 표현할 수 있을까요? javascript 문법에서는 이렇게 표현합니다. 1var character = "난 \"미키 마우스\" 입니다."cs 위처럼 홀따옴표나 쌍따옴표를 표현하려면 백슬래시(＼) 다음에 사용하고자하는 따옴표를 넣으어console 창에 찍어보면 그대로 원하는 문자열로 출력되는 것을 확인할 수 있습니다. 반대로 홀따옴표로 표현하고 싶다면 아래와 같습니다.1var character = "난 \'미키 마우스\' 입니다."cs