IT 정보/기타 정보
[HTML/CSS] 레이아웃 : 화면을 나누는 방법 ( HTML구성하기 )
개발하는 동그리
2022. 4. 28. 13:26
728x90
반응형
< 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%;
}728x90
반응형