<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 연습</title>
<style>
.container1{
display: flex;
background-color: antiquewhite;
flex-wrap: wrap;
flex-direction: row;
justify-content:space-between;
align-items: stretch;
align-content: flex-start;
}
.container1 .item:nth-child(1){
background-color: aqua;
flex-basis: 100px;
padding: 20px 0;
}
.container1 .item:nth-child(2){
background-color: burlywood;
flex-basis: 500px;
padding: 20px 0;
}
.container1 .item:nth-child(3){
background-color:cadetblue;
flex-basis: 300px;
padding: 20px 0;
}
.container1 .item ul{
display: flex;
list-style: none;
padding: 0;
justify-content: space-between;
}
h1{text-align: center;}
.container2{
display: flex;
background-color: #fff;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
.container2 .item{
flex-basis: 30%;
height: 400px;
background-color: cornsilk;
}
.container3{
display: flex;
background-color: #fff;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.container3 .item{
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
margin:0 20px;
}
.container3 .item:nth-child(1){margin-left:0;}
.container3 .item:nth-child(4){margin-right:0;}
.container3 .item ul{
padding: 0 0px;
margin: 0px;
}
.container3 .item ul li{
list-style: none;
}
.container3 .item:nth-child(1) ul li:nth-child(1){
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(1) ul li:nth-child(2){
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(1) ul li:nth-child(3){
height: 100px;
background-color: red;
}
.container3 .item:nth-child(2) ul li:nth-child(1){
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(2) ul li:nth-child(2){
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(2) ul li:nth-child(3){
height: 250px;
background-color: red;
}
.container3 .item:nth-child(3) ul li:nth-child(1){
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(3) ul li:nth-child(2){
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(3) ul li:nth-child(3){
height: 250px;
background-color: red;
}
.container3 .item:nth-child(4) ul li:nth-child(1){
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(4) ul li:nth-child(2){
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.container3 .item:nth-child(4) ul li:nth-child(3){
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="container1">
<div class="item"></div>
<div class="item gnbContainer">
<ul>
<li>이용안내</li>
<li>전시</li>
<li>교육</li>
<li>소식</li>
<li>유물</li>
<li>박물관</li>
</ul>
</div>
<div class="item subContainer">
<ul>
<li>자료실</li>
<li>큐앤에이</li>
<li>멤버스</li>
<li>한국어</li>
<li>메뉴</li>
</ul>
</div>
</div>
<!-- //컨테이너 1 -->
<h1>박물관새소식</h1>
<div class="container2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- //컨테이너 2-->
<h1>소장유물</h1>
<div class="container3">
<div class="item">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="item">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="item">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div class="item">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>
</body>
</html>
궁금한점 : 모바일은 따로 flex 코드를 작성할까? , 자유롭게 움직이는 마진 패딩 어떻게 정할까?
'HTML , CSS' 카테고리의 다른 글
| [2021.03.21] 2주차 레이아웃 연습 (0) | 2021.03.21 |
|---|---|
| [2021.03.19] 레이아웃 구성 분할 태그 (0) | 2021.03.19 |
| [2021.03.15] flex 피드백 연습 (0) | 2021.03.15 |
| [2021.03.15] 테이블 연습 (0) | 2021.03.15 |
| [2021.03.09 - 03. 11] Flex 개념 정리 (0) | 2021.03.11 |