풀스택 개발자 과정 37일차

너구·2026년 6월 29일

풀스택 성장과정

목록 보기
40/79

Size

width/height

엘리먼트의 넓이(width)와 높이(height)를 결정한다.

width 속성

다음은 넓이 관련된 속성들이다.

width 예제

width가 auto일 때와 지정한 경우를 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>width</h1>

    <style>
        .item {
            /* 경계선: 엘리먼트의 크기를 눈으로 확인 가능 */
            border: 1px solid;
        }

        .w-auto {
            /* 기본 값 */
            width: auto;
        }

        .w-24 {
            /* block일 때 옆에 공간이 남아도 엘리먼트가 전체 공간을 차지한다 */
            width: 6rem;
        }
    </style>

    <h3>width: auto</h3>
    <div class="item w-auto">item</div>
    <div class="item w-auto">item</div>
    <div class="item w-auto">item</div>

    <h3>width: 6rem</h3>
    <div class="item w-24">item</div>
    <div class="item w-24">item</div>
    <div class="item w-24">item</div>

</body>
</html>

min-width 예제

min-width를 활용해 엘리먼트의 최소 넓이를 정하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>min-width</h1>

    <style>
        .item {
            border: 1px solid;
        }

        .min-w-auto {
            /* 기본 값 (자동 설정) */
            min-width: auto;
        }

        .min-w-lg {
            /* 이 크기 이하로는 줄어들지 않습니다 */
            min-width: 32rem;
        }
    </style>

    <h2>min-width: auto</h2>
    <div class="item min-w-auto">
        Lorem ipsum, dolor sit amet consectetur 
        adipisicing elit. Minus saepe sit delectus 
        mollitia beatae tempora explicabo, sapiente 
        quaerat sint animi quam fugiat exercitationem
        corrupti natus quidem magnam dolorum provident
        possimus.
    </div>

    <h3>min-width: 32rem</h3>
    <div class="item min-w-lg">
        Lorem ipsum dolor sit, amet consectetur 
        adipisicing elit. Dolorem repellat repudiandae 
        reiciendis est inventore similique accusantium 
        possimus, odio optio consequatur, at cupiditate
        sed alias accusamus obcaecati, voluptas 
        sapiente? Aperiam, quo!
    </div>
    
</body>
</html>

max-width

maxx-width를 활용해 엘리먼트의 최대 넓이를 정하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>max-width</h1>

    <style>
        .item {
            border: 1px solid;
        }

        .max-w-none {
            max-width: none;
        }

        .max-w-lg {
            max-width: 32rem;
        }
    </style>

    <h3>max-width: none</h3>
    <div class="item max-w-none">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit. Pariatur quaerat impedit, 
        vero, quidem et placeat sit quo modi dolorum 
        fugiat quis, ullam eum cum explicabo similique 
        in architecto corporis? Sit.
    </div>
    
    <h3>max-width: 32rem</h3>
    <dib class="item max-w-lg">
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Amet pariatur eos cupiditate 
        voluptas aperiam consectetur quasi earum impedit
        facere perspiciatis veritatis exercitationem 
        ratione magni, est dicta beatae temporibus 
        aliquam maiores.
    </dib>
</body>
</html>

height 속성

다음은 높이 관련된 속성들이다.

height 예제

height가 auto일 때 지정한 경우의 차이를 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>height</h1>

    <style>
        .item {
            border: 1px solid;
        }

        .h-auto {
            /* 기본 값: 컨텐츠에 필요한 만큼의 높이를 가진다 */
            height: auto;
        }

        .h-24 {
            /*  */
            height: 6rem;
        }
    </style>

    <h3>height: auto</h3>
    <div class="item h-auto">item</div>

    <h3>hight: 6rem</h3>
    <div class="item h-24">item</div>
    
</body>
</html>

min-height 예제

min-height를 활용해 엘리먼트의 최소 높이를 지정하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>min-height</h1>
    
    <style>
        .item{
            border:1px solid;
        }
        .min-h-24{
            min-height: 6rem;
        }
    </style>
    
    <h3>min-height: 6rem</h3>
    <div class ="item min-h-24">item</div>

    <h3>min-height : 6rem</h3>
    <div class ="item min-h-24">
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Aut quo fugiat blanditiis! 
        Ipsam molestias ducimus cumque eum vel tempora 
        quasi qui sit expedita vero. Eum nam consequuntur 
        aliquam exercitationem. Voluptates.


        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Sequi modi vitae perferendis 
        sed, expedita temporibus cumque dolorum asperiores
        voluptatibus blanditiis eos illum maiores vel 
        nesciunt dolorem atque rerum. Iure, voluptas?
    </div>
