001 header

코딩을 들어가기 전에 body 태그가 아닌 가장 큰 container를 만드는 것이 좋습니다. 먼저 section 태그를 이용하여 가장 큰 container를 만들어 보겠습니다. 따라서 container라는 id를 가진 section을 생성한 뒤 header 태그를 추가하였습니다.

코드에서 강조된 부분이 새롭게 추가되었다고 보시면 됩니다. 앞으로도 이렇게 표시하도록 하겠습니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
            </section>
        </header>
    </section>
</body>
</html>

파일명 : css/style.css


body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

높이 값은 header가 아닌 header 안의 자식들에게 주는 것이 좋습니다.

파일명 : css/style.css


body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
}

결과를 보시면 아래처럼 header와 inner가 생긴 것을 볼 수 있습니다.

inner가 존재하기 때문에 inner 안에만 컨텐츠를 배치할 수 있습니다.

inner 또한 로고 박스, 검색 박스, 아이콘 박스의 3개의 박스로 구분되어 있습니다.

먼저 로고를 추가해보겠습니다.

로고는 <h1>태그를 사용하는 관례가 있기 때문에 <h1>태그를 선언해주었습니다. 또한 로고를 클릭하면 메인 페이지로 이동하기 때문에 <a>를 태그를 통해서 index.html로 돌아올 수 있도록 하였습니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
                <h1 class="logo">
                    <a herf="index.html">
                    </a>
                </h1>
            </section>
        </header>
    </section>
</body>
</html>

아이콘을 넣을 때 이미지를 통해서 넣을 수 있습니다. 저희는 background를 활용해서 여러가지 아이콘을 배치해 보도록 하겠습니다.

먼저, 로고에 쓸 이미지가 들어있는 제공된 imgs 파일을 압축해제하여 insta_clone 폴더에 추가합니다.

폴더 안에 background 이미지를 SpriteCow로 활용할 것입니다.

검색 창에 SpriteCow를 검색해서 www.spritecow.com 사이트에 접속합니다. 사이트에 OpenImage를 클릭하고 백그라운드 이미지를 엽니다.

그러면 아래와 같은 창이 나타나게 됩니다.

여기서 내가 원하는 이미지을 선택하게 되면 아래 그림과 같이 이에 대한 백그라운드 이미지와 경로, 높이와 너비를 보여주게 됩니다. 백그라운드 이미지는 공간을 차지하지 않기 때문에 높이와 너비를 항상 지정해 주어야 합니다.

아래의 코드를 복사하여 css/style.css 파일에 추가해주면 됩니다. 이처럼 모든 아이콘을 가져온 CSS 소스코드는 다음과 같습니다.

파일명 : css/style.css


.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background: #fafafa;
}

...

CSS 코드에 display: inline-block; 을 다 깔아준 이유는 너비와 높이값을 입력하려면 block element에게만 입력이 가능합니다. 간혹가다가 아이콘을 입력할때 인라인 요소를 사용되는 경우가 생깁니다. 인라인 요소에다가 아이콘 입력하게 되면 인라인 요소이기 때문에 형태를 가질 수 없게 됩니다. 그래서 class에 입력하는 모든 display 속성을 인라인 속성과 블록 속성을 함께 가질 수 있도록 만든 것 입니다.

이렇게 아이콘들을 가지고 왔으면 header 부분에 아이콘을 추가해 봅시다.

파일명 : index.html


...

        <header id="header">
            <section class="inner">
                <h1 class="logo">
                    <a herf="index.html">
						            <div class="sprite_insta_icon"></div>
						            <div class="sprite_write_logo"></div>
                    </a>
                </h1>
            </section>
        </header>

...

결과를 보시면 로고들 사이에 작은 글자가 생기는 것을 볼 수 있습니다. 이는 <a>태그로 인하여 생기는 것으로 <a>태그의 배경색을 없애주면 해결이 가능합니다.

파일명 : css/style.css


...

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
}

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

또한 아이콘들을 일직선 상에 위치하게 하기 위해서는 vertical-align 값을 middle로 주면 해결이 가능합니다.

파일명 : css/style.css


...

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

두 로고가 가로로 정렬받는 이유는 display: inline-block; 속성을 주었기 때문입니다. 원래 블록 요소는 화면에 배치시키면 세로 배치 받는 것이 기본입니다. 세로 배치를 받는 블록 요소를 가로 배치 시키기 위한 float(플롯), inline-block 방법이 있습니다.

다음에는 로고 사이의 바(막대)를 만들어보도록 하겠습니다.

바를 만드실 때 이미지를 활용하시는 분들도 많이 계신데, 가상 선택자를 활용하는 것이 조금 더 편리할 수 있습니다. 저희는 가상 선택자를 활용해서 바를 만들어 보도록 하겠습니다.

CSS 선택자 뒤에 콜론(:)을 넣게 되면 가상 선택자가 됩니다. 말 그대로 가상으로 선택해주겠다는 것을 의미합니다. after는 선택한 후에 무언가를 만들어 주겠다는 것을 의미합니다. after는 꼭 content라는 공백을 받아야 합니다.

파일명 : css/style.css


...

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: 0;
}

다음으로 검색 창과 오른쪽의 아이콘들을 추가해 보겠습니다.

검색 창 위에 글자들이 포커스 되는 순간 사라지고 옆으로 가는 fake_field 기능과 4개의 아이콘들도 만들어보도록 하겠습니다.

파일명 : index.html


...

        <header id="header">
            <section class="inner">
                <h1 class="logo">
                    <a herf="index.html">
						            <div class="sprite_insta_icon"></div>
						            <div class="sprite_write_logo"></div>
                    </a>
                </h1>

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

...

결과를 보시면 세로로 배치된 것을 보여주고 있습니다. 따라서 가로로 배치시키기 위해서 display: flex 속성을 사용하도록 하겠습니다. flex는 정렬하고자 하는 대상이 아닌 정렬하고자 하는 대상의 부모에게 주는 속성입니다.

파일명 : css/style.css


...

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
}

...

결과를 보면 잘 정렬이 된 것을 볼 수 있습니다. 검색 창 부분과 아이콘 마진 부분을 좀 더 수정해 보겠습니다.

파일명 : css/style.css


...

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px; 
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: 0;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

이렇게 해서 header부분이 완료되었습니다. 마지막으로 디테일을 다듬어 보도록 하겠습니다.

막대 바를 위로 살짝 올리고 instagram 로고는 아래로 살짝 내리도록 하겠습니다.

파일명 : css/style.css


...

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
}

...

이렇게 웹 페이지를 만들 때에는 큰 틀을 보고 점차적으로 작은 영역들을 살펴보면서 코딩하는 것이 중요하다고 알고 넘어가시면 될 것 같습니다.

완성된 코드는 아래와 같습니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
					      <h1 class="logo">
						        <a herf="index.html">
                        <div class="sprite_insta_icon"></div>
                        <div class="sprite_write_logo"></div>
						        </a>
					      </h1>

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>
    </section>
</body>
</html>

파일명 : css/style.css


.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background:#fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
}

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}