sitepoint.com에 올라온 12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다.
원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다.
1. color는 글자에만 적용되는 게 아니다.
- 이미지가 없을 때의 대체 텍스트 색상
- 기본 보더 색상
- 목록 엘리먼트의 불릿 기호 또는 숫자 마커의 색상
- hr 엘리먼트의 선 색상
등으로도 적용된다고 합니다.
2. visibility 속성에는 collapse 값도 설정할 수 있다.
테이블 내부 요소에 한해 visibility : collapse를 설정하면 display : none과 같이 동작한다고 합니다(즉 공간을 차지하지 않는다는 얘기). 하지만 브라우저마다 동작이 다르고 특히 크롬에서는 visibility : hidden 처럼 동작합니다.
3. background 단축 속성에 3가지 값을 더 쓸 수 있다.
CSS3에서는 background-size, background-origin, background-clip 속성도 background 속성에 추가할 수 있습니다. 단, CSS3에 추가된 속성을 사용하려면 앞에 슬래시를 붙여야 한다고 합니다.
4. clip 속성은 엘리먼트가 절대 좌표일 때만 동작한다.
position: absolute 혹은 fixed 인 경우에 한해서만 적용된다고 합니다.
5. 수직 공간(위 또는 아래)에 대한 퍼센트는 높이가 아닌 너비에 비례한다.
margin-top/bottom, padding-top/bottom에 퍼센트를 쓰면 너비에 비례해서 값이 바뀌네요. 왜 이렇게 만든 걸까요...
6. border는 인셉션 같다.
border는 단축 속성인데 알고 보면 border에서 설정할 수 있는 각 속성들도 사실은 또 단축 속성이고...
7. text-decoration은 단축 속성이 됐다.
새로운 스펙에 따라 선 종류, 선 색상, 선 스타일을 한꺼번에 설정할 수 있다. 현재는 파이어폭스만 지원한다.
8. border-width 속성에는 medium, thin, thick 같은 키워드도 사용할 수 있다.
9. border-image는 아무도 안 쓴다.
데모에서 박스 크기 바꿔보면 안 쓰는 이유를 알 것도 같네요. -_-;;
10. empty-cells 라는 속성도 있다.
테이블의 빈 셀을 보여줄건지 / 아닌지 설정할 수 있는 속성. 심지어 IE8부터 모든 브라우저가 다 지원하네요.
11. font-style 속성에는 oblique라는 값도 있다.
우리가 "이탤릭"이라고 알고 있던 기울임꼴은 사실 oblique가 맞는 거고, 원래 "이탤릭"이라고 불리는 글꼴은 따로 있네요(위키피디아 Oblique Type 참고). "진짜 이탤릭"을 지원하는 폰트가 있다면 기대했던 모양과 달라질 수 있으니 현재 사용되고 있는 이탤릭체에 적절한 값은 olbique가 더 맞다는 얘기입니다.
12. word-wrap은 overflow-wrap과 같다.
word-wrap이 되려면 단어 단위로 줄이 바뀌어야 되는데 지금은 그냥 정해진 영역을 넘어간 내용을 자르고 있으므로 overflow-wrap과 같이 동작한다는 뜻입니다. 용어가 혼란스럽게 잘못 만들어졌다는 얘기인데, CSS 워킹 그룹의 Incomplete List of Mistakes in the Design of CSS (CSS 설계상의 실수)라는 글을 읽어보면 같은 내용이 나옵니다. W3C에서도 word-wrap을 overflow-wrap으로 대체하기로 했다고 하네요.
[adsense]