</body>
</html>

max-height 예제

max-height를 활용해 엘리먼트의 최대 높이를 지정하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>max-hegith</h1>

    <style>
        .item {
            border: 1px solid;
        }

        .max-h-none {
            max-height: none;
        }

        .max-h-24 {
            max-height: 6rem;
        }
    </style>

    <h3>max-height: none</h3>
    <div class="item max-h-none">
        Lorem ipsum dolor, sit amet consectetur 
        adipisicing elit. Explicabo, eligendi? 
        Dicta optio consectetur illo nulla natus 
        totam, vero ad accusantium provident ratione 
        quos ipsum modi veritatis necessitatibus unde 
        aliquid asperiores!
    </div>

    <h3>max-height: 6rem</h3>
    <div class="item max-h-24">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit. Assumenda pariatur dolorum 
        eaque incidunt voluptatum, eum recusandae harum 
        animi suscipit saepe eius quam nostrum. Facilis 
        quisquam accusamus quia, beatae quod repudiandae.

        Lorem ipsum dolor sit, amet consectetur 
        adipisicing elit. Similique reiciendis 
        consequuntur delectus voluptate accusamus 
        deserunt enim sequi animi repellat consequatur. 
        Quos amet doloribus architecto corrupti aspernatur 
        blanditiis error odio maxime!
    </div>
    
</body>
</html>

엘리먼트 구조

엘리먼트는 크게 4개의 층으로 구분된다.

border

엘리먼트에 경계선을 추가하는 속성이다.
[두께스타일(필수값) 색상] 순서로 작성한다.
두께의 기본값은 약 3px이며 색상은 폰트의 색상을 따라간다.

border 참고표

세부 속성을 활용해 더 세부적으로 border를 다룰 수 있다.

border 예제(1)

앞의 표를 참고해 border 스타일을 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>border</h1>

    <style>
        .item {
            /* 배경색 (회색) */
            background-color: #ddd;
            /* 엘리먼트 내부의 공간 */
            padding: 0.5rem;
        }

        .border-t {
            /* 선의 두께 / 스타일 / 색상 */
            /* solid(실선) 외에도 dashed(파선) dotted(점선) */
            border-top: 4px solid #000;
        }

        .border-b {
            border-bottom: 4px solid #000;
        }

        .border-l {
            border-left: 4px solid #000;
        }

        .border-r {
            border-right: 4px solid #000;
        }

        /* 전체 적용 */
        .border {
            border: 4px solid #000;
        }
    </style>

    <h3>border top</h3>
    <div class="item border-t">item</div>

    <h3>border bottom</h3>
    <div class="item border-b">item</div>

    <h3>border left</h3>
    <div class="item border-l">item</div>

    <h3>border right</h3>
    <div class="item border-r">item</div>

    <h3>border all-side</h3>
    <div class="item border">item</div>
    
</body>
</html>

border 예제(2)

다음 그림을 참고해 각각의 보더를 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>border2</h1>

    <style>
        .item {
            background-color: #ddd;
            padding: 0.5rem;
            width: 100px;
            height: 100px;
        }

        .border-x {
            border-top: 4px solid #000;
            border-bottom: 4px solid #000;
        }

        .border-y {
            border-left: 4px solid #000;
            border-right: 4px solid #000;
        }

       .no-rooftop {
            border-left: 4px solid #000;
            border-right: 4px solid #000;
            border-bottom: 4px solid #000;
        }
    </style>

    <h1>border-y</h1>
    <div class="item border-x">item</div>

    <h1>border-x</h1>
    <div class="item border-y">item</div>

    <h1>no rooftop</h1>
    <div class="item no-rooftop">item</div>
    
</body>
</html>

Padding

다음은 패딩의 세부 속성이다.

padding 예제

