[프로젝트] 인스타그램 클론코딩 #1. Header

UkiUkhui·2022년 8월 15일

Project 해보자!

목록 보기

2/8

1. 초깃값들 셋팅하기

✔️ 디렉터리 구조

CSS 폴더
css/style.css
css/reset.css
https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ 참고

reset.css : 브라우저마다 동일한 css값 보여주기 위하여 default값들 초기화
추가 후 index.html 내 link 추가
<link rel="stylesheet" href="css/reset.css">

JS 폴더

js/main.js

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTP-8">
        <title>Title</title>

		<link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <script src=""></script>


    </head>
    <body>
        
    </body>

</html>

+) 실행 : option + b

마우스 오른쪽 버튼 > open in default brower

2. HTML 구조

Header

inner

container

left-box, right-box

1) Header

① 헤더와 inner 생성하기

style.css

@import "reset.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;/*높이 값은 header내의 자식들에게 줌*/
    margin: 0 auto; /*가운데 정렬*/
}

index.html
- section 태그 이용해 가장 큰 container 생성
- container라는 id를 가진 section 생성 후 header 태그 추가

    <body>
        <section id="container">
            <header id="header">
                <section class="inner">   
                </section>
            </header>
        </section>
    </body>

② inner 내 box 배치

1️⃣ 로고 추가

index.html
- 로고 : h1 태그로 선언
- 로고 클릭 ➡️ 메인 페이지로 이동

<body>
        <section id="container">
            <header id="header">
                <section class="inner">
                    <h1 class="logo">
                        <a href="index.html">
                        </a>
                    </h1>
                </section>
            </header>
        </section>
</body>

imgs 폴더
- http://www.spritecow.com
- 이미지 업로드 후 선택 : 이미지 경로, 높이, 너비 보여줌
style.css 파일에 복붙
- display: inline-block
- 너비와 높이값 입력하려면 block element에게만 입력 가능함
- 아이콘 입력 시 인라인 요소로 사용되는 경우 발생
- class에 입력하는 모든 display 속성을 인라인 속성과 블록 속성 함께 가질 수 있도록 만듦

body{
    background: #fafafa;
}
.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;
}

index.html
- 가져온 아이콘을 header에 추가함

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

    </body>

위쪽에 작은 점 생김 = 'a' 태그의 배경색 때문
#header .inner  .logo > a{
    color: transparent;/*배경색 투명하게 만듦*/
}
#header .inner  .logo > div{
    vertical-align: middle;/*아이콘 일직선상 위치*/
}
가로 정렬되는 이유

display:inline-block;

원래) 블록 요소 : 화면에 배치시키면 세로 배치됨

세로 배치를 받는 블록 요소를 가로 배치로 시킴 : float(플롯), inline-block

2️⃣ 바(막대) 추가

가상선택자 활용
- CSS 선택자 뒤에 콜론(:) 넣기 = 가상으로 선택해주겠다
- after : 선택 후 무언가를 만들어주겠다는 의미
- after는 꼭 content라는 공백을 받아야 함.

#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;

}

3️⃣ 검색창, 아이콘 추가

fake_field : 글자가 포커스 되는 순간 사라지고 옆으로 감

 <body>
        <section id="container">
            <header id="header">
                <section class="inner">
                    <h1 class="logo">
                        <a href="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>

세로 배치되어버림
display : flex 사용하여 가로 배치
- flex : 정렬대상의 부모에게 주는 속성

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

#header .search_box{
    position: relative;
}

@import "reset.css";
body{
    background: #fafafa;
}
.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;
}
#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;/*높이 값은 header내의 자식들에게 줌*/
    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 .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 .inner .logo div{
    vertical-align: middle;
}

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