현재까지(글 작성일 현재) 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; ..