앞의 표를 참고해 종류별로 패딩을 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>padding</h1>

    <style>
        .item {
            background-color: #ddd;
        }

        .pt-4 {
            padding-top: 1rem;
        }

        .pb-4 {
            padding-bottom: 1rem;
        }

        .pl-4 {
            padding-left: 1rem;
        }

        .pr-4 {
            padding-right: 1rem;
        }

        .p-4 {
            padding: 1rem;
        }
    </style>

    <h3>padding: 0</h3>
    <div class="time">item</div>

    <h3>pading-top: 1rem</h3>
    <div class="item pt-4">item</div>

    <h3>padding-bottom: 1rem</h3>
    <div class="item pd-4">item</div>

    <h3>padding-left: 1rem</h3>
    <div class="item pl-4">item</div>

    <h3>padding-right: 1rem</h3>
    <div class="item pr-4">item</div>

    <h3>padding all-side</h3>
    <div class="item p-4">item</div>
    
</body>
</html>

margin

다음은 마진의 세부 속성이다.

margin 예제

앞의 표를 참고해 마진을 적용하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>margin</h1>
    <!-- 엘리먼트 외부의 공간 -->
    <!-- 목적: 엘리먼트 사이에 공간 확보 -->

    <style>
        .item {
            background-color: #ddd;
            padding: 0.5rem;
        }

        .mt-4 {
            margin-top: 1rem;
        }

        .mb-4 {
            margin-bottom: 1rem;
        }

        .ml-4 {
            margin-left: 1rem;
        }

        .mr-4 {
            margin-right: 1rem;
        }

        .m-4 {
            /* 
            margin y(top, bottom)은 겹친다 
            margin collapse 현상이라고도 부른다
            */
            margin: 1rem;
        }
    </style>

    <h3>margin:0</h3>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>

    <h3>margin-top: 1rem</h3>
    <div class="item mt-4">item</div>
    <div class="item mt-4">item</div>
    <div class="item mt-4">item</div>

    <h3>margin-left: 1rem</h3>
    <div class="item ml-4">item</div>
    <div class="item ml-4">item</div>
    <div class="item ml-4">item</div>
    
    <h3>margin-right: 1rem</h3>
    <div class="item mr-4">item</div>
    <div class="item mr-4">item</div>
    <div class="item mr-4">item</div>

    <h3>margin all side: 1rem</h3>
    <div class="item m-4">item</div>
    <div class="item m-4">item</div>
    <div class="item m-4">item</div>
    
</body>
</html>

margin with auto

디스플레이 속성이 block인 엘리먼트에서 margin left/right를 auto로 설정하면 엘리먼트를 중앙에 위치시킬 수 있다.

margin with auto 예제

margin을 활용해 엘리먼트를 가운데 위치시켜라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>아이템 가운데 위치시키기</h1>

    <style>
        .item {
            background-color: #ddd;
            padding: 0.5rem;
            width: 100px;
            height: 100px;
            /* 가운데 위치시키기 */
            display: block;
            /* 양쪽이 같은 크기의 마진을 가진다 */
            margin-left: auto;
            margin-right: auto;
        }
    </style>

    <div class="item"></div>
    
</body>
</html>

background-color

엘리먼트의 배경색을 결정하는 속성이다.

background-color 예제

엘리먼트에 배경색을 적용하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>background-color</h1>

    <style>
        .item {
            padding: 0.5rem;
        }

        .bg-red {
            background-color: red;
        }

        .bg-green {
            background-color: green;
        }

        .bg-blue {
            background-color: blue;
        }
    </style>

    <h3>background-color: red</h3>
    <div class="item bg-red">item</div>

    <h3>background-color: green</h3>
    <div class="item bg-green">item</div>
    
    <h3>background-color: blue</h3>
    <div class="item bg-blue">item</div>

    
</body>
</html>

box-sizing

border, padding을 주어진 크기 내부에 적용할지 말지 결정하는 속성이다.

box-sizing 예제

앞에 표를 참고해 속성값을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>box-sizing</h1>

    <style>
        .item {
            border: 1px solid;
            /* 사이즈는 똑같이 100x100으로 지정 */
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 4px solid;
        }

        .box-content {
            /* 주어진 크기(width, height) 외부에 패딩/보더를 적용한다 */
            /* 결과: 128 x 128 (패딩 20px + 보더 8px) */
            box-sizing: content-box;
        }

        .box-border {
            box-sizing: border-box;
            /* 주어진 크기 내부에 패딩/보더를 적용한다 */
            /* 결과: 100 x 100 */
            /* 크기를 지정하는 경우 더 선호된다 */
        }
    </style>

    <h3>box-sizing: content-box</h3>
    <div class="item box-content">
        100 x 100
    </div>

    <h3>box-sizing: border-box</h3>
    <div class="item box-border">
        100 x 100
    </div>
    
