코딩하는 김딸기

VEAMFLEX 과제 본문

카테고리 없음

VEAMFLEX 과제

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

기본 레이아웃

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

 

 

 

 

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