728x90
반응형
며칠전에 css 공부하다 만든 크리스마스 트리..
캡쳐해놓고 보면 그럴싸하지만..
창 크기를 조절하면 지멋대로..
기존 작성한 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
text-align: center;
}
.item1 {
background-color: white;
width: 425px;
height: 100px;
}
.item2 {
background-color: green;
width: 50px;
height: 100px;
}
.item3 {
background-color: white;
width: 425px;
height: 100px;
}
.item4 {
background-color: white;
width: 400px;
height: 100px;
}
.item5 {
background-color: green;
width: 100px;
height: 100px;
}
.item6 {
background-color: white;
width: 400px;
height: 100px;
}
.item7 {
background-color: white;
width: 375px;
height: 100px;
}
.item8 {
background-color: green;
width: 150px;
height: 100px;
}
.item9 {
background-color: white;
width: 375px;
height: 100px;
}
.item10 {
background-color: white;
width: 350px;
height: 100px;
}
.item11 {
background-color: green;
width: 200px;
height: 100px;
}
.item12 {
background-color: white;
width: 350px;
height: 100px;
}
.item13 {
background-color: white;
width: 300px;
height: 100px;
}
.item14 {
background-color: green;
width: 300px;
height: 100px;
}
.item15 {
background-color: white;
width: 300px;
height: 100px;
}
.item16 {
background-color: white;
width: 400px;
height: 100px;
}
.item17 {
background-color: brown;
width: 100px;
height: 100px;
}
.item18 {
background-color: white;
width: 400px;
height: 100px;
}
</style>
</head>
<body>
<div class="aa">
<div class="container">
<div class="item1">○</div>
<div class="item2">★</div>
<div class="item3">○</div>
<div class="item4">○</div>
<div class="item5"></div>
<div class="item6">○</div>
<div class="item7">○</div>
<div class="item8"></div>
<div class="item9">○</div>
<div class="item10">○</div>
<div class="item11"></div>
<div class="item12">○</div>
<div class="item13">○</div>
<div class="item14"></div>
<div class="item15">○</div>
<div class="item16">○</div>
<div class="item17"></div>
<div class="item18">○</div>
</div>
</div>
</body>
</html>
기존 코드에서
container의 width를 지정해주지 않아서 발생한 문제였다.
width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!!
.container {
display: flex;
flex-wrap: wrap;
text-align: center;
width: 900px;
}
728x90
반응형
'Programming > HTML & CSS' 카테고리의 다른 글
| [CSS] 선택자 (0) | 2020.12.28 |
|---|---|
| [CSS] Flex (0) | 2020.12.26 |
| [CSS] grid (0) | 2020.12.26 |
| [HTML] form 이해하기 (0) | 2020.12.24 |
| [CSS] inline, block, inline-block (0) | 2020.12.24 |
댓글