코딩하는 김딸기
VEAMFLEX 과제 본문
기본 레이아웃
<!DOCTYPE html>
<html>
<head>
<title>My Bucket Lists</title>
<link rel="stylesheet" href="veamstyle.css">
</head>
<body>
<header class="header">
<div class="l_wrapper">
<div class="header-box">/
<img src="logo.png" class="logo">
<p class="descript">Unlimited movies, TV shows, and more.</p>
<img src="anger.png" class="anger" >
</div>
</div>
</header>
<main class="contents">
<div class="l_wrapper">
<div class="container">
<div class="container-main">
ss
</div>
<div class="container-sidebar">
<aside class="category">
<h2>Genre</h2>
<ul>
<li>
<h3>Action &Adventure</h3>
<ul>
<li><a href="">Adventure</li>
<li><a href="">Action Thrillers</li>
<li><a href="">Superhero Movies</li>
</ul>
</li>
<li>
<h3>Dramas</h3>
<ul>
<li><a href="">Crime Dramas</li>
<li><a href="">Team Dramas</li>
<li><a href="">Romantic Dramas</li>
</ul>
</li>
</ul>
</aside>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="l_wrapper">
푸터
</div>
</footer>
</body>
</html>
/* Reset */
body,p {
margin: unset;
padding: unset;
}
img{
vertical-align: top; /*?*/
}
/* Layouts */
.l_wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-shadow: inset 0 0 4px red;
}
/*component*/
body{
color:#999;
background-color: #111;
}
.header {
background-color: #555;
justify-content: flex-start;/*부모기준시작을 기준으로 정렬*/
text-align: left;
}
.header-box{ /*?*/
display: flex;
align-items: center;
height: 180px;
}
.logo{
margin-left: 0;
width: 200px;
}
.descript{
font-size: 16px;
margin: 0 20px; /* 텍스트 주변에 약간의 여백 추가 */
color: white;
display: flex;/*flex안에서의 flex아이템이 또 flex 컨테이너가 됨*/
align-items: center;
}
.descript::before{ /*가상요소-인라인상태이므로 너비,높이설정불가*/
/*descript의 flex 아이템이 됨*/
content: '';
display: inline-block;/**/
height: 1px;
width: 64px;
margin: 0 30px 0 20px;
background-color: currentColor;
}
.anger{
margin-right: 0;
width: 140px;
margin-top: auto;
margin-left: auto;
}
/* Typography */
:root {
font-family: arial;
}
/* Components */
body {
color: #999;
background-color: #111;
}
.contents {
padding: 24px 0;
background-color: #000;
}
.container{
display: flex;
min-height: 848px;
gap: 24px; /*사이드바와 메인과의 간격*/
box-shadow: inset 0 0 20px gold;
}
.container-main{
box-shadow: inset 0 0 20px dodgerblue;
background-color: #222222;
flex-grow: 1;/*컨테이너의 가용공간을 전부 메인으로 채움*/
flex-basis: 0;/*안전성유지-내부 컨텐츠에 의해 사이드바를 침투하지 않게 방지*/
min-width: 0;/*안전성유지-내부 컨텐츠에 의해 컨테이너 너비가 커지는 것 방지*/
}
.container-sidebar{
box-shadow: inset 0 0 20px orangered;
width: 168px;/*사이드바의 너비는 고정됨*/
height: 340px;
background-color: #222222;
}
Flexbox로 만드는 사이드바 레이아웃 안정성 높이기
.container-main{
box-shadow: inset 0 0 20px dodgerblue;
background-color: #222222;
flex-grow: 1;/*컨테이너의 가용공간을 전부 메인으로 채움*/
flex-basis: 0;/*안전성유지-내부 컨텐츠에 의해 사이드바를 침투하지 않게 방지*/
min-width: 0;/*안전성유지-내부 컨텐츠에 의해 컨테이너 너비가 커지는 것 방지*/
}
.container-sidebar{
box-shadow: inset 0 0 20px orangered;
width: 168px;/*사이드바의 너비는 고정됨*/
height: 340px;
background-color: #222222;
}
- 레이아웃 안정성:
- .container-main이 flex-grow: 1과 flex-basis: 0으로 설정되어 있어 사이드바의 고정 너비를 제외한 모든 남은 공간을 차지합니다.
- min-width: 0을 사용하여 .container-main이 컨텐츠의 크기 때문에 부모 요소를 벗어나지 않도록 합니다.
- 사이드바 고정:
- .container-sidebar의 고정 너비(width: 168px)와 높이(height: 340px) 설정으로 사이드바가 항상 일정한 크기를 유지하며, 레이아웃의 예측 가능한 부분을 담당합니다.
- Flexbox로 만드는 그리드의 한계
잘못 작성하기 쉬운 마크업
- p요소 내부의 div 불가
- h1 ~ h6요소 내부의 div 불가
- ol, ul요소 직계 자식은 li만 가능
- 클릭 가능한 요소 내부의 클릭 가능한 요소 불가. (a, button, label 등)
- 예시) a요소 내부의 a요소 불가
의외로 가능한 마크업
- a요소 내부의 div 구성 가능
- 단 CSS 측면에서 a요소에게 display: block
- li: 종료 태그없이 사용 가능하지만 추천하지 않음.
<!-- 사용 가능 -->
<ul>
<li>First item
<li>Second item
</ul>
<!-- 아래 코드는 어떻게 해석 될까? -->
<ul>
<li>First item<li>
<li>Second item<li>
</ul>
/* Reset */
body,p, ul{
margin: unset;
padding: unset;
}
h1,h2,h3{
margin: unset;
font-size: unset;
font-weight: unset;
}
li{
list-style-type: none;
}
a{
color: unset;
}
사이드바 스타일 설정 초기화하기
사이드바 스타일 지정

