생각 작업실 The atelier of thinking

19. <CSS> Flexbox 본문

웹(Web) 이야기

19. <CSS> Flexbox

knowledge-seeker 2024. 2. 25. 17:32

앞서 display, float를 이용한 레이아웃과 그리드 레이아웃에 대해서 알아봤습니다.
이번회차에는 Flexbox를 이용하여 웹페이지 레이아웃을 작성해보겠습니다.

Flexbox는 요소 간의 공간 배분 및 정렬을 효과적으로 다룰 수 있는 강력한 레이아웃 모델을 제공합니다 아이템들 사이에 공간 배분과 정렬 기능 제공합니다.
그리드 레이아웃은 2차원 레이아웃 모델인 것에 반에 Flexbox는 1차원 레이아웃 모델입니다. 아이템들 배치를 행 또는 열로 배치하게 됩니다.

Flexbox 레이아웃은 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다.
Flex Container (플렉스 컨테이너)는 Flexbox 레이아웃이 적용되는 부모 요소를 말합니다. display: flex;로 설정합니다.
Flex Items (플렉스 아이템)은 Flex Container 내부의 자식 요소들을 말합니다. Flex Item은 Flex Container 내에서 배치되고 정렬됩니다.
방향은 flex-direction : column / row 로 결정합니다.

앞서 레이아웃 작성-Float,display 에서 아래의 Holy grail layout을 만들어 봤었습니다.

 

2024.02.21 - [웹(Web) 이야기] - 16. 레이아웃 - float, display

 

16. <CSS> 레이아웃 - float, display

지난 회차에는 레이아웃의 종류 및 구성 요소 등에 대해서 알아봤습니다. 이번 회차에는 직접 레이아웃을 작성해보겠습니다. 레이아웃을 작성할 때 알아두면 좋은 HTML의 시맨틱 태그(Semantic Tag)

thinking-atelier.tistory.com

 

이번 회차에서 flexbox로 위 레이아웃을 만들어 보겠습니다.

 

 

1.HTML 구문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
</head>
<body>
<div class="flexbox">
    <header>
        <h1>Header</h1>
    </header>
    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
    <section class="row">
        <article class="column side">
            <h3> Column 1</h3>
            <p> Content</p>
        </article>
        <article class="column middle">
            <h3> Column 2</h3>
            <p> Main Content </p>
        </article>
        <article class="column side">
            <h3> Column 3</h3>
            <p> Content</p>
        </article>
    </section>

    <footer>
        <p>Footer</p>
    </footer>
</div>
</body>
</html>

 

<div class="flexbox"></div> 로 Flex Container (플렉스 컨테이너)를 만듭니다.
Flex Items (플렉스 아이템)으로 <header>,<nav>,<section>,<footer> 태그들을 사용했습니다.

 

2. CSS 구문

 

(1) 세로방향 설정

우선 아이템들을 세로 방향으로 나열합니다. flex-direction : column 으로 설정합니다.

 

  .flexbox{
            display: flex;
            flex-direction: column;
            border: 2px solid gray;
        }

 

 

(2) 가로방향 설정

<section> 태그를 플렉스 컨테이너로 설정하고 <article> 태그들을 플렉스 아이템으로 가로로 나열하도록 설정하였습니다. flex-direction: row 로 설정합니다.

 

.row{
     display: flex;
     flex-direction: row;
     border: 2px solid skyblue;
     }

 

(3) 나머지 태그들

<header>와 <nav>는 앞서 만들었던 CSS코드를 그대로 다시 적용하였습니다.

 

header{
       background-color: #f1f1f1;
       padding: 20px;
       text-align: center;
        }
 nav {
       overflow: hidden;
       background-color: #333;
      }
 nav a {
         float: left;
         display: block;
         color: #f1f1f1;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
        }
 nav :hover {
            background-color: #ddd;
            color: black;
        }

 

 

<article> 태그들의 너비를 조정합니다.

 .column {
            text-align: center;
            border: 2px solid gray;
        }
 .column.side {
            width: 25%;
        }
 .column.middle {
            width: 50%;
        }

 

<footer> 태그

 

 footer {
            background-color: #ddd;
            text-align: center;
            padding-top: 20px;
            }

 

CSS 레이아웃은 하나의 방법을 적용하여 만들기 보다는 Grid 와 Flexbox , float 등 여러가지 방법을 필요에 따라 혼합하여 사용하는 경우가 더 많습니다.

 

'웹(Web) 이야기' 카테고리의 다른 글

21. <JavaScript> HTML과 연결하기  (0) 2024.02.29
20. 자바스크립트 (JavaScript)  (2) 2024.02.28
18. <CSS> Grid Layout 예제  (1) 2024.02.24
17. <CSS> 그리드 레이아웃 (Grid Layout)  (0) 2024.02.22
16. <CSS> 레이아웃 - float, display  (0) 2024.02.21
'웹(Web) 이야기' Related Articles more