VEAMFLEX 과제

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

코딩하는 김딸기

VEAMFLEX 과제 본문

카테고리 없음

VEAMFLEX 과제

김딸기* 2024. 8. 10. 17:08

기본 레이아웃

<!DOCTYPE html>

<html>

<head>

<title>My Bucket Lists</title>

</head>

<body>

<div class="header-box">/

<p class="descript">Unlimited movies, TV shows, and more.</p>

</div>

</header>

</div>

<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>

</main>

푸터

</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;

}

color: unset;

}

사이드바 스타일 설정 초기화하기

사이드바 스타일 지정

<h2>Genre</h2>

<h3>Action &Adventure</h3>

<li><a href="">Adventure</a></li>

<li><a href="">Action Thrillers</a></li>

<li><a href="">Superhero Movies</a></li>

</ul>

</li>

<h3>Dramas</h3>

<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: 서브 카테고리 항목 사이에 상단 테두리 추가.

컨테이너 메인 컨텐츠 레이아웃

</li>

</li>

</li>

</li>

</li>

</li>

</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: 카드의 배경색, 텍스트 색상, 내부 그림자 설정.

항상 아랫쪽에 배치되는 버튼 만들기
반응형웹 만들기

코딩하는 김딸기

VEAMFLEX 과제 본문

VEAMFLEX 과제

Flexbox로 만드는 사이드바 레이아웃 안정성 높이기

잘못 작성하기 쉬운 마크업

의외로 가능한 마크업

사이드바 스타일 지정

.container-sidebar 클래스

.category h2

.category h2::before

.category-item

.category-item h3

.category-sub

.category-sub li

.category-sub li+li

종합 요약

컨테이너 메인 컨텐츠 레이아웃

.l_row 클래스

.l_col 클래스

.card 클래스

종합 요약

티스토리툴바