<div class="container-sidebar">
<aside class="category">
<h2>Genre</h2>
<ul class="category-list">
<li class="category-item">
<h3>Action &Adventure</h3>
<ul class="category-sub">
<li><a href="">Adventure</a></li>
<li><a href="">Action Thrillers</a></li>
<li><a href="">Superhero Movies</a></li>
</ul>
</li>
<li class="category-item">
<h3>Dramas</h3>
<ul class="category-sub">
<li><a href="">Crime Dramas</a></li>
<li><a href="">Team Dramas</a></li>
<li><a href="">Romantic Dramas</a></li>
</ul>
</li>
</ul>
</aside>
</div>
.container-sidebar{
width: 168px;/*사이드바의 너비는 고정됨*/
height: 340px;
background-color: #222222;
}
.category h2{ /*before의 부모요소*/
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
word-break: break-all;/*!!텍스트가 넘치면 띄어쓰기상관없이 컨테이너 크기에 맞게 줄바꿈한다*/
}
.category h2::before{ /*ㅗ2의자식요소*/
content: "";
background-color: red;
width: 30px;
height: 30px;
flex-shrink: 0;/*오른쪽 텍스트의 내부컨텐츠크기 증가에 의한 크기감소 방지*/
}
.category-item{/*하위 컴비네이터-category하위li*/
border-top: 1px solid #FA8073;
background-color: #222222;
}
.category-item h3{
color: #FA8073;
padding: 8px 10px ;
font-size: 14px;
}
.category-sub{
margin-left: 20px;
padding: 10px 0;
font-size: 12px;
}
.category-sub li{
padding: 6px 0;
}
.category-sub li+li{
border-top: 1px solid #333;
}
.container-sidebar 클래스
- width: 168px;: 사이드바의 너비를 168px로 고정합니다.
.category h2
- margin-bottom: 12px;: 아래쪽 여백을 12px로 설정합니다.
- display: flex;: 플렉스 레이아웃으로 설정하여 자식 요소를 수평으로 배치합니다.
- align-items: center;: 자식 요소를 수직 가운데 정렬합니다.
- gap: 10px;: 자식 요소 간의 간격을 10px로 설정합니다.
- word-break: break-all;: 텍스트가 컨테이너를 넘칠 경우, 띄어쓰기와 관계없이 줄 바꿈하여 컨테이너에 맞춥니다.
.category h2::before
- content: "";: 가상 요소를 생성합니다.
- background-color: red;: 가상 요소의 배경색을 빨간색으로 설정합니다.
- width: 30px;: 너비를 30px로 설정합니다.
- height: 30px;: 높이를 30px로 설정합니다.
- flex-shrink: 0;: 자식 텍스트의 크기가 증가해도 이 가상 요소의 크기가 줄어들지 않도록 합니다.
.category-item
- border-top: 1px solid #FA8073;: 상단에 1px 두께의 연어색 실선 테두리를 추가합니다.
- background-color: #222222;: 배경색을 어두운 회색으로 설정합니다.
.category-item h3
- color: #FA8073;: 텍스트 색상을 연어색으로 설정합니다.
- padding: 8px 10px;: 상하 패딩을 8px, 좌우 패딩을 10px로 설정합니다.
.category-sub
- margin-left: 20px;: 왼쪽 여백을 20px로 설정하여 들여쓰기 효과를 줍니다.
- padding: 10px 0;: 상하 패딩을 10px로 설정합니다.
.category-sub li
- padding: 6px 0;: 상하 패딩을 6px로 설정하여 각 항목의 여백을 설정합니다.
.category-sub li+li
- border-top: 1px solid #333;: 두 번째 항목부터 상단에 1px 두께의 어두운 회색 실선 테두리를 추가합니다.
종합 요약
- .container-sidebar: 사이드바의 고정된 너비와 높이, 어두운 회색 배경 설정.
- .category h2: 카테고리 제목을 플렉스 레이아웃으로 설정하고, 텍스트가 넘칠 경우 줄 바꿈.
- .category h2::before: 카테고리 제목의 왼쪽에 빨간색 가상 요소를 추가.->배경이미지 삽입 가능
- .category-item: 카테고리 항목에 상단 실선 테두리와 어두운 회색 배경 설정.
- .category-item h3: 카테고리 항목 제목에 연어색 텍스트와 패딩 설정.
- .category-sub: 서브 카테고리의 들여쓰기와 패딩 설정.
- .category-sub li: 서브 카테고리 항목의 패딩 설정.
- .category-sub li+li: 서브 카테고리 항목 사이에 상단 테두리 추가.
컨테이너 메인 컨텐츠 레이아웃