</body>
</html>

overflow

엘리먼트 내부의 내용물이 공간이 부족해 넘쳤을 때(overflow) 어떻게 처리할지 결정하는 속성이다.

overflow 예제

앞에 표를 참고해 각 속성값을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>Overflow</h1>

    <style>
        .container {
            border: 1px solid;
            height: 100px;
        }

        .content {
            background-color: #ddd;
            /* 컨테이너보다 20px 더 길다 */
            height: 120px;
        }

        .overflow-visible {
            /* 넘치는 부분을 그대로 둔다(기본값) */
            overflow: visible;
        }

        .overflow-hidden {
            /* 넘치는 부분을 숨긴다 */
            overflow: hidden;
        }

        .overflow-auto {
            /* 컨텐츠가 넘치면 스크롤을 생성 */
            overflow: auto;
        }

        .overflow-scroll {
            /* 컨텐츠가 넘치든 아니든 스크롤을 생성 */
            overflow: scroll;
        }
    </style>

    <h3>overflow: hidden</h3>
    <div class="container overflow-hidden">
        <div class="content"></div>
    </div>

    <h3>overflow: auto</h3>
    <div class="container overflow-auto">
        <div class="content"></div>
    </div>

    <h3>overflow: scroll</h3>
    <div class="container overflow-scroll">
        <div class="content"></div>
    </div>

    <h3>overflow: visible</h3>
    <div class="container overflow-visible">
        <div class="content"></div>
    </div>
    
</body>
</html>

flex

flex 개념

레이아웃용 속성으로서 아이템들을 컨테이너로 관리한다.
flex container와 flex item으로 구성된다.

flex 예제

기본적인 flex 컨테이너와 아이템을 구현하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>flex</h1>

    <style>
        .container {
            border: 1px solid;
            /* flex 컨테이너를 만든다 */
            display: flex;
            /* item 사이 공간 */
            gap: 0.5rem
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }
    </style>

    <div class="container">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>
    
</body>
</html>

Flex Container 속성

flex direction

아이템의 진열 방향을 결정한다.

flex direction 예제

row, column 속성을 활용해 컨테이너를 구성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>flex direction</h1>
    <!-- 아이템의 진열 방향 -->

    <style>
        .container {
            border: 1px solid;
            display: flex;
            gap: 0.5rem;
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }

        .flex-row {
            /* 아이템을 가로로 배치 */
            flex-direction: row;
        }

        .flex-col {
            /* 아이템을 세로로 배치 */
            flex-direction: column;
        }
    </style>

    <h3>flex-direction: row</h3>
    <div class="container flex-row">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

    <h3>flex-direction: column</h3>
    <div class="container flex-col">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

</body>
</html>

justify-content

아이템의 배치 방법을 결정한다.

justify-content(row) 예제

