(3D)Dev Deep Dive/Frontend origin

[HTML+CSS] Copang 반응형 헤더 만들기(검색창/로고/부가메뉴)

728x90

오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다

우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다

0. 코드 준비

[HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편)

HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고

time-map-installer.tistory.com

언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다

1. 헤더 나누기

총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다

#header {
    border: 1px solid red;
    height: 20%;
    display: flex;
}

#header_left {
    border: 1px solid green;
    width: 30%;
    height: 100%;
}

#header_center {
    border: 1px solid green;
    width: 30%;
    height: 100%;
    margin-left: 5%;
}

#header_right {
    border: 1px solid green;
    width: 30%;
    height: 100%;
    margin-left: 5%;
}

<div id="header">
        <div id="header_left"></div>
        <div id="header_center"></div>
        <div id="header_right"></div>
    </div>

이제 나뉘어져버린 이 헤더의 세 부분에 검색창, 로고, 추가메뉴 등을 넣을 예정이다

검색창과 메뉴는 content부분에 가까이 있었으면 좋겠다 싶었다

그래서 이미지를 넣고 옆에 범위를 다음과 같이 지정해주었다

지금까지 진행된 코드 확인하기

main.html

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="header">
        <div id="header_left">
            
        </div>
        <div id="header_center">
            <img src="images/copang.png" width="100%" height="100%">
        </div>
        <div id="header_right"></div>
    </div>
    <div id="content">input about content</div>
    <div id="footer">input about footer</div>
</body>

</html>

style.css

#header {
    border: 1px solid red;
    height: 20%;
    display: flex;
}

#header_left {
    border: 1px solid green;
    width: 30%;
    height: 20%;
    margin-top: 11.5%;
}

#header_center {
    border: 1px solid green;
    width: 30%;
    height: 80%;
    margin-left: 5%;
}

#header_right {
    border: 1px solid green;
    width: 30%;
    height: 20%;
    margin-top: 11.5%;
    margin-left: 5%;
}



#content {
    border: 1px solid green;
    height: 50%;
}

#footer {
    border: 1px solid blue;
    height: 30%;
}

2. 그럴싸한 검색창 넣기

그럴싸 하다

코드는 우측 메뉴의 완성과 함께 공개하도록 하겠다

3. 그럴싸한 메뉴 넣기

메뉴명은 로그인, 회원가입, 마이페이지, 장바구니 정도가 괜찮아 보인다

완성

직접 만든 반응형 헤더 장점

직접 만든 반응형 헤더 단점

가로비율을 모니터의 비율보다 더 늘려버리면 헤더의 메뉴가 내려오는 단점이 있다

※1920*1080해상도의 16:9 비율 모니터 기준입니다

완성된 코드 확인하기