<div class="container-main">
<ul class="l_row">
<li class="l_col">
<section class="card">a</section>
</li>
<li class="l_col">
<section class="card">b</section>
</li>
<li class="l_col">
<section class="card">c</section>
</li>
<li class="l_col">
<section class="card">a</section>
</li>
<li class="l_col">
<section class="card">b</section>
</li>
<li class="l_col">
<section class="card">c</section>
</li>
<li class="l_col">
<section class="card">c</section>
</li>
</ul>
</div>
.l_row{
background-color: yellow;
display: flex;
row-gap: 20px;
/*column-gap: 20px;*/
flex-wrap: wrap;
}
.l_col{
background-color: orange;
/*flex-grow: 1;
flex-basis: 150px;*/
width: calc(100%/3);
/*width: cal(33.33333% -((20px*2)/3));*/
padding: 0 10px;
box-sizing: border-box;
}
.card{
background-color: dodgerblue;
color: black;
box-shadow: inset 0 0 10px red;
}
이 CSS 코드는 l_row 클래스의 부모 요소와 l_col 클래스의 자식 요소를 포함하는 레이아웃을 설정하며, .card 클래스는 카드 요소의 스타일을 정의합니다. 각 클래스의 스타일을 간단히 요약하면 다음과 같습니다:
.l_row 클래스
- display: flex;: 플렉스 컨테이너로 설정하여 자식 요소를 플렉스 레이아웃으로 배치.
- row-gap: 20px;: 행 간의 간격을 20px로 설정.
- flex-wrap: wrap;: 자식 요소가 컨테이너의 너비를 초과할 경우 줄 바꿈을 허용.
.l_col 클래스
- width: calc(100%/3);: 각 컬럼의 너비를 부모 컨테이너의 1/3로 설정 (기본적인 3열 레이아웃).
- padding: 0 10px;: 좌우에 10px의 패딩을 추가.
- box-sizing: border-box;: 패딩과 테두리를 포함한 너비 계산.
.card 클래스
- background-color: dodgerblue;: 배경색을 도저블루로 설정.
- color: black;: 텍스트 색상을 검정색으로 설정.
- box-shadow: inset 0 0 10px red;: 내부에 빨간색 그림자를 적용하여 강조.
종합 요약
- .l_row: 자식 요소를 플렉스 레이아웃으로 배치하고, 행 간의 간격을 설정하며, 내용이 넘치면 줄 바꿈.
- .l_col: 3열 레이아웃을 위한 컬럼 너비 설정, 좌우 패딩 추가, 배경색 설정.
- .card: 카드의 배경색, 텍스트 색상, 내부 그림자 설정.
- 항상 아랫쪽에 배치되는 버튼 만들기
- 반응형웹 만들기