font-sze 는 문자의미 그대로 글자의 크기를 지정하는 속성입니다.
font-size: 후에 나오는 속성에 따라 다양하게 이용할 수 있습니다.
속성값
medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, 수치입력, initial, inherit 가 있습니다.
medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger 이 값들은 브라우저 기본 값에 대한 상대적인 크기 입니다. 단어 뜻 그대로라서 별다른 설명은 필요가 없을 것 같네요.
수치입력 부분은 단위를 지정해서 입력을 해 주시면 됩니다. 12px, 15em 과 같이 지정을 하시면 됩니다.
단위에 사용되는 것들로는 px, em, %, rem이 있습니다. px는 픽셀, em과 %는 부모(기본값, 혹은 상위 프레임 등)의 값에 대한 상대적인 값을 지정하는 요소입니다.
rem은 최상위 부모의 값에 대한 상대적인 비율을 의미합니다. 일관성 부분에서 가장 좋은 단위가 아닐까 생각이 되네요.
initial 은 기본 값을 사용하겠다는 의미입니다.
inherit 는 부묘요소를 그대로 따르겠다는 의미이지요.
간단한 파일을 하나 만들어서 확인해 보도록 하겠습니다.
우선 에디터를 이용해서 001.html 과 stylesheet.css 파일을 만들어 주세요.
001.html 의 내용은 다음과 같습니다.
<html>
<head>
<title>font-size 테스트</title>
<link rel="stylesheet" href="CSS/stylesheet.css">
</head>
<body>
<div id="s1">
글자 크기 테스트s1
</div>
<div id="s2">
글자 크기 테스트s2
</div>
<div id="s3">
글자 크기 테스트s3
</div>
<div id="s4">
글자 크기 테스트s4
</div>
<div id="s5">
글자 크기 테스트s5
</div>
<div id="s6">
글자 크기 테스트s6
</div>
<div id="s7">
글자 크기 테스트s7
</div>
<div id="s8">
글자 크기 테스트s8
</div>
<div id="s9">
글자 크기 테스트s9
</div>
<div id="s10">
글자 크기 테스트s10
</div>
<div id="s11">
글자 크기 테스트s11
</div>
<div id="s12">
글자 크기 테스트s12
</div>
<div id="s13">
글자 크기 테스트s13
</div>
<div id="s14">
글자 크기 테스트s14
</div>
</body>
</html>
그리고 stylesheet.css의 내용은 다음과 같습니다.
#s1 {
font-size:medium;
}
#s2 {
font-size:xx-small;
}
#s3 {
font-size:x-small;
}
#s4 {
font-size:small;
}
#s5 {
font-size:large;
}
#s6 {
font-size:x-large;
}
#s7 {
font-size:xx-large;
}
#s8 {
font-size:smaller;
}
#s9 {
font-size:larger;
}
#s10 {
font-size:15px;
}
#s11 {
font-size:10%;
}
#s12 {
font-size:2em;
}
#s13 {
font-size:initial;
}
#s14 {
font-size:inherit;
}
css 파일은 CSS 폴더를 만들고 그 안에 넣어둔 상태입니다.
만약 같은 폴더에 넣은 상태로 만드셨다면 링크 부분에서 CSS/ 부분을 지우시면 됩니다.
001.html 파일을 실행시키시면
이런 형태로 나오게 됩니다.
위 내용에는 rem 은 사용하지 않았습니다만, em 대신 rem 을 사용하셔도 결과는 같습니다. 간단한 파일이고, 최상위라고 해도 별다른 속성을 지정하지 않았기 때문이지요.
각 항목별로 차례차레 보시면서 비교해 보시고 어떤 걸 사용할지를 정하시는 게 좋을 거 같습니다.
부모 속성을 확인해 보시려면
<div id="s1">
<div id="s2">
</div>
</div>
와 같은 식으로 구조를 잡아 준 후 텍스트를 입력해서 확인해 보시면 됩니다.
코딩을 배울 때 항상 들었던 말이 백문이불여일타 였는데 확실히 기억에 남는 건 직접 쳐 보고 바꿔보기도 하는 쪽이었던 것 같습니다.
개인적으로 주로 사용하는 size 속성은 그냥 값을 지정하는 것입니다.
아직 홈페이지를 따로 만들거나 하지도 않았고 전문적으로 웹코딩을 하는 것도 아니기 때문에 전문적인 부분은 잘 모르지만,
아마 상대값을 입력해야 하는 경우라면 %나 rem을 사용하고, 고정 값을 입력 하거나 하는 방법으로 사용하지 않을까 생각이 됩니다.
'Programming > HTML & CSS' 카테고리의 다른 글
| [HTML] 테이블 행(row) 마우스 커서 오버시 색 변경 (0) | 2020.06.25 |
|---|---|
| [HTML] 테이블 각 행(row)별로 색 다르게 지정 하는 법 (0) | 2020.06.25 |
| [html | CSS]Style 주요 속성 (0) | 2018.12.26 |
| [html]기본 구조 및 문자열관련 문법 (0) | 2018.12.25 |