font-family
font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다.
1 2 3 | h1{ font-family: "Times New Roman", Times, serif;} |
위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다.
이 때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다.
- serif (장식이 있는 폰트)
- sans-serif
- cursive (흘림체)
- fantasy
- monospace (고정폭)
출처 : http://matchwebdesign.com/Daily-Thoughts/why-typographically-thinking-ruins-your-site.html
font-weight
폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다.
1 2 3 | h1{ font-weight: bold;} |
line-height
행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 수치로는 1.2에 해당합니다. 이 수치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다.
1 2 3 | p{ line-height: 1.3;} |
font
폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
이 중에서 font-size와 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
1 2 3 | h1{ font: 15px arial, sans-serif;} |
예제 - font-famliy.html
예제의 이름은 font-family.html이지만 본 수업의 모든 속성에 대해서 다루고 있는 예제입니다. 오해마세요. ^^
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html> <head> <style> #type1{ font-size:5rem; font-family: arial, verdana, "Helvetica Neue", serif; font-weight: bold; line-height: 2; } #type2{ font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif; } </style> </head> <body> <p id="type1"> Hello world<br> Hello world </p> <p id="type2"> Hello world<br> Hello world </p> </body></html> |
