< HTML 문서 >
<!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>
</head>
<body>
<div id="container">
<div class="col w10">
<div class="icon">아이<br>콘 1</div>
<div class="icon">아이<br>콘 2</div>
<div class="icon">아이<br>콘 3</div>
</div>
<div class="col w20">
<div class="row h40">영역1</div>
<div class="row h40">영역2</div>
<div class="row h20">영역3</div>
</div>
<div class="col w70">
<div class="row h80">영역4</div>
<div class="row h20">영역5</div>
</div>
</div>
</body>
</html><CSS>
#container {
height : 700px;
display : flex;
flex-direction : row;
justify-content : space-around;
flex-wrap : wrap;
font-weight : bold;
}
.col {
border : 3px solid Red;
display : flex;
flex-direction : column;
border :
}
.w10 {
flex : 0 0 6%;
}
.icon {
border : 2px dotted red;
margin : 10px;
}
.w20{
flex : 0 0 19%;
}
.w70{
flex : 0 0 69%;
}
.row {
border : 2px solid blue;
margin : 10px;
display : flex;
flex-wrap : wrap;
}
.h80 {
flex : 0 0 75%;
}
.h40 {
flex : 0 0 36%;
}
.h20 {
flex : 0 0 17%;
}'IT 정보 > 기타 정보' 카테고리의 다른 글
| IntelliJ Plugin 추천 - (5가지) (13) | 2022.05.16 |
|---|---|
| 리눅스 [Linux] (0) | 2022.05.02 |
| [HTML/CSS] HTML , CSS 는 무엇인가!? (3편) - flexbox! (11) | 2022.04.28 |
| [HTML/CSS] HTML , CSS 는 무엇인가!? (2편) - CSS (4) | 2022.04.27 |
| [HTML/CSS] HTML , CSS 는 무엇인가!? (1편) - HTML (11) | 2022.04.27 |