html/css : flex-wrap 속성 주의할 점
.container{
display : flex;
flex-direction: row;
flex-wrap : wrap;
justify-content: space-evenly;
}
.box{
width : 70px;
height: 70px;
background-color: red;
}<body>
<div class = "container">
<div class = "box1">1</div>
<div class = "box2">2</div>
<div class = "box3">3</div>
<div class = "box4">4</div>
<div class = "box5">5</div>
</div>
</body>이렇게 css에서 flex-wrap : wrap;을 설정했는데도 html 웹페이지에서
창을 늘리거나 줄였을 때 item들이 줄바꿈 되지 않았다.
이유는 flex-wrap 원리에 있었다!
👉 : Flex item이 Flex container에 닿으면 줄바꿈하는 원리
: html에는 기본 여백이 존재해서 화면 상에 item이 container를 벗어나도 기본 여백때문에 item이 container에 안 닿았다고 인식하는 것 같았다!
💡 ∴ item에 margin을 설정해서 창 크기 조절 시 item의 외부 영역을 설정하여 container에 닿는 것이 인식되도록 해서 줄바꿈이 되도록 하자!
.box{
width : 70px;
height: 70px;
background-color: red;
margin : 50px;
}html 이미지 크기 설정
<img src = "경로" width = "크기>
이렇게만 설정하면 가로에 맞춰서 세로 크기가 자동으로 정해진다고 배워서
이미지를 엄청 작게 넣을 때 width="50px" 이렇게만 설정하고 실행했는데
사진이 기본 크기로 나왔다.
👉 : 아마도 한 쪽 크기를 설정해서 자동으로 나머지가 설정되는 것은 적당한 크기일때 되는 것 같다.
💡 ∴ 크기를 엄청 작게하거나 크게 하고 싶을 때는 width와 height를 둘 다 선언하자!
성실히 살아가는 비전공자