728x90
네모박스 flex 써서 나열하기
HTML
<!-- 정사각형 -->
<div class="square-flex">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
정사각형 6개를 준비해준다.
그리고 flex 는 부모에다가 적용하는 것이므로
부모 태그(square-flex)도 하나 생성해줌.
CSS
/* 정사각형 */
.square {
width: 375px; /* 너비 설정 */
height: 375px; /* 높이 설정 */
border-radius: 32px; /* 모서리 둥글게 처리 */
border: 2px solid #ffbe01;
margin: 50px;
}
.square-flex {
display: flex;
/* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
초기 도안.
위에 사각형 3개하고
밑에 사각형 3개 간격차이를 좁히고 싶음.
좁힌 모습
CSS 수정
/* 정사각형 */
.square {
width: 375px; /* 너비 설정 */
height: 375px; /* 높이 설정 */
border-radius: 32px; /* 모서리 둥글게 처리 */
border: 2px solid #ffbe01;
margin: 37px 50px;
}
.square-flex {
display: flex;
/* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 37px; /* 네모 위에 상단 떨어지게 하기. */
}
화면 줄인 모습..
조금 맘에 들지는 않음
그리고 화면 확대할 시 정사각형 모양 유지 안함.
mediaquery 수정
/* media query */
@media screen and (max-width: 1200px) {
.wrapper {
max-width: auto;
}
.navbar a {
font-size: 22px;
}
.slide-box img {
max-width: 820px;
/* overflow: hidden; */
}
.square {
width: 25vw; /* 화면이 600px 이하일 때 너비와 높이를 25%로 변경 */
height: 25vw;
margin: 15px; /* 더 작은 간격으로 변경 */
border-radius: 32px;
}
}
@media screen and (max-width: 992px) {
.square {
width: 25vw; /* 화면이 600px 이하일 때 너비와 높이를 25%로 변경 */
height: 25vw;
margin: 15px; /* 더 작은 간격으로 변경 */
border-radius: 20px;
}
}
@media screen and (max-width: 768px) {
.wrapper {
min-width: 200px;
}
.navbar li {
display: none;
}
.square {
width: 30vw; /* 화면이 600px 이하일 때 너비와 높이를 30%로 변경 */
height: 30vw;
margin: 15px; /* 더 작은 간격으로 변경 */
border-radius: 20px;
}
}
/* 정사각형 */
.square {
width: 375px; /* 너비 설정 */
height: 375px; /* 높이 설정 */
border-radius: 32px; /* 모서리 둥글게 처리 */
border: 2px solid #ffbe01;
margin: 40px;
}
.square-flex {
display: flex;
/* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 37px; /* 네모 위에 상단 떨어지게 하기. */
}
728x90
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[SCSS] scss 수정 및 캐러셀 수정 (0) | 2024.08.24 |
---|---|
[SCSS] 맥도날드 css 에서 scss 로 수정 (0) | 2024.08.20 |
[JS] 캐러셀 만들기 (4개 사진)* (0) | 2024.03.26 |
[JS / CSS] 햄버거 언더 메뉴바 만들기 (2) (1) | 2024.03.26 |
[HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) (0) | 2024.03.26 |