[CSS] 내비게이션 바에 검색창 추가하기

소요 시간: 5분 조회수: 70

반응형 웹디자인을 적용하여 상단 네비게이션 바에 브랜드 이름과 검색창을 추가하는 방법을 설명하겠습니다. CSS 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃이 유연하게 변경되도록 합니다.

네비게이션 바 템플릿 수정

네비게이션 바에 브랜드 이름과 검색 폼을 추가합니다.

base_generic.html

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" type="text/css" href="/static/css/base.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="navbar">
        <div class="navbar-left">
            <a href="/home/" class="brand">My Blog</a>
            <a href="/home/">Home</a>
            <a href="/about/">About</a>
            <a href="/contact/">Contact</a>
        </div>

        <!-- Search Form -->
        <div class="navbar-right">
            <form method="get" action="." class="navbar-form">
                <input type="text" name="query" placeholder="Search...">
                <button type="submit">Search</button>
            </form>
        </div>
    </div>

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

내비게이션 바(nav 태그)에 검색창을 추가했습니다. 그리고 이 검색창 컨테이너에는 navbar-right라는 클래스를 추가했습니다. 이 이름이 붙여진 이유는 검색창을 내비게이션 바 오른쪽으로 정렬하기 목적이기 때문입니다.

.navbar: 네비게이션 바를 나타내는 <div>입니다. .navbar-left: 네비게이션 바의 왼쪽 부분을 나타내며, 브랜드 이름과 메뉴 링크들이 있습니다. <a> 태그: 각각의 링크를 나타내며, class="brand"는 브랜드 이름을 스타일링하기 위한 클래스입니다.

.navbar-right: 네비게이션 바의 오른쪽 부분을 나타내며, 검색 폼이 있습니다. <form> 태그: 검색 폼을 나타내며, method="get"은 GET 요청을 사용하고, action="{% url 'search' %}"은 검색 결과 페이지로 보냅니다. <input> 태그: 텍스트 입력 필드를 나타내며, placeholder="Search..."는 입력 필드에 표시될 안내 텍스트입니다. <button> 태그: 검색 버튼을 나타냅니다.

.content: 본문 콘텐츠를 나타내는 <div>입니다.


2. CSS 스타일링

반응형 웹디자인을 위해 CSS 미디어 쿼리를 사용하여 스타일을 정의합니다.

styles.css:

/* General styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap; /* Flex items will wrap onto multiple lines */
}

.navbar-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.navbar a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.brand {
    font-weight: bold;
    font-size: 20px;
    padding-right: 20px;
}

.navbar-right {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.navbar-form {
    display: flex;
}

.navbar-form input[type="text"] {
    padding: 6px;
    font-size: 17px;
    border: none;
}

.navbar-form button {
    padding: 6px 10px;
    margin-left: 4px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.navbar-form button:hover {
    background: #ccc;
}

/* Responsive styling */
@media screen and (max-width: 600px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-left, .navbar-right {
        flex: none;
        width: 100%;
    }

    .navbar a, .navbar-form {
        width: 100%;
        text-align: left;
    }

    .navbar-form {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
    }

    .navbar-form input[type="text"] {
        flex: 1;
        margin-right: 10px;
    }

    .navbar-form button {
        flex: none;
    }
}

기본 스타일 설정부터 알아보겠습니다.

body: 폰트를 Arial로 설정하고, 여백(margin)과 패딩(padding)을 0으로 설정하여 기본 여백을 없앱니다.

.navbar: 네비게이션 바의 배경색을 #333으로 설정하고, 오버플로우를 숨깁니다.display: flex;로 플렉스박스를 사용하여 자식 요소들을 수평으로 정렬합니다. justify-content: space-between;으로 자식 요소들을 양쪽 끝으로 배치하고, align-items: center;로 수직 가운데 정렬을 합니다. padding: 10px;으로 내부 여백을 설정하고, flex-wrap: wrap;으로 플렉스 아이템이 여러 줄로 랩핑될 수 있도록 설정합니다.

네비게이션 바 좌측 스타일에 대해 알아보겠습니다. .navbar-left: 좌측 섹션을 수평으로 정렬하고, 자식 요소들이 수직 가운데 정렬되도록 합니다. .navbar a: 링크 텍스트의 색상을 #f2f2f2로 설정하고, 가운데 정렬하며, 패딩을 설정하여 클릭 가능한 영역을 넓힙니다. 또한, 텍스트 데코레이션을 제거하여 밑줄이 표시되지 않도록 합니다. .navbar a:hover: 링크에 마우스를 올렸을 때 배경색을 #ddd로 변경하고, 텍스트 색상을 검정으로 변경합니다. .brand: 브랜드 이름의 폰트를 굵게 설정하고, 폰트 크기를 20px로 설정하며, 오른쪽 패딩을 20px로 설정하여 간격을 둡니다.

네비게이션 바 우측 설정에 대해 알아보겠습니다. .navbar-right: 우측 섹션을 수평으로 정렬하고, 자식 요소들이 수직 가운데 정렬되도록 합니다. .navbar-form: 검색 폼을 수평으로 정렬합니다. .navbar-form input[type="text"]: 텍스트 입력 필드의 패딩과 폰트 크기를 설정하고, 테두리를 제거합니다. .navbar-form button: 버튼의 패딩과 배경색을 설정하고, 폰트 크기를 설정하며, 테두리를 제거하고, 커서를 포인터로 변경합니다. .navbar-form button:hover: 버튼에 마우스를 올렸을 때 배경색을 #ccc로 변경합니다.

반응형 스타일 설정에 대해 알아보겠습니다. @media screen and (max-width: 600px): 화면 너비가 600px 이하일 때 적용될 스타일을 정의합니다. .navbar: 플렉스 방향을 컬럼으로 변경하여 네비게이션 바를 수직으로 정렬하고, 자식 요소들을 왼쪽으로 정렬합니다. .navbar-left, .navbar-right: 플렉스 속성을 제거하고, 너비를 100%로 설정하여 전체 너비를 차지하도록 합니다. .navbar a, .navbar-form: 너비를 100%로 설정하여 링크와 검색 폼이 전체 너비를 차지하도록 하고, 텍스트를 왼쪽으로 정렬합니다. .navbar-form: 검색 폼을 수평으로 정렬하고, 상하 패딩을 설정합니다. .navbar-form input[type="text"]: 텍스트 입력 필드의 너비를 늘리고, 오른쪽 마진을 설정합니다. .navbar-form button: 버튼의 플렉스 속성을 제거합니다.

이렇게 설정하면, 화면 크기에 따라 네비게이션 바의 레이아웃이 유연하게 변경되며, 작은 화면에서는 브랜드 이름과 검색 폼이 수직으로 배치됩니다.

인기글

CSS 리스트