4.2 Flexbox를 활용한 레이아웃

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

4.2 Flexbox를 활용한 레이아웃

이번 장에서는 Flexbox를 이용하여 실제 레이아웃을 구성하는 방법을 배워보겠습니다. Flexbox는 웹 페이지의 다양한 레이아웃을 쉽게 구성할 수 있도록 도와주는 CSS 모듈입니다. 이를 통해 콘텐츠의 배치, 정렬, 공간 분배를 효율적으로 관리할 수 있습니다. 특히, 화면 크기가 변할 때도 유연하게 대응할 수 있기 때문에 반응형 웹 디자인에 매우 유용합니다.

Flexbox를 활용한 기본 레이아웃 예제

아래 예제에서는 Flexbox를 활용하여 간단한 상단 내비게이션 바(Navigation Bar)를 만들어 보겠습니다. 이 예제를 통해 Flexbox가 어떻게 레이아웃을 관리하는지 이해할 수 있을 것입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">로고</div>
        <ul class="nav-links">
            <li>홈</li>
            <li>소개</li>
            <li>서비스</li>
            <li>연락처</li>
        </ul>
    </nav>
</body>
</html>

이 HTML 문서에서는 내비게이션 바를 만들었습니다. 각 메뉴 항목은 리스트 항목으로 구성되어 있으며, 로고와 함께 배치됩니다.

CSS 스타일링

이제 위의 HTML에 스타일을 적용할 CSS를 작성해 보겠습니다. 우리는 Flexbox를 사용하여 내비게이션 요소들을 가로로 나열할 것입니다.

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex; /* Flexbox를 사용하여 항목들을 플렉스 컨테이너로 설정 */
    justify-content: space-between; /* 항목들을 양 끝으로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    background-color: #333; /* 배경색 설정 */
    padding: 10px 20px; /* 여백 설정 */
}

.logo {
    color: white; /* 로고 색상 */
    font-size: 24px; /* 로고 글자 크기 */
}

.nav-links {
    list-style: none; /* 리스트 스타일 제거 */
    padding: 0; /* 패딩 제거 */
    margin: 0; /* 마진 제거 */
    display: flex; /* 리스트 항목들을 가로로 나열 */
}

.nav-links li {
    color: white; /* 메뉴 항목 색상 */
    margin-left: 20px; /* 메뉴 간격 설정 */
}

.nav-links li:hover {
    text-decoration: underline; /* 마우스 오버시 밑줄 추가 */
}

위 CSS를 통해 Flexbox 정렬 기능을 설명하겠습니다. display: flex;를 사용하면 해당 요소의 자식 요소들이 플렉스 항목이 되고, 가로 방향으로 나란히 배치됩니다. justify-content: space-between;은 항목 사이에 공간을 분배하여 양 끝에 배치하게 하고, align-items: center;는 세로로 중앙에 위치하게 해줍니다.

실습: 고급 내비게이션 바 만들기

이제 여러 메뉴 항목을 포함한 고급 내비게이션 바를 만들어보겠습니다. 웹사이트의 다양한 페이지 링크를 포함할 수 있는 형태로 구현해보세요.

다음 HTML 코드 추가:

<li>프로그래밍</li>
<li>디자인</li>
<li>블로그</li>

여기서 프로그래밍, 디자인, 블로그 항목을 추가하여 더 많은 링크를 제공하세요.

CSS에서 margin-left 값을 더 크게 조정하여 항목 간 간격을 더욱 넓힐 수 있습니다.

실습 결과

이 실습을 완료하면 다양한 메뉴 항목들이 포함된 반응형 내비게이션 바가 나타납니다. 화면 크기에 따라 항목들이 적절하게 배치되어야 합니다.

자주 발생하는 오류 및 해결 방법

항목들이 한 줄에 보이지 않음: CSS에서 display: flex; 속성이 누락되었는지 확인하세요.
레이아웃이 엉킨다: 여백의 설정을 잘못했을 수 있으니, 각 요소의 여백 속성(margin, padding)을 확인하세요.

이와 같은 간단한 오류는 처음 CSS를 다루는 사람들이 자주 겪는 문제입니다. 최적의 레이아웃을 얻기 위해 여러 번 실험해보는 것이 좋습니다.

이제 Flexbox를 사용하여 레이아웃을 만드는 방법에 대해 알아보았습니다. 다음에는 더욱 복잡한 레이아웃에 도전해볼 것입니다.

4.2 Flexbox를 활용한 레이아웃

4.2 Flexbox를 활용한 레이아웃

Flexbox를 활용한 기본 레이아웃 예제

CSS 스타일링

실습: 고급 내비게이션 바 만들기

실습 결과

자주 발생하는 오류 및 해결 방법

댓글 0