web sprit

나의 퍼블리셔 인생에서 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

모바일 제작이나 반응형웹을 제작할때 부딪힐 수 있는 문제입니다.마크업을 작업하면 PC로 비교해보면서 작업을 하게 되는데요.쉽게 지나치고 모바일에서 확인했을때 전화번호로 되어진 부분예) 010-xxxx-xxxx 전화번호 부분을 IOS 모바일로 확인했을때 링크로 인식하여 내가 의도치 않은 색으로 지정되어 집니다.황당하죠....이 현상은 IOS는 전화번호 자동링크로 인식하여 화면의 UI 나 디자인에 영향을 미칩니다. 그럼 바로 해결 해야죠. 아래의 메타태그를 head 태그 안에 입력해 줍니다. 그럼 원래 지정했던 색이 적용되어 모바일에서 확인하실 수 있습니다.IOS 에서 자동 링크로 전화걸기를 연결하지말고 원래 디자인은 적용하면서 전화걸기 링크를 넣으려면 다음과 같은 방법을 사용하십시오.전화걸기그럼 모바일에서..

회사에서 주로 gmail을 사용하는데요.엑셀 테이블 표로 깔금하게 정리하여 보내고 싶다는 생각을 하는데 문득그런식으로 메일을 받아본적이 어렴풋이 생각났습니다. 그래서 나름 알아 봤습니다. 역시 해결할 수 있었습니다. 우선 크롬의 기능입니다. 크롬 웹스토어에 들어가 "Cloudcodes Insertable" 을 검색합니다.현재 검색하니 딱 하나가 나오는군요.클릭해서 크롬에 추가해 줍니다. 이제 메일에 엑셀 테이블을 추가하는 방법만 남았습니다. 매우 간단합니다. 엑셀을 실행합니다.위에 보는 바와같이 꾸며 보았습니다. 그럼 저 영역을 복사해 줍니다. 다 아시죠? Ctrl + C 고고 자 그럼 메일을 보내는 양식을 보십쇼. 아까 설치한 "Cloudcodes Insertable" 아이콘이 존재합니다.아까 복사했으..