[CSS] 레이아웃 구성 연습

여기서는 웹 페이지의 기본적인 레이아웃을 구성하는 방법을 단계별로 안내합니다. `index.html` 파일을 직접 만들어가며 각 섹션(Header, Navigation, Content, Footer)을 완성하게 됩니다.

Posted Mar 22, 2022

16 min read

[CSS] 레이아웃 구성 연습

CSS Layout 구성 연습

여기서는 웹 페이지의 기본적인 레이아웃을 구성하는 방법을 단계별로 안내합니다. index.html 파일을 직접 만들어가며 각 섹션(Header, Navigation, Content, Footer)을 완성하게 됩니다.

#01. 기본 레이아웃 구조 잡기

먼저 웹 페이지의 전체적인 뼈대를 구성합니다. header, nav, section, footer 시맨틱 태그를 사용하여 각 영역을 구분하고, CSS로 각 영역을 시각적으로 확인할 수 있도록 임시 스타일을 적용합니다.

사용되는 CSS 속성

속성	설명
`font-family`	글꼴을 지정합니다.
`margin`	요소의 바깥쪽 여백을 설정합니다.
`padding`	요소의 안쪽 여백을 설정합니다.
`height`	요소의 높이를 설정합니다.
`background-color`	요소의 배경색을 설정합니다.

CSS 기법 설명

이 단계에서는 각 레이아웃 영역(header, nav, section, footer)에 height와 background-color를 적용하여 눈으로 쉽게 구분할 수 있도록 합니다. 또한, body와 모든 요소(*)에 기본 margin, padding, font-family를 설정하여 브라우저의 기본 스타일을 초기화하고 일관된 디자인을 유지합니다.

실습: `index.html`

아래 코드를 index.html 파일로 저장하고 웹 브라우저에서 열어보세요. 각 영역이 색상으로 구분되어 표시됩니다.

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>

    <!-- 구글 웹 폰트를 통한 NotoSansKr 글꼴 참조 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500&display=swap"
        rel="stylesheet">

    <style>
        * {
            font-family: 'Noto Sans KR';
        }

        body {
            margin: 0;
            padding: 0;
        }

        .header {
            /* 영역 확인을 위한 임시 코드 */
            height: 100px;
            background-color: #1abc9c80;
        }

        .navbar {
            /* 영역 확인을 위한 임시 코드 */
            height: 100px;
            background-color: #1a4dbc80;
        }

        .content {
            /* 영역 확인을 위한 임시 코드 */
            height: 100px;
            background-color: #ca1a7e80;
        }

        .footer {
            /* 영역 확인을 위한 임시 코드 */
            height: 100px;
            background-color: #e8e81a80;
        }
    </style>
</head>

<body>
    <!-- 상단 헤더 영역 -->
    <header class="header">

    </header>

    <!-- 네비게이션 영역 -->
    <nav class="navbar">

    </nav>

    <!-- 중앙 영역 -->
    <section class="content">

    </section>

    <!-- 푸터 영역 -->
    <footer class="footer">

    </footer>
</body>

</html>

#02. 헤더와 푸터 콘텐츠 채우기

이제 각 영역에 실제 콘텐츠를 추가하고 스타일을 적용합니다. 헤더에는 웹사이트 제목을 표시하는 ‘점보트론(Jumbotron)’을 추가하고, 푸터에는 간단한 텍스트를 넣습니다.

사용되는 CSS 속성

속성	설명
`padding`	안쪽 여백을 설정합니다.
`text-align`	텍스트의 정렬 방향을 설정합니다.
`background`	배경을 설정합니다.
`color`	글자색을 설정합니다.
`font-size`	글자 크기를 설정합니다.

CSS 기법 설명

헤더 영역에는 ‘점보트론’이라는 큰 상자를 만들어 웹사이트의 제목과 부제목을 강조합니다. padding을 사용하여 넉넉한 공간을 확보하고, text-align: center로 텍스트를 가운데 정렬하여 시각적인 집중도를 높입니다. 푸터도 비슷한 방식으로 스타일을 적용하여 일관성을 유지합니다.

실습: `index.html` 수정

<body> 태그의 <header>와 <footer>를 아래 내용으로 교체합니다.
<style> 태그의 .header와 .footer 스타일을 수정합니다.

  
<!-- 상단 헤더 영역 -->
<header class="header">
    <div class="jumbotron">
        <h1>My Website</h1>
        <p>A <b>responsive</b> website created by me.</p>
    </div>
</header>

...

<!-- 푸터 영역 -->
<footer class="footer">
    <h2>Footer</h2>
</footer>

CSS 수정

<style> 블록의 .header와 .footer 클래스 스타일을 아래와 같이 수정합니다. 점보트론 스타일이 추가되고, 기존의 임시 높이와 배경색은 주석 처리합니다.

  
.header {
    /* 영역 확인을 위한 임시 코드 */
    /* height: 100px;
    background-color: #1abc9c80; */

    .jumbotron {
        padding: 80px;
        text-align: center;
        background: #1abc9c;
        color: white;

        h1 {
            font-size: 40px;
        }
    }
}

...

