본문 바로가기

html

CSS와 jQuery의 Selector 같은 코딩 페턴으로 Html, CSS을 렌더링 해 주는 Zen Coding을 알고 계십니까? 얼마전 Editplus 버전을 업데이트 했습니다. 잠깐 테스트 용으로요.. 그런데 왠 못 보던 메뉴가 생겼습니다. ZC라는 Zen Coding입니다. CSS나 혹은 jQuery를 많이 다뤄보신 분이라면.. 굉장히 편하게 Html을 작성 할 수 있는 코딩 도우미 입니다. 거의 모든 Editor에서 사용이 가능한 것 같습니다. vs 2010, 2012, editplus, eclips 등등등 코딩 형태는 아래와 같습니다. div#id.className>div.test 그리고 지정해 놓은 ZC 단축키를 누르게 되면 아래와 같이 확장 됩니다. div#id.className>div.test CSS나 jQuery를 많이 다뤄보신 분이라면.. 바로 알아 차릴 수 있는 직관적인 코딩 도우미라고 할 수 있겠네요!! 저 같.. 더보기
CSS Cross Browser Zoom In/Out(웹 브라우저 줌인/줌아웃) Zoom 이라는 속성이 있습니다. 값은 normal, number(scale), percentage를 받으며 적용은 아래와 같습니다. body { /* default : normal, 1.0, 100% */ zoom:1.25;/* number(scale) */ /*zoom:125%;percentage */ } script의 경우는 아래와 같습니다. $(document).ready(function() { //document.body.style.zoom = 1.00; //document.body.style.zoom = "100%"; document.body.style.zoom = "normal"; }); 적용은 간단합니다.. 이것은 IE 전용입니다. (하지만 Chrome, Safari4+ 에서도 됩니다.) .. 더보기
개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index) CSS에서 boxmodel, position, float 대하여 알아보도록 하겠습니다. IE 8을 사용하면서 가장 저의 마음에 들었던 부분이 있습니다. 바로 개발자 도구입니다. 이전에는 IE 6, 7 사용 시 IEDeveloperToolbar라는 툴을 설치하여 사용하였는데. 그때도 “이거 괜찮다” 라는 생각을 많이 했었습니다. IE 8의 개발자 도구는 그야 말로 획기적인 툴이라고 말씀 드리고 싶습니다. *_* 갑자기 이야기가 삼천포에 갔네요.. *_*;; 본론으로 들어가서. 1. Box Model CSS 중 가장 많이 사용하는 Attibute가 바로 border, padding, margin이 아닐까 합니다. Layout 이나 Box Model 작성 시 필수로 사용하게 되는 속성들입니다. http://t.. 더보기
개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0) 2011/02/15 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements)2011/02/16 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0) 이번 시간에는 HTML이라기 보다는 웹 컨텐츠에 대한 사용자의 접근성을 향상하기 위한 W3C의 지침의 내용을 한번 살펴 볼까 합니다. 일반적인 경우 이미지와 이미지맵을 사용한 경우 표를 사용한 경우 프레임을 사용한 경우 애플릿과 스크립트를 사용한 경우 멀티미디어를 사용한 경우 다른 모든 조치가 불가능한 경우 위와 같은 분류의 내용으로 중요도를 3단계로 나누어 설명되어 있습니다. 저는 중요도 1에 해당하는 .. 더보기
개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements) 2011/02/15 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) 이번 시간에는 HTML Tag 중 Block-Level Element(이하 block), Inline-Level Element(이하 inline) 에 대해서 알아보도록 하겠습니다. 단순히 태그는 어떤 것이고.. 어떤 건 어떻게 쓰는 것이다 라는 것은 아래 링크를 참고 하여 주십시오. http://www.w3schools.com/tags/ref_byfunc.asp block는 말 그대로 하나의 틀이 될 수 있는 Tag를 말합니다. inline는 block안에 포함되어 Data, Object를 포함 할 수 있으며, block을 포함 할 수 없는 Tag.. 더보기
개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) 웹 개발자를 위한 웹 표준 코딩을 위한 HTML의 이해 그 첫 번째 시간입니다. 오늘은 HTML에서 가장 최 상위에 선언되는 DTD에 대해서 알아보도록 하겠습니다. DTD 사용 이유! DTD는 브라우저의 렌더링 모드를 지정하고 유효성 검증기의 기준이 되므로 HTML 문서의 상단에 선언되어야 합니다. DTD가 선언 되어 있지 않는 경우에는 브라우저 별로 Tag의 해석 방식이 다른 Quirks mode로 렌더링 되어 브라우저 별로 각각 다른 화면이 나타날 수 있습니다. Wiki ko 참고 : http://ko.wikipedia.org/wiki/HTML#.EB.AC.B8.EC.84.9C_.ED.98.95.EC.8B.9D_.EC.84.A0.EC.96.B8 DTD의 종류로는 HTML 4.01, XHTML 1.0,.. 더보기
텍스트 말줄임 [문자열 자르기] (Text Ellipsis) 긴 문자열이나, 1byte 문자열이 쭈욱~ 있을 경우.. 레이아웃이 틀어지는 현상이 발생 될 수 있습니다. 여기서 할 수 있는 방법이 라인 변경이나, 문자열을 … 처리 하는 방법이 있는데. 오늘은 … 처리하는 방법을 알아보도록 하겠습니다. 위와 같은 형태로 처리하는 방법에 대해서 알아보도록 하겠습니다. 위 방법은 text-overflow라는 css를 이용하게 되는데 ie6, Opera, firefox 등에서는 몇 가지 추가적인 사항이 있습니다. 일단 처리된 css를 보십니다. .ellipsis{ white-space:nowrap; text-overflow:ellipsis;/* IE, Safari */ -o-text-overflow:ellipsis;/* Opera under 10.7 */ overflow:.. 더보기
HTML Mailto Protocol 메일을 띄울때 내용, 제목, 받는 이, 참조자, 비밀 참조자, 첨부파일을 추가하여 띄울 수 있습니다.. subjectText to appear in the subject line of the message.bodyText to appear in the body of the message. CCAddresses to be included in the "cc" (carbon copy) section of the message.BCCAddresses to be included in the "bcc" (blind carbon copy) section of the message.Attachment첨부 파일 추가이런게 있네요~ html은 body에서 지원하지 않습니다. *_*;; 그래서 저는 포기~ 참고 소스는 아.. 더보기