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 비율 모니터 기준입니다

 

완성된 코드 확인하기

main.html

<html>

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

<body>
    <div id="header">
        <div id="header_left">
            <div class="search">
                <input type="text" placeholder="검색어 입력">
                <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
            </div>
        </div>
        <div id="header_center">
            <img src="images/copang.png" width="100%" height="100%">
        </div>
        <div id="header_right">
            <a href="#">로그인</a> | 
            <a href="#">회원가입</a> |
            <a href="#">마이페이지</a> |
            <a href="#">장바구니</a>
        </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 {
    width: 30%;
    height: 20%;
    margin-top: 8%;
}

#header_left .search {
    position: relative;
    width: 100%;
}

#header_left input {
    width: 100%;
    height: 100%;
    border: 1px solid #bbb;
    border-radius: 8px;
    /* 모서리 둥글기 정도 */
    padding: 1% 3%;
    font-size: 1vw;
}

#header_left img {
    position: absolute;
    width: 17px;
    top: 10px;
    right: 12px;
    margin: 0;
}
/* 검색창 끝 */

/* 로고 */
#header_center {
    width: 30%;
    height: 80%;
    margin-left: 5%;
}
/* 로고 끝 */

/* 추가 메뉴 */
#header_right {
    width: 30%;
    height: 20%;
    margin-top: 8%;
    margin-left: 5%;
    text-align: center;
}

#header_right a {
    text-decoration: none;
    color: black;
}

#header_right a:hover {
    text-decoration: none;
    color: blue;
}
/* 추가 메뉴 끝 */

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

#footer {
    border: 1px solid blue;
    height: 30%;
}
728x90
저작자표시 비영리 변경금지

'(3D)Dev Deep Dive > Frontend origin' 카테고리의 다른 글

[시각화] D3를 이용하여 간단한 노드관계 만들어보기  (0) 2023.07.10
[문득 떠오른 건데] 밥먹고 졸릴때 리팩토링 요소를 탐색하면 잠이 깰까? - 2편  (0) 2023.05.02
[문득 떠오른 건데] 밥먹고 졸릴때 동적 컴포넌트를 만들면 잠이 깰까? - 1편  (2) 2023.04.22
[HTML+CSS] 텍스트 슬라이드 기능(가로/세로)  (0) 2022.11.21
[HTML] 회원가입 양식  (0) 2022.11.21

티스토리툴바