티스토리 뷰
이 포스팅은 개인적인 참조문서로 작성중인 내용을 공개해 두는 것이므로, CSS의 규칙 전반을 다루고 있지 않으며, 제 머리속에 미처 각인되어 있지 않았던 규칙들을 암기할 목적으로 나열해 둔 것임을 미리 밝힙니다.
CSS에 대한 질문이나 도움요청은 댓글이나 이메일,트위터로 해주시면, 성심껏 도와드리겠습니다.
<img> 태그를 제외한 모든 인라인 엘리먼트는 margin과 padding이 좌우에만 적용된다. 만약, 억지로라도 상하 공간을 만들어내고 싶다면, line-height 프로퍼티를 사용할 수 있다.
height 로 박스의 높이를 지정한 경우, 내용물의 높이가 박스에 지정한 높이보다 커지면 IE 에서는 내용의 높이에 따라 알아서 박스의 높이가 늘어나게 되고, 나머지 브라우져들은 박스 높이가 유지된 채 내용이 밖으로 빠져나가 버린다. 만약, 넘치는 내용물을 죽여버리고서라도 박스의 높이를 유지해야겠다 싶으면 overflow 프로퍼티를 사용하여 hidden 값을 준다.
많이 사용하진 않지만, font 프로퍼티의 variant 를 사용하여 소형대문자를 구현할 수 있다.
It Is This
letter-spacing 은 자주 사용하지만, 단어간의 간격에 사용하는 word-spacing 도 있다는걸 종종 까먹는다.
line-height는 어구를 지정된 높이의 줄 중앙에 위치시키고 싶을 때만 px을 사용하고, 일반적으로는 그냥 숫자를 사용하는 것이 안전하며 표준값은 1.2 이다.
font 프로퍼티 사용시 마지막 두개는 반드시 font-size/line-height font-family 의 순서여야 하고, style,variant,weight 는 앞에 순서없이 넣을 수 있되, 생략하면 normal 로 간주되어 상속되던 값이 normal 로 바뀔 수 있음에 유의해야 한다.
list-style-image 는 사용하지 않아서 존재사실을 잊을때가 있는데, 존재해도 잘 사용하지 못하는 이유는 위치조절이 불가능하기 때문이다. 그래서 padding과 background-image 로 대체하는게 더 합리적인 것이다.
CSS에서 url 을 넣을 때 "" 로 감싸면 특정 브라우져에서 인식하지 못하기 때문에 감싸지 않는 것이 좋다.
가끔 하는 실수가 있다. 예를 들어, border:2px solid #7c0 뒤에 border-bottom:1px 을 주면 아예 아랫변 border가 사라져 버리는 수가 있다. border는 상속되지 않는 프로퍼티 중 하나임에도 무의식중에 속기법을 써버렸기 때문에 디폴트 color가 적용된 것인데, 이 디폴트 컬러가 배경색과 같은 것이었기 때문이다. 전체 변을 정의한다음 한 변의 width만 바꿔주고 싶었다면 border-bottom-width:1px 로 정의했어야 했다.
min-width(height) 와 max-width(height) 는 IE 에서 인식하지 않지만, min-height의 경우는 편법을 사용할 수 있다.
ex: min-height:600px; height:auto !important; height:600px;
이것은 IE 를 제외한 브라우져에서 높이를 auto로 지정하면서도 600px 미만으로는 줄어들지 않도록 잡아주지만, 같은 셀렉터 내부의 같은 프로퍼티들에 대해선 !important 가 포함되어 있더라도 맨 마지막에 나온 프로퍼티가 적용되는 IE 에게는 기본높이 600px을 준 다음, 내용물이 넘칠 경우 자동으로 높이가 늘어나는 특성 때문에 min-height와 같은 속성을 갖게 만들어 주는 방법이다.
엘리먼트들의 배경이나 테두리가 float 된 엘리먼트 뒤로 지나가는 것을 원치 않을 경우, overflow:hidden 을 사용하되, IE5,6 을 위해 zoom:1 을 덧붙인다.
IE 에서는 position:relative 를 가진 부모의 자식에게 position:absolute 를 지정할 경우, 그 자식의 인접 동기 중 하나가 floating 되어 있으면 화면에서 아예 사라져버리는 버그가 있다. 이를 해결하는 방법은 floating 을 사용하지 않거나, 인접하지 않도록 피하는 것이다.
테이블의 셀간 테두리는 공유모델을 사용하는 것이 유용하며, table 에 border-collapse: collapse; 로 지정할 수 있다. 또한 셀간의 간격을 일괄적으로 설정할 수 있는 border-spacing 은 IE 에서 지원하지 않으므로, css 대신 <table> 태그에서 cellspacing 속성으로 대신하는 것이 최선이다.
불필요한 마크업 추가 없이 floating 을 해제하기 위한 셀렉터 정의
.clear:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear {min-height:1px;}
* html .clear {height:1px;} /* IE핵 */
잘 사용하지 않아서 종종 까먹어 버리는 가상 엘리먼트들과 고급 셀렉터들 (CSS2 이하)
- :hover, :active = 앵커에선 흔히 사용하지만, 앵커 이외에서는 IE6 이하 때문에 잘 사용하지 않음
- :focus = IE7 이하에선 앵커에서 조차 작동하지 않기 때문에 잘 사용하지 않음
- :before,:after { content: "내용"; ...} = 브라우져들이 저마다 다르게 적용하고 있는 일관성 결여로 인해 잘 사용하지 않음 (물론, IE6 이하에서는 아예 작동하지 않음)
- :first-child = 첫번째 자식에게만 다른 형식을 줄 수 있기 때문에 ul,ol,dl 에서 매우 유용하게 쓸 수 있는 가상 엘리먼트이지만, IE6 이하에서 작동하지 않기 때문에 잘 사용하지 않음
- :first-letter, :first-line = 첫번째 글자나 첫번째 줄에만 스타일을 줄 수 있지만, IE6 이하 때문에 잘 사용하지 않음
- 자식 셀렉터 (ex: div > ul ) = 따로 클래스나 ID를 주지 않고서도 중첩된 태그를 개별적으로 제어할 수 있는 유용한 셀렉터지만 IE6 이하에서 작동하지 않기 때문에 잘 사용하지 않음
- 인접 셀렉터 (ex: h1 + p ) = 따로 클래스나 ID를 주지 않고서도 특정 태그 바로 뒤에 오는 태그에만 다른 스타일을 줄 수 있는 유용한 셀렉터지만 IE6 이하에서 작동하지 않기 때문에 잘 사용하지 않음
- 속성 셀렉터 (ex: a[title], .goHome[href="/"], input[type="checkbox"] ) = 무엇보다 폼 작업시 checkbox 나 radio 속성을 가진 input 의 스타일만 따로 정의할 수 있기 때문에 굉장히 유용하지만, IE6 이하에서는 작동하지 않기 때문에 잘 사용하지 않음
* IE6 이하에서 작동하지 않는 것들에 대한 패치(?) 라이브러리들
- PNG 이미지를 사용할 땐, DD_belatedPNG 라이브러리를 적용한다.
- 앵커 이외의 태그에 :hover, :active 를 적용하거나 :focus 를 사용해야 할 땐, Whatever:hover 라이브러리 버젼 2.02 를 적용한다.
댓글