플렉서블 박스 html 이해 안 되는 두 군데
처음엔 책 보고 참고하긴 했지만 어쨌든 최종 완성본 화면 보고서 내가 만든 플렉서블 박스.
근데 솔직히 100% 이해했다고는 말 못하겠다. 한 90% 정도 이해한 느낌...
먼저 저 position: absolute; 부분...책에는 설명이 안 나와 있다.
저 의미는 아는데 저기에 저걸 왜 쓰는지 모르겠다.
그리고 min-height: 80px; 부분도 걍 height 안 쓰고 왜 min-을 쓴 거지.
position 속성 지우고 min- 접두사 지우니까 화면이 완전 달라지긴 하더라.
근데 달라지는 건 눈으로 보이는데 당최 이해가 안돼!!!!ㅠㅠㅠㅠㅠㅠㅠㅠ
뿌듯함도 잠시, 완전 찝찝함이 들이닥쳤다ㅠㅠ
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉서블 박스</title>
<style>
* {margin: 0; padding: 0;}
#wrap {
display: flex;
flex-flow: row wrap;
width: 90%;
margin: 0 auto;
}
.header {
display: flex;
order: 1;
width: 100%;
position: relative;
justify-content: flex-end;
}
.header h1 {
position: absolute;
top: 0;
left: 0;
width: 12.5%;
height: 142px;
background: red;
}
.header nav {
width: 87.5%;
min-height: 80px;
background: red;
}
.slider_section {
width: 50%;
order: 2;
background: yellow;
height: 500px;
}
.gallery_section {
width: 30%;
order: 3;
background: green;
}
.rankup_section {
width: 20%;
order: 4;
background: blue;
}
.latest_post_section {
width: 40%;
height: 200px;
order: 5;
background: pink;
}
.popular_post_section {
width: 30%;
order: 6;
background: purple;
}
.banner_section {
display: flex;
width: 20%;
order: 7;
flex-direction: column;
}
.banner_section div.banner_box_01 {
flex: 1 1 0;
background: gold;
}
.banner_section div.banner_box_02 {
flex: 1 1 0;
background: silver;
}
.social_section {
width: 10%;
order: 8;
background: orange;
}
.footer {
width: 100%;
height: 50px;
order: 9;
background: black;
}
</style>
</head>
<body>
<div id="wrap">
<header class="header">
<h1></h1>
<nav></nav>
</header>
<section class="slider_section"></section>
<section class="gallery_section"></section>
<section class="rankup_section"></section>
<section class="latest_post_section"></section>
<section class="popular_post_section"></section>
<section class="banner_section">
<div class="banner_box_01"></div>
<div class="banner_box_02"></div>
</section>
<section class="social_section"></section>
<footer class="footer"></footer>
</div>
</body>
</html>
