em과 rem은...
상위 요소 글자 크기에 따라 달라지는 가변성을 지니고 있는 것이지,
브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다.
따라서 진정한 반응형 단위라고 할 수는 없다.
반응하는 단위들
아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여
크기를 결정하는 가변 단위이다.
- vw /* 뷰포트 너비의 100분의 1*/
- vh /* 뷰포트 높이의 100분의 1*/
- vmin /* 뷰포트 너비와 높이 중 작은 쪽의 100분의 1*/
- vmax /* 뷰포트 너비와 높이 중 큰 쪽의 100분의 1*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다른 상대 단위들</title>
<style>
p{
margin: 0; /*p태그는 기본적으로 margin의 속성을 가지고 있음*/
font-size: 50vw;
}
</style>
</head>
<body>
<p>반응형</p>
</body>
</html>
'Web > HTML+CSS+JS' 카테고리의 다른 글
| 반응형 웹 기초: CSS 함수 개념과 calc() (0) | 2023.12.24 |
|---|---|
| 반응형 웹 기초: 가변 레이아웃 (가변 그리드) (0) | 2023.12.24 |
| 반응형 웹 기초: 상대 단위 em, rem (0) | 2023.12.24 |
| [스파르타 코딩클럽] 크리스마스 디데이 캘린더 만들기 (0) | 2023.12.24 |
| 웹프로그래밍첫걸음 7~10장. CSS, JavaScript (1) | 2023.06.14 |