반응형
1. 부모 자식 관계
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2. 출력하기
.parent {
width: 300px;
height: 200px;
background-color: blue;
}
.child {
width: 100px;
height: 100px;
background-color: orange;
}
파란색이 부모, 노란색이 자손이다. width를 auto로 하면 부모(파란색)의 너비를 따라간다.
3. 픽셀(px)수 보는 방법.
4. 부모 폰트사이즈를 40px로 하자 자손 너비가 40*10(em)=400px이 됐음.
부모요소로부터 글꼴 사이즈를 상속받는다.
5. 단위
- px (픽셀)
- 1024 768 -> 가로 픽셀 1024개, 세로 픽셀 768개 있음
- % (상대적인 백분율)
- 기준이 있어야함
- 자식요소는 부모요소의 속성값이 기준점이됨
- em (요소의 글꼴 크기)
- html 기본 글꼴 사이즈 : 16px로 설정됨
- 16px * 10 = 160px
- 1em = 16px
- rem (루트 요소의 글꼴 크기)
- 부모요소가 아닌 html를 기준으로 글꼴 사이즈를 상속
- vw (뷰포트 가로 너비의 백분율)
- 예) 현재 화면에서 뷰포트대비 정확히 절반 차지
- vh (뷰포트 세로 너비의 백분율)
반응형
