HTML5 Examples 조건부주석을 통해서 익스플로러 하위버전에서 html5를 인식시킬 수 있다.주석의 의미는 만일 브라우저 버전이 IE 버전 9 보다 낮은 경우 이 부분을 실행한다. 는 의미이다. + CSS3 크로스 브라우징 자동완성 사이트 http://prefixr.com/index.php

HTML 형식의 문서 XML 형식의 문서 DOCTYPEhtml4.01과 xhtml1.0은 모두 SGML(Standard Generalized Markup Language) 기반이었으므로 DTD를 명시 할 필요가 있었으나 html5에서 DOCTYPE은 브라우저가 표준 모드로 동작되게 하는 역할만 하면 되기 때문에 간소화 되었다. (SGML : 다양한 형태의 전자문서들을 서로 다른 시스템들 사이에 정보의 손실없이 효율적으로 전송·저장·자동처리를 하기 위한 ISO(International Organization for Standardization:국제표준화기구) 문서처리표준의 하나이다. 이 표준은 출판환경에 적합한 것으로 모두 헤더파일, 문서형태정의(DTD), 본문 등 세 부분으로 구성한다. 출처:http:/..

자간(글자사이 간격)letter-spacing:값 자간은 글자크기와 같이 em으로 설정하는것이 좋다.? 폰트크기를 기준으로 적용이 되므로 텍스트크기가 바뀌어도 자동조절이 된다. 어간(단어사이 간격)word-spacing:값 어간은 되도록이면 수정하지 않는것이 좋다. 만약 꼭 사용해야된다면 제한적으로 사용해야 한다. 행간(텍스트 줄 간격)line-height:값 일반적으로 줄 간격은 폰트크기의 1.5~2배 정도가 적절하다고 한다. 텍스트 섀도우text-shadow: x , y, blur, color; 텍스트 섀도우의 경우 호환되는 웹사이트는 파폭/사파리/오페라/크롬 정도일듭.. 텍스트 가로정렬text-align:속성값(left/right/center/justify/inherit/auto) 텍스트 세로정렬v..

1. $표시로 변수를 정의내릴수있다. 예) $font12 = 0.75em font : font12 'Helvetica' 또 이 변수를 이용해서 값을 더하고 빼는것도 가능하다. 예) $font_basic = 0.75em $font_big = $font_basic + 1 또는divfont-size:$font_basig+0.6이 방법을 알았으면 여러가지로 응용이 가능하다.(+,/,* 는 되는데 - 는 안되는듯..) 2. &을 이용해서 셀렉터도 가능하다. 예) divcolor:#fff&:first-childcolor:#f00 이럴경우 div:first-child로 됨 3. 단위 바꾸기 예) $width_basic = 70% divwidth:$width_basicheight:($width_basic+500)px ..

현재까지(글 작성일 현재) Completed Work로 규격의 정의가 끝나 모든 모던 브라우저에서 실 사용이 가능한 Selectors Level 3 까지의 Selector들에 대해 정리해 보았습니다.이전 http://biew.co.kr/10 포스트에서와 같이 selectivizr를 이용하면 사용 가능한 Selector들이 있고, 이를 사용하면 불필요한 클래스(특히 class="last" 또는 class="first" 등) 없이 사용 가능하므로 Front-end 단 Mark up 작성자도 편하고, Server 단 개발자와의 협업도 조금 더 수월해 질 것 입니다. Selector는 많이 이해하고 응용력이 풍부할 수록 상상 이상의 디자인들을 심플하고 시멘틱한 마크업에 이미지 없이 입혀줄 수도 있습니다. (물론..

1. 기존에 많이 알려져 있던 핵! div {css내용~\9;}:rood div{css내용~\9} 이 핵을 쓰면 IE8 이하 브라우저(IE6,7)에도 인식이 됩니다.문제가 있다면, 일부 스타일에서는 크롬에도 적용이 되더라구요~ 전 'font-family' 스타일에서 그런 현상을 발견 했습니다. 2. 그 다음으로 많이 쓰던 핵! div {css내용~\0IE8}div {css내용~\0IE8+9}div {css내용~\0IE9} IE8, IE8+9, IE9 로 조정하면 선택해서 브라우저 적용이 됩니다. 3. 파이어폭스 핵 @-moz-document url-prefix() {div{css 내용}} 4. 크롬+사파리 핵 @media screen and (-webkit-min-device-pixel-ratio:0){..

2주 전쯤부터 Sublime Text 2를 사용해 보고 있습니다.다른 분들 반응이 좋아서 사용해 봤는데 무척 만족스럽습니다. 우선, 굉장히 심플하면서도 이쁩니다. 특히, zen-coding, vi key-mapping 등 Package 지원이 맘에 듭니다. 라이센스를 구입해야할지... ㅎㅎ환경 셋팅 등 관련 사항들을 Windows XP 기준으로 정리해 봤습니다. 설치ㅇ 다운로드 : Windows, OS X, Linux 모두 지원합니다. Windows의 경우 portable version도 제공합니다.ㅇ 라이센스    - 현재는 베타 버전으로 다운로드 및 사용은 무료이나 계속 사용할 경우는 라이센스를 구매해야한다고 합니다.   - per-user 라이센스이므로 여러 OS 또는 여러 컴퓨터에서 사용이 가능합..

반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다.가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.#movie-player-wrapper { position: relative; width: 100%; height: 0; ..