절대단위 대신 사용해 볼 상대단위
절대 길이 단위 px
: 어떤 상황에서도 동일한 값을 유지, 가변성 없음.
em과 rem
: 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위
- em: 부모 요소의 글꼴 크기
더 알아보기! em으로 여백 크기(padding과 margin)를 정할 때는,
자기 자신의 글자 크기를 기준으로 함 - rem: 루트 요소의 글꼴 크기
루트요소란? <html> 요소. 기본값은 16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em과 rem</title>
<style>
.outer{
font-size: 24px;
}
.inner{
font-size: 2em; /*48px*/
display: inline-block;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">고양이</div>
</div>
</body>
</html>
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 반응형 웹 기초: 가변 레이아웃 (가변 그리드) (0) | 2023.12.24 |
|---|---|
| 반응형 웹 기초: 뷰포트 단위 vw vh vmin vmax (0) | 2023.12.24 |
| [스파르타 코딩클럽] 크리스마스 디데이 캘린더 만들기 (0) | 2023.12.24 |
| 웹프로그래밍첫걸음 7~10장. CSS, JavaScript (1) | 2023.06.14 |
| [자바스크립트의 시작] Javascript 함수 (0) | 2023.05.03 |