.footer {
    /* 영역 확인을 위한 임시 코드 */
    /* height: 100px;
    background-color: #e8e81a80; */

    padding: 20px;
    text-align: center;
    background: #ddd;
}

상단에 고정되는 네비게이션 바를 만듭니다. 스크롤을 내려도 항상 상단에 위치하도록 position: sticky; 속성을 사용합니다.

사용되는 CSS 속성

속성	설명
`background-color`	배경색을 설정합니다.
`position: sticky`	스크롤 위치에 따라 요소를 고정시킵니다.
`top`	`position`이 적용될 때, 상단에서의 거리를 지정합니다.
`max-width`	요소의 최대 너비를 제한합니다.
`margin: auto`	요소를 수평 중앙에 배치합니다.
`display: flex`	Flexbox 레이아웃을 활성화합니다.
`text-decoration`	텍스트의 장식(밑줄 등)을 제거합니다.
`margin-left: auto`	Flexbox에서 아이템을 오른쪽으로 밀어냅니다.
`:hover`	마우스가 요소 위에 올라갔을 때의 스타일을 지정합니다.

CSS 기법 설명

네비게이션 바는 position: sticky와 top: 0을 사용하여 화면 상단에 고정됩니다. 메뉴 항목들은 display: flex를 통해 가로로 정렬되며, 특정 메뉴(Link3)는 margin-left: auto를 사용하여 오른쪽 끝으로 보냅니다. :hover 가상 클래스를 사용하여 마우스를 올렸을 때 메뉴의 배경색과 글자색이 바뀌는 상호작용을 추가합니다.

실습: `index.html` 수정

<nav> 태그 안에 메뉴 링크들을 추가합니다.

  
<!-- 네비게이션 영역 -->
<nav class="navbar">
    <div>
        <a href="#" class="active">Home</a>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#" class="right">Link3</a>
    </div>
</nav>

CSS 수정

<style> 블록의 .navbar 클래스 스타일을 아래와 같이 수정합니다.

  
.navbar {
    /* 영역 확인을 위한 임시 코드 */
    /* height: 100px;
    background-color: #1a4dbc80; */

    background-color: #333;
    position: sticky;
    top: 0;

    div {
        max-width: 1200px;
        margin: auto;
        display: flex;

        a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;

            &.right {
                margin-left: auto;
            }

            &:hover {
                background-color: #ddd;
                color: black;
            }

            &.active {
                background-color: #666;
                color: white;
            }
        }
    }
}

#04. 2단 레이아웃 콘텐츠 영역 구성하기

중앙 콘텐츠 영역을 사이드바와 메인 콘텐츠로 나누는 2단 레이아웃을 만듭니다. display: flex;를 사용하여 두 개의 컬럼을 배치합니다.

사용되는 CSS 속성

속성	설명
`display: flex`	Flexbox 레이아웃을 활성화합니다.
`flex`	Flex 아이템의 크기 조절 방식을 지정합니다. (증가, 감소, 기본 크기)
`border-left`	왼쪽 테두리를 설정합니다.
`border-right`	오른쪽 테두리를 설정합니다.
`max-width`	요소의 최대 너비를 제한합니다.
`margin: auto`	요소를 수평 중앙에 배치합니다.

CSS 기법 설명

콘텐츠 영역은 display: flex를 사용하여 자식 요소인 .side와 .main을 가로로 배치합니다. .side 영역은 flex: 0 0 360px를 통해 너비가 360px로 고정되고 늘어나거나 줄어들지 않도록 설정합니다. 반면, .main 영역은 flex: 1 1 100%를 통해 남은 공간을 모두 차지하도록 하여 유연한 2단 레이아웃을 만듭니다.

실습: `index.html` 수정

<section class="content"> 태그 안에 .side와 .main 영역을 추가하고 내용을 채웁니다.

  
<!-- 중앙 영역 -->
<section class="content">
    <div class="side">
        <div class="container">
            <h2>About Me</h2>
            <h5>Photo of me:</h5>
            <div class="fakeimg" style="height: 200px">Image</div>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
            <h3>More Text</h3>
            <p>Lorem ipsum dolor sit ame.</p>
            <div class="fakeimg" style="height: 60px">Image</div>
            <br />
            <div class="fakeimg" style="height: 60px">Image</div>
            <br />
            <div class="fakeimg" style="height: 60px">Image</div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Dec 7, 2017</h5>
            <div class="fakeimg" style="height: 200px">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco.</p>
            <br />
            <h2>TITLE HEADING</h2>
            <h5>Title description, Dec 7, 2017</h5>
            <div class="fakeimg" style="height: 200px">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco.</p>
            <br />
        </div>
    </div>
</section>

CSS 수정

<style> 블록의 .content 클래스 스타일을 아래와 같이 수정합니다.

  
.content {
    /* 영역 확인을 위한 임시 코드 */
    /* height: 100px;
    background-color: #ca1a7e80; */

    max-width: 1200px;
    margin: auto;
    background-color: #eee;
    display: flex;

    .side {
        flex: 0 0 360px;
        border-left: 1px solid #d5d5d5;
        border-right: 1px solid #d5d5d5;
    }

    .main {
        flex: 1 1 100%;
        background-color: white;
        border-right: 1px solid #d5d5d5;
    }

    .container {
        padding: 20px;
    }

    .fakeimg {
        background-color: #aaa;
        width: auto;
        padding: 20px;
    }
}

