반응형 웹 디자인

1. 기본 구조 설정

먼저, 헤더의 기본 구조를 설정합니다. 우리의 헤더는 로고, 네비게이션 메뉴, 검색 기능을 포함합니다.

.left-btn,
.right-btn {
    margin: 10px;
    padding: 10px;
    background-color: white;
    border: none;
}

.left-btn {
    float: left;
}

.right-btn {
    float: right;
    display: flex;
    align-items: center;
}

이 코드는 헤더의 좌우 요소들을 적절히 배치합니다.

2. 로고 및 아이콘 스타일링

로고와 각종 아이콘의 크기를 조절합니다.

.left-btn > button > img {
    width: 60%;
    height: auto;
}

.right-btn > button > div > img,
.search-icon {
    width: 40%;
    height: auto;
    max-width: 50%;
    max-height: 50%;
}

3. 네비게이션 메뉴 디자인

카테고리 네비게이션을 구현합니다.

.category-nav {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-start;
    padding-left: 2%;
}

.category-nav > button {
    background-color: white;
    border: none;
    margin-right: 1rem;
    margin-left: 0.5%;
}

.category-nav > button > p {
    font-size: 170%;
    display: inline-block;
    margin: 0 auto 1rem;
}

4. 검색 기능 구현

검색 박스와 폼을 스타일링합니다.

.search-box {
    display: flex;
    align-items: center;
}

.search-form {
    display: flex;
    align-items: center;
}

.search-form input {
    flex-grow: 1;
    margin-right: 10px;
}

5. 반응형 디자인 적용

미디어 쿼리를 사용하여 다양한 화면 크기에 대응합니다.

@media (max-width: 960px) {
    .header-container {
        padding: 10px;
    }

    .left-btn img {
        width: 80px;
    }

    .category-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 추가 스타일 */
}

@media (max-width: 768px) {
    .header-bottom {
        justify-content: center;
    }

    /* 추가 스타일 */
}

@media (max-width: 600px) {
    .header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 추가 스타일 */
}

이러한 미디어 쿼리를 통해 화면 크기에 따라 레이아웃을 조정합니다.

마무리

이렇게 구현된 반응형 헤더는 다양한 디바이스에서 일관된 사용자 경험을 제공합니다. 큰 화면에서는 모든 요소가 가로로 배치되고, 작은 화면에서는 세로로 재배치되어 가독성과 사용성을 유지합니다.

반응형 디자인을 구현할 때는 항상 사용자 경험을 최우선으로 고려해야 합니다. 또한, 실제 디바이스에서 테스트를 거쳐 모든 크기에서 제대로 작동하는지 확인하는 것이 중요합니다.

여러분의 프로젝트에 이 방식을 적용해보시고, 필요에 따라 조정해보세요. 웹 개발의 세계는 끊임없이 변화하고 있으므로, 항상 새로운 기술과 방법에 대해 열린 마음을 가지는 것이 중요합니다.

행운을 빕니다!