CSS / Reference / font-size
개요
font-size는 글자 크기를 정하는 속성입니다.
- 기본값 : medium
- 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit
- medium : 웹브라우저에서 정한 기본 글자크기입니다.
- xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다.
- smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
- length : px, %, em, rem 등으로 크기를 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제 1
- medium, xx-small, x-small, small, large, x-large, xx-large로 글자 크기를 정한 예제입니다.
- 웹브라우저의 기본 글자 크기를 바꾸면 예제의 글자 크기도 바뀝니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-xx-small { font-size: xx-small; }
.jb-x-small { font-size: x-small; }
.jb-small { font-size: small; }
.jb-medium { font-size: medium; }
.jb-large { font-size: large; }
.jb-x-large { font-size: x-large; }
.jb-xx-large { font-size: xx-large; }
</style>
</head>
<body>
<p class="jb-xx-small">Lorem ipsum dolor sit amet. : <code>xx-small</code></p>
<p class="jb-x-small">Lorem ipsum dolor sit amet. : <code>x-small</code></p>
<p class="jb-small">Lorem ipsum dolor sit amet. : <code>small</code></p>
<p class="jb-medium">Lorem ipsum dolor sit amet. : <code>medium</code></p>
<p class="jb-large">Lorem ipsum dolor sit amet. : <code>large</code></p>
<p class="jb-x-large">Lorem ipsum dolor sit amet. : <code>x-large</code></p>
<p class="jb-xx-large">Lorem ipsum dolor sit amet. : <code>xx-large</code></p>
</body>
</html>
예제 2
- smaller, larger로 글자 크기를 정한 예제입니다.
- 부모 요소의 글자 크기가 변하면 자식 요소의 글자 크기도 변합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-default-1 { font-size: 16px; }
.jb-default-2 { font-size: 32px; }
.jb-smaller { font-size: smaller; }
.jb-larger { font-size: larger; }
</style>
</head>
<body>
<p class="jb-default-1">
<span>Lorem ipsum dolor sit amet.</span>
<span class="jb-smaller">Lorem ipsum dolor sit amet.</span>
<span class="jb-larger">Lorem ipsum dolor sit amet.</span>
</p>
<p class="jb-default-2">
<span>Lorem ipsum dolor sit amet.</span>
<span class="jb-smaller">Lorem ipsum dolor sit amet.</span>
<span class="jb-larger">Lorem ipsum dolor sit amet.</span>
</p>
</body>
</html>
예제 3
- px, %, em, rem을 이용하여 글자 크기를 정하는 예제입니다.
- 웹브라우저의 기본 글자 크기는 보통 16px와 같습니다.
- %와 em은 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. 100%와 1em은 부모 요소의 글자 크기와 같고, 숫자가 커질수록 글자가 커지고, 숫자가 작아질수록 글자가 작아집니다.
- rem은 최상위 요소, 즉 html 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 32px; }
.jb-default { font-size: 16px; }
.jb-percentage { font-size: 150%; }
.jb-em { font-size: 1.5em; }
.jb-rem { font-size: 1.5rem; }
</style>
</head>
<body>
<div class="jb-default">
<p>Lorem ipsum dolor sit amet.</p>
<p class="jb-percentage">Lorem ipsum dolor sit amet.</p>
<p class="jb-em">Lorem ipsum dolor sit amet.</p>
<p class="jb-rem">Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...
개요 HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 탭을 이용하여 들여쓰기를 하면... <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> ...
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...
개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...
CSS / Reference / letter-spacing, word-spacing
개요 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 아래는 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...
개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : 단어 ...
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px ); 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...
개요 word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. word-break 속성의 값이 keep-all이면 단어가, ...
개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨김니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 표는 빈 셀의 테두리를 표시합니다. 두 ...
CSS / Reference / border-width
개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정합니다. 기본값은 medium입니다. inherit : 부모 요소의 속성값을 상속받습니다. 속성값은 한 개에서 네 개까지 정할 수 있습니다. 다음은 모든 테두리의 두께를 xx로 만듭니다. border-width: xx 다음은 위쪽과 아래쪽 테두리의 두께는 xx로, 왼쪽와 오른쪽의 ...