728x90
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>nff</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>
<div class="wrapper">
<!-- 헤더 시작 -->
<header>
<h1>Free shipping over 80,000KRW</h1>
</header>
<!-- 컨테이너 시작 -->
<div class="container">
<!-- 왼쪽 aside -->
<aside class="left-sidebar">
<ul class="category">
<li><a href="#">SEARCH</a></li>
<li class="dropdown">
<a href="#">SHOP</a>
<ul class="dropdown-content">
<li><a href="#">for hair</a></li>
<li><a href="#">for neck</a></li>
<li><a href="#">for fingers</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">BOARD</a>
<ul class="dropdown-content">
<li><a href="#">notice</a></li>
<li><a href="#">q / a</a></li>
</ul>
</li>
</ul>
</aside>
<!-- 중앙 메인 콘텐트 -->
<main>
<div class="image-container">
<img src="img/logo.svg" alt="로고" class="logo-image" />
<img src="img/nff_bg.svg" alt="배경" class="bg-image" />
</div>
<footer>
<p>
JY CEO.kwon jae yeon Business License. [777-23-01151] On-Line
Register. 2022-서울 용산-1407[사업자정보확인] 04316 46-10,
Wonhyo-ro 1-ga, Yongsan-gu, Seoul 6 Floorkakaotalk ID : nff
11AM-17PM jy.nff.official@gmail.com 개인정보관리책임자 kwon jae
yeon기업은행 025-136582-04-018 kwon jaeyeon
</p>
</footer>
</main>
<!-- 우측 aside -->
<aside class="right-sidebar">
<ul class="category">
<li><a href="#">LOGIN</a></li>
<li><a href="#">CART</a></li>
<li><a href="#">ORDER</a></li>
<li><a href="#">MY PAGE</a></li>
</ul>
</aside>
</div>
</div>
</body>
</html>scss
@use "reset";
/* 색상 변수 */
$main_color: #ca7991;
$sub_color: #ece9e9;
$text_color: #c98181;
// wrapper
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
// 헤더
header {
background-color: $main_color;
color: white; //텍스트 컬러
text-align: center;
align-items: center;
padding: 1.3vw;
h1 {
font-size: 1.3vw;
}
}
// 컨테이너
.container {
display: flex;
flex: 1;
aside {
background-color: $sub_color;
width: 260px;
padding: 1rem;
}
main {
width: 9.2vw;
flex: 1;
padding: 1rem;
background-color: rgb(230, 255, 230);
footer {
background-color: #fffefe;
padding: 0.5rem;
text-align: center;
}
}
}참고자료
https://velog.io/@mooongs/flex1%EC%9D%98-%EC%9D%98%EB%AF%B8
[CSS] flex:1의 의미
미니 프로젝트를 만들던 중, 자주 등장하지만 헷갈리는 개념인 flex:1의 개념에 대해 다시 정리해 보았다.
velog.io
Flexbox 기본 개념
- Flex 컨테이너와 Flex 아이템
- display: flex;를 설정한 요소가 Flex 컨테이너가 됩니다.
- Flex 컨테이너의 직계 자식 요소들이 Flex 아이템이 됩니다.
- flex: 1;
- flex: 1;는 Flex 아이템이 부모 컨테이너 내의 사용 가능한 모든 공간을 균등하게 차지하도록 만듭니다.
- flex: 1;는 다음과 같은 의미를 가집니다:
- flex-grow: 1;: 남은 공간을 차지하도록 합니다.
디폴트 값은 0으로, inflexible한 상태를 의미
(즉, 화면이나 플렉스 컨테이너의 너비 변경과 상관 없이 원래의 크기 유지)
-
-
- flex-shrink: 1;: 공간이 부족할 때 줄어들 수 있도록 합니다.
-
디폴트 값은 1로, 1 이상의 속성 값이 주어지면 해당 비율로 줄어들 수 있음을 의미 = flexible
-
-
- flex-basis: 0;: 기본 크기를 0으로 설정합니다.
-
디폴트 값인 auto는 컨텐츠의 너비만큼을 의미
flex-direction이 row일 때는 너비, column일 때는 높이를 의미
"flex: 1"은 공간을 균등하게 나누는 거
속성 설명
- flex-grow: 아이템이 flex 컨테이너의 남은 공간을 차지하는 비율을 설정합니다. 1로 설정되면 남은 공간을 균등하게 나눕니다.
- flex-shrink: 아이템이 flex 컨테이너의 공간이 부족할 때 줄어드는 비율을 설정합니다. 1로 설정되면 공간이 부족할 때 균등하게 줄어듭니다.
- flex-basis: 아이템의 기본 크기를 설정합니다. 0%로 설정되면 아이템의 내용물 크기에 관계없이 가용 공간을 기준으로 크기가 결정됩니다.
예시
다음 예시에서는 세 개의 flex 아이템을
flex: 1로 설정하여 컨테이너의 가용 공간을 균등하게 나누는 방법을 보여줍니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
}
.item {
flex: 1;
border: 1px solid black;
}이 코드에서는 Item 1, Item 2, Item 3이 모두 동일한 비율로 가용 공간을 차지하게 됩니다.
각 아이템은 flex 컨테이너 안에서 동일한 크기로 표시됩니다.
요약
- flex: 1은 flex-grow: 1, flex-shrink: 1, flex-basis: 0%를 한 번에 설정하는 축약형 속성입니다.
- 이 속성은 아이템이 flex 컨테이너 내에서 남은 공간을 균등하게 나누고,
- 공간이 부족할 때 균등하게 줄어들며, 기본 크기를 0%로 설정하여 공간을 유연하게 사용하도록 합니다.
이 속성은 간단하면서도 강력한 유연한 레이아웃을 구성하는 데 유용합니다.
728x90
'> 포트폴리오 > nff' 카테고리의 다른 글
| [리액트] js 로 짠 코드에서 리액트로 옮길 때 나타나는 css 차이 수정 (0) | 2024.08.18 |
|---|---|
| [리액트] 작성한 코드 리액트로 옮기기 (SCSS 사용) (0) | 2024.08.12 |
| [CSS] news ticker 만들기 (0) | 2024.08.11 |
| [SCSS] aside 꾸미기 (0) | 2024.08.01 |
| [SCSS] 틀 만들기 (0) | 2024.07.31 |