앞의 표를 참고해 flex direction:row 일 때 jusify-content의 속성값들을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>justify content (row)</h1>
    <!-- 아이템의 배치 방법 -->

    <style>
        .container {
            border: 1px solid;
            display: flex;
            gap: 0.5rem;
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }

        .justify-start {
            /* 기본값 */
            justify-content: flex-start;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .justify-end {
            justify-content: flex-end;
        }
    </style>

        <h3>justify-content: flex start(defalult)</h3>
    <div class="container justify-start">
        <class class="item">item1</class>
        <class class="item">item2</class>
        <class class="item">item3</class>
    </div>

    <h3>justify-content: center</h3>
    <div class="container justify-center">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

    <h3>justify-content: space betwwen</h3>
    <div class="container justify-between">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

    <h3>justify-content: flex end</h3>
    <div class="container justify-end">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

    
</body>
</html>

justify-content(col)

앞의 표를 참고해 flex direction: col 일때 justify-content의 속성값들을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>justify content</h1>

    <style>
        .container {
            border: 1px solid;
            display: flex;
            /* 컬럼 방향 */
            flex-direction: column;
            /* 눈으로 차이를 확인하기 위해 높이를 설정 */
            height: 200px;
            gap: 0.5rem;
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }

        .justify-start {
            /* 기본 값 */
            justify-content: flex-start;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .justify-end {
            justify-content: flex-end;
        }
    </style>

    <h3>justify-content: flex-start (default)</h3>
    <dis class="container justify-start">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </dis>

    <h3>justify-content: center</h3>
    <dis class="container justify-center">
        <dis class="item">item1</dis>
        <dis class="item">item2</dis>
        <dis class="item">item3</dis>
    </dis>

    <h3>justify-content: space between</h3>
    <dis class="container justify-between">
        <dis class="item">item1</dis>
        <dis class="item">item2</dis>
        <dis class="item">item3</dis>
    </dis>

    <h3>justify-content: flex-end</h3>
    <dis class="container justify-end">
        <dis class="item">item1</dis>
        <dis class="item">item2</dis>
        <dis class="item">item3</dis>
    </dis>
    
</body>
</html>

align-items

아이템들의 행 또는 열의 위치를 결정한다.

align-items(row)

앞의 표를 참고해 각 속성값들을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>align items(row)</h1>
    <!-- 행의 위치 -->

    <style>
        .container {
            border: 1px solid;
            height: 200px;
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }

        .items-stretch {
            /* 기본값 */
            /* 컨테이너를 채울 때까지 늘어납니다 */
            align-items: stretch;
        }

        .items-start {
            align-items: flex-start;
        }

        .items-center {
            align-items: center;
        }

        .items-end {
            align-items: flex-end;
        }
    </style>

    <h3>aliegn-items: stretch (default)</h3>
    <div class="container items-stretch">
        <div class="item">itme1</div>
        <div class="item">itme2</div>
        <div class="item">itme3</div>
    </div>

    <h3>aligh-items: flex start</h3>
    <div class="container items-start">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

    <h3>align-items: center</h3>
    <div class="container items-center">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

    <h3>aligh-items: flex end</h3>
    <div class="container items-end">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    
</body>
</html>

align-items(col)

앞에 표를 참고해 각 속성값들을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>align items (col)</h1>

    <style>
        .container {
            border: 1px solid;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .item {
            background-color: #000;
            color: #fff;
            padding: 0.5rem;
        }

        .items-stretch {
            /* 기본값 */
            /* 컨테이너를 채울 때까지 늘어난다 */
            align-items: stretch;
        }

        .items-start {
            align-items: flex-start;
        }

        .items-center {
            align-items: center;
        }

        .items-end {
            align-items: flex-end;
        }
    </style>

    <h3>align-items: stretch (default)</h3>
    <div class="container items-stretch">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

    <h3>align-items: flex</h3>
    <div class="container items-start">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

    <h3>align-items: center</h3>
    <div class="container items-center">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>
    
    <h3>align-items: end</h3>
    <div class="container items-end">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>
        
</body>
</html>

flex wrap

컨테이너의 공간이 부족할 때 아이템을 감쌀 것인지 여부를 결정한다.

flex warp 예제

앞의 표를 참고해 각 속성값들을 비교하는 코드를 작성하라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>flex wrap</h1>

    <style>
        .container {
            border: 1px solid;
            display: flex;
            gap: 0.5rem;
        }

        .item {
            width: 200px;
            padding: 0.5rem;
            background-color: #000;
            color: #fff;
        }

        .flex-nowrap {
            /* 아이템을 감싸지 않는다 */
            flex-wrap: nowrap;
        }

        .flex-wrap {
            /* 아이템을 감싼다 */
            flex-wrap: wrap;
        }
    </style>

    <h3>flex-wrap: nowarp (default)</h3>
    <div class="container flex-nowarp">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

    <h3>flex-wrap: wrap</h3>
    <div class="container flex-wrap">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>
    
</body>
</html>

Quiz

flex 컨테이너 속성을 활용해 다음 두 가지 모양을 만들어라.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <style>
        .container {
            border: 1px solid;
            height: 100px;
            display: flex;
        }
        
        .item {
            background-color: black;
            color: white;
            padding: 10px;
        }

        .box1 {
            justify-content: space-between;
            align-items: center;
        }
        
        .box2 {
            justify-content: center;
            align-items: center;
        }
        </style>

    <h1>1</h1>
    <div class="container box1">
        <div class="item">item</div>
        <div class="item">item</div>
    </div>

    <h1>2</h1>
    <div class="container box2">
        <div class="item">item</div>
    </div>
    
</body>
</html>

마무리

오늘도 css를 배웠다. 재미있었다.
조금은 복잡한 거 같은데 java에 비하면 훨씬 쉬워서 배우기 수월하다.

profile
너구
이전 포스트

풀스택 개발자 과정 36일차 +@

다음 포스트

풀스택 개발자 과정 38일차

0개의 댓글