[HTML & CSS] font-size (2021

티스토리 뷰

HTML & CSS

[HTML & CSS] font-size (2021 - 12- 23 수정)

Dongi 2021. 12. 7. 20:27

안녕하세요 동기 여러분! 오늘은 폰트 사이즈(font-size) = 글자 크기를 바꾸는 방법에 대해 알아보도록 합시다.

font-size

생김새

h2 {
  font-size: 80px;
}

1. pixel (px) : 가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위이다.

h1 {
  font-size: 4rem;
}
/* 보통 기본 폰트 사이즈가 16px이기 때문에 아마 h1의 폰트 사이즈는 16 * 4 = 64px일 것이다. */
/* 브라우저 마다 기본 폰트 사이즈가 다를 수 있음 */

2. rem(The root element's font-size) :가변형 폰트 사이즈, 이름에 힌트가 있다 root(뿌리, 최상위)의 폰트 사이즈에 비례해 폰트 사이즈를 변경할 수 있다. (예를 들어 현재 HTML 문서의 폰트 사이즈가 14px라고 치면 1rem은 14px, 2rem은 28px입니다.)

h3 {
  font-size: 2em;
}

/* 현재 부모 요소가 뭔지 모르기 때문에 기본(최상위) 폰트 사이즈가 부모 폰트 사이즈 일 것이다 고로 h3의 폰트 사이즈는 16 * 2 = 32px일 것이다. */

3. em : rem과 비교할 만한 상대는 em이다. em도 가변형 기준인데, em은 부모 요소의 폰트 사이즈에 비례해서 크기가 변할 수 있다.

왜냐하면 폰트 사이즈는 상속을 받는 프로퍼티이기 때문이다. 이는 em의 값이 명확하게 명시되지 않는 한 부모 요소에 비례해서 변한다. 예를 들어 부모 요소의 폰트 사이즈가 20px이면 자식 요소의 폰트사이즈가 1em일 때, 1em은 20px와 동등한 크기를 가진다. 부모 20px -> 자식 0.5em=10px

예

가장 부모태그인 <body>의 폰트 크기를 20px로 정하고 나머지 자식태그들은 rem과 em으로 글자 크기를 바꾸어 보았다.

<!-- HTML 코드 -->
<!DOCTYPE html>
<html>
<head>
	<title>동기 코딩의 생활</title>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
	<h1>짬밥</h1>
	<p>짬밥은 군대에서 나오는 밥을 의미한다. 응용된 단어로는 짬 타이거가 있다. (짬을 먹고 큰 냥냥이)</p>
	<h2>군 생활의 길이</h2>
	<p>군 생활을 오래할 수록 짬밥을 많이 먹었다 표현한다.</p>
	<h2>군대에서의 밥</h2>
	<h3>306보충대대</h3>
	<p>난 밥은 진짜 잘 먹는 편인데, 11월에 입대를 해서 그런지 날씨가 쌀쌀해서 밥을 많이 먹어야겠다고 생각을 했다. 그래서 그냥 많이 먹었다. 맛은 없었음.</p>
	<h3>5사단 신교대</h3>
	<p>먹고 또 먹어도 배가 고픈시기, 뭘 먹어도 다 맛있었다.</p>
	<h3>제3수송교육연대</h3>
	<p>PX이용이 가능했다.</p>
	<h3>5사단 토우중대</h3>
	<p>내가 있었던 중대의 짬밥은 어마무시하게 맛있었다. 취사병 선임이 호텔조리학과 출신이었고 그의 후임도 아주 요리를 잘 배웠다. 취사장 이모님의 음식 솜씨도 대단했다.<br>
		내가 꼽는 우리 부대 최고의 짬밥은 1. 감자탕(이건 진짜 다시 먹어보고싶다.) 2. 떡 만두국 3. 제육볶음
	</p>
</body>
</html>

/* CSS 코드 */
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

p {
  font-size: 1rem;
}

body의 폰트 크기가 20px으로 기준이 된다.

h1은 2.5em으로 (20 * 2.5 = 50) 50px가 된다.

h2는 2em으로 (20 * 2 = 40) 40px가 된다.

h3는 1.5em으로 (20 * 1.5 = 30) 30px가 된다.

p는 1rem으로 16px가 된다.

아래는 실행 화면

오늘의 느낌

군대에서 가장 맛있었던 음식을 꼽으라면 훈련 나가서 숨어서 끓여먹은 라면이 가장 맛있었다. 타 대대의 전역이 얼마 남지 않은 간부가 캠핑 세트를 들고 와서 거기에다가 너구리 라면을 끓여 줬는데 양을 늘리기 위해 밥도 넣고 반찬도 다 때려 넣고 꿀꿀이 죽처럼 끓여서 먹었다. 그때 당시가 겨울은 아니고 3월? 초봄 날씨라 아주 쌀쌀했는데 그 라면은 진짜 천국의 맛이었다. 갑자기 라면 땡기넼ㅋㅋㅋ

'HTML & CSS' 카테고리의 다른 글

[HTML & CSS] CSS id Selectors (0)	2021.12.08
[HTML & CSS] A Background Image (0)	2021.12.08
[HTML & CSS] CSS Class Selectors (0)	2021.12.06
[HTML & CSS] color (0)	2021.12.06
[HTML & CSS] font-family (0)	2021.12.05

공지사항

동기 코딩 연락처

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			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	27	28	29	30	31

글 보관함

Dongi_coding 동기_코딩

티스토리 뷰