#05. 최종 완성 코드

아래는 모든 단계를 거쳐 완성된 index.html 파일의 전체 코드입니다.

  
<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>

    <!-- 구글 웹 폰트를 통한 NotoSansKr 글꼴 참조 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500&display=swap"
        rel="stylesheet">

    <style>
        * {
            font-family: 'Noto Sans KR';
        }

        body {
            margin: 0;
            padding: 0;
        }

        .header {
            .jumbotron {
                padding: 80px;
                text-align: center;
                background: #1abc9c;
                color: white;

                h1 {
                    font-size: 40px;
                }
            }
        }

        .navbar {
            background-color: #333;
            position: sticky;
            top: 0;

            div {
                max-width: 1200px;
                margin: auto;
                display: flex;

                a {
                    display: block;
                    color: white;
                    text-align: center;
                    padding: 14px 20px;
                    text-decoration: none;

                    &.right {
                        margin-left: auto;
                    }

                    &:hover {
                        background-color: #ddd;
                        color: black;
                    }

                    &.active {
                        background-color: #666;
                        color: white;
                    }
                }
            }
        }

        .content {
            max-width: 1200px;
            margin: auto;
            background-color: #eee;
            display: flex;

            .side {
                flex: 0 0 360px;
                border-left: 1px solid #d5d5d5;
                border-right: 1px solid #d5d5d5;
            }

            .main {
                flex: 1 1 100%;
                background-color: white;
                border-right: 1px solid #d5d5d5;
            }

            .container {
                padding: 20px;
            }

            .fakeimg {
                background-color: #aaa;
                width: auto;
                padding: 20px;
            }
        }

        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
        }
    </style>
</head>

<body>
    <!-- 상단 헤더 영역 -->
    <header class="header">
        <div class="jumbotron">
            <h1>My Website</h1>
            <p>A <b>responsive</b> website created by me.</p>
        </div>
    </header>

    <!-- 네비게이션 영역 -->
    <nav class="navbar">
        <div>
            <a href="#" class="active">Home</a>
            <a href="#">Link1</a>
            <a href="#">Link2</a>
            <a href="#" class="right">Link3</a>
        </div>
    </nav>

    <!-- 중앙 영역 -->
    <section class="content">
        <div class="side">
            <div class="container">
                <h2>About Me</h2>
                <h5>Photo of me:</h5>
                <div class="fakeimg" style="height: 200px">Image</div>
                <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
                <h3>More Text</h3>
                <p>Lorem ipsum dolor sit ame.</p>
                <div class="fakeimg" style="height: 60px">Image</div>
                <br />
                <div class="fakeimg" style="height: 60px">Image</div>
                <br />
                <div class="fakeimg" style="height: 60px">Image</div>
            </div>
        </div>
        <div class="main">
            <div class="container">
                <h2>TITLE HEADING</h2>
                <h5>Title description, Dec 7, 2017</h5>
                <div class="fakeimg" style="height: 200px">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco.</p>
                <br />
                <h2>TITLE HEADING</h2>
                <h5>Title description, Dec 7, 2017</h5>
                <div class="fakeimg" style="height: 200px">Image</div>
                <p>Some text..</p>
                <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco.</p>
                <br />
            </div>
        </div>
    </section>

    <!-- 푸터 영역 -->
    <footer class="footer">
        <h2>Footer</h2>
    </footer>
</body>

</html>

05.Frontend, HTML&CSS

This post is licensed under CC BY 4.0 by the author.

[CSS] 레이아웃 구성 연습

CSS Layout 구성 연습

#01. 기본 레이아웃 구조 잡기

사용되는 CSS 속성

CSS 기법 설명

실습: `index.html`

#02. 헤더와 푸터 콘텐츠 채우기

사용되는 CSS 속성

CSS 기법 설명

실습: `index.html` 수정

#03. 네비게이션 바(Navbar) 만들기

사용되는 CSS 속성

CSS 기법 설명

실습: `index.html` 수정

#04. 2단 레이아웃 콘텐츠 영역 구성하기

사용되는 CSS 속성

CSS 기법 설명

실습: `index.html` 수정

#05. 최종 완성 코드

Trending Tags

CSS Layout 구성 연습

#01. 기본 레이아웃 구조 잡기

사용되는 CSS 속성

CSS 기법 설명

실습: index.html

#02. 헤더와 푸터 콘텐츠 채우기

사용되는 CSS 속성

CSS 기법 설명

실습: index.html 수정

#03. 네비게이션 바(Navbar) 만들기

사용되는 CSS 속성

CSS 기법 설명

실습: index.html 수정

#04. 2단 레이아웃 콘텐츠 영역 구성하기

사용되는 CSS 속성

CSS 기법 설명

실습: index.html 수정

#05. 최종 완성 코드

Trending Tags

실습: `index.html`

실습: `index.html` 수정

실습: `index.html` 수정

실습: `index.html` 수정