반응형
- 주축(main axis)과 교차축(cross axis)
ㄴ교차축은 일반적으로 수직임 (바뀔 수도 있음)
- justify-content: 주축에 적용됨
- align-items: 교차축에 적용됨
(참고)
100 vh : vh 는 viewport height 다 (viewport는 screen 이라고 생각해도 된다)
==> 100 screen height는 화면 높이의 100%를 뜻함
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second {
background-color: wheat;
}
</style>
</head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</html>
결과
body가 화면의 100% 임을 확인할 수 있다.
반응형
'2. CSS' 카테고리의 다른 글
| CSS flex 태그: 자식 엘리먼트를 flex 컨테이너로 만들기 (0) | 2024.11.19 |
|---|---|
| CSS flex-direction 사용하기 (0) | 2024.11.19 |
| CSS flex box(플렉스 박스)의 특징1 (0) | 2024.11.19 |
| CSS inline-block 태그 사용하기 (0) | 2024.11.19 |
| CSS Class(클래스) 태그 간단하게 줄이기 (0) | 2024.11.18 |