본문 바로가기

Tip&Tech/Web

[Head First HTML with CSS & XHTML] 4. CSS영화 속 주인공! Font & Color!

* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

* Font & Color
1. font-family(폰트 종류)
 - font-family: Verdanan, Geneva, Arial, sans-serif;

2. text-decoration
 - none : 아무 효과 없음
 - underline : 밑줄
 - overline : 윗줄
 - line-through : 취소선
 - blink : 사각 테두리(특이함)

3. font-size(폰트 사이즈)
 - px : 문자의 가장 밑에서 가장 위까지의 거리 단위(예 : glass의 경우, g의 아래쪽과 l의 위쪽 사이의 거리)
 - % : 기준이 되는 폰트의 비율
 - em : 기준이 되는 폰트의 크기(예 : 14픽셀)가 있고, 그것을 상속받는 엘리먼트에 대한 상대적인 크기를 1.2em(1.2배 = 17픽셀)와 같이 나타냄
 - keywords : xx-small, x-small, small, medium, large, x-large, xx-large(보통 각각의 크기는 이전  크기보다 120%정도 크고 small 폰트는 약 12픽셀의 높이로 정의 됨
 - 적절한 폰트 설정 방법 : keywords를 이용해 body에서의 기준을 설정하고 나머지는 %나 em을 이용함!
 - h1(200%), h2(150%), h3(120%), h4(100%), h5(90%), h6(60%)의 크기를 가짐, 즉 h4가 body의 크기와 동일함(통상적으로 16픽셀)

4. Color
 - 17가지 색이름 : Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow
 - 오렌지색 : rgb(80%, 40%, 0%), rgb(204, 102, 0), #cc6600 모두 같은 값!
 - 폰트 축약 : #cb0는 #ccbb00과 같다.
 - 온라인 웹 챠트 : http://www.urlclip.net/web_colors

5. XHTML 관련 팁
 - 삭제되어야하는 콘텐츠의 표현 : <del> 태그
 - 추가되어야하는 콘텐츠의 표현 : <ins> 태그