Natours Project — Header 구축 (Part 2)

이번 강좌에서는 아래와 같은 기능을 추가하려고 합니다.

• 로고 붙이기
• 제목 추가하기

먼저 로고를 불러와서 원하는 위치에 놓는 법 부터 해보겠습니다.

1. Div tag 추가 및 클래스 이름 설정- 이 안에 이미지를 넣을 예정
2. img tag 추가, 클래스 이름 설정 및 src 를 이용하여 로고를 가져오고 alt 속성과 클래스 이름 설정
3. CSS 안에서 해당 클래스에 position 설정

첫 번째로 div tag를 추가 하여 이미지를 넣을 것입니다. 그 이유는 이미지가 인라인 요소이기 때문에 height 와 width가 적용이 되지 않습니다. 그래서 이미지가 들어갈 작은 컨테이너 (div) 를 만들고 그 안에 위치를 정하면 로고가 해당 위치로 움직이게 됩니다. 그리고 컨테이너에 클래스 이름을 넣습니다.

<div class="logo-box"></div>

갑자기 인라인 요소라는게 나와서 간단히 설명을 드리겠습니다.

	인라인 요소(inline element)	블록 요소(block element)
범위	컨텐츠가 끝나는 지점까지 넓이	가로폭 전체 넓이를 가지는 직사각형 형태
특징	임의로 height와 width 사용 불가	Width, height, margin, padding 기능 사용 가능
	Line-height 줄의 높낮이	레이아웃 수정이 가능함
	Text-align 텍스트 중앙, 좌, 우측 정렬 가능
줄바꿈	없음	가능

만약 div 태그를 만들지 않고 이미지 만으로 CSS에 수정을 한다면 width 값과 height 값을 적용할 수 없습니다. 그래서 div 태그 안에 넣어서 레이아웃을 수정하여 위치를 조절이 가능 합니다. 추가로 두 가지 기능을 다 가진 inline-block도 있습니다. 

두 번째로 img tag를 추가하고 해당 클래스 이름을 설정 합니다. 그리고 src를 통해 가져오고자 할 로고 그림을 불러옵니다. 만약 그림을 불러올 수 없거나 사라지게 되면 alt에 해당되는 글이 나오게 됩니다. 또한, w3schools에서는 아래의 예시 처럼 width와 height 값을 넣을 수 있습니다.

<img src="파일 이름" alt=" " height="" width="">

<div class="logo-box">
    <img src="img/logo-white.png" alt="Logo" class="logo">
</div>

사실 위에서 이미지가 inline 요소라고 했는데 img 태그를 사용하면 inline-block이 됩니다. 그래서 height와 width가 가능합니다. 하지만, padding이나 top 또는 left 같은 위치 요소는 사용이 되지 않았습니다. 그 이유는 position을 주지 않았기 때문입니다. 우선 위치를 절대 위치값으로 잡고 top, left 및 padding 을 사용하면 적용이 됩니다. 문제는 Internet Explorer 에서 적용이 되지 않습니다. 사실 위에서 적었던 이미지가 inline 요소가 아니라 inline-block 이라서 되는게 아닐까 그렇게 생각되네요.

세 번째로 CSS 안에서 div 컨테이너에서 position을 설정합니다. 위에 잠시 적은 것 처럼 절대 위치값을 잡고 left와 top 요소에 레이아웃 설정값을 넣습니다. 다행히 internet explorer에서 적용이 잘 됩니다.

.logo-box{
    position : absolute;
    top: 40px;
    left: 40px;
}

그럼 여기서 top: 40px와 left: 40px는 어느 곳을 중심으로 40px 만틈 떨어져서 나타내는지 궁금했습니다. 그래서 이 강좌에서는 참조가 있어야 한다고 이야기를 합니다. 그 곳은 바로 부모를 참조 한다고 합니다. 그래서 부모가 되는 곳인 header 가 되고 그 곳에 아래와 같이 추가를 합니다.

position : relative;

그렇게 되면 원점은 상대 위치가 있는 곳이 됩니다. 그래서 상대 위치가 있는 header 부분이 원점이 되겠죠. 만약 header 부분에 relative를 하지 않았다면 어디를 참조하는지 궁금했습니다. 그렇게 되면 가장 위의 tag가 부모가 됩니다. 그 곳은 바로 body 가 됩니다.

그리고 이미지 자체를 조정하기 위해 아래와 같이 logo 클래스에 값을 넣습니다.

.logo{
    height: 35px;
}

그런데 왜 height 값만 주고 width는 없을까? 그 이유는 height 값만 주어도 자동적으로 width값을 알아내기 때문이다. 따라서, 아래와 같이 로고가 나오게 됩니다.

이젠 제목을 넣는 과정을 해보겠습니다.

우선 제목은 h1 element를 사용합니다. 그리고 heading-primary 라는 이름으로 class에 넣습니다. 같은 문장에 텍스트마다 다른 스타일을 주기 위해 span tag를 사용합니다. 상단에 하나 그리고 하단에 하나에 넣기 위함입니다. 그럼 아래와 같은 코드가 나옵니다.

<h1 class="heading-primary">
    <span class="heading-primary-main">Outdoors</span>
    <span class="heading-primary-sub">is where life happens</span>
</h1>

그리고 CSS 에서 해당 class 이름에 색상 지정이나 대문자 등 스타일을 지정합니다. 그러나 위와 같이 Outdoors와 is where life happens가 줄바꿈이 일어나야 하고 전체 너비를 차지 합니다. 이 특징은 block element와 동일합니다. 그 이유는 h1 element가 기본적으로 block element를 가지고 있기 때문입니다.

그러나 span은 기본적으로 inline element입니다. 그렇기 때문에 줄 바꿈은 적용되지 않습니다. 그래서 display: block을 span에 있는 클래스에 적용합니다. 그리고 각 span마다 font-size, font-weight 및 글자 간격을 조정합니다. 

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub{
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
}

마지막으로 해당 글자를 가운데로 위치로 조정해야 합니다. 제목 뿐만 아니라 다른 버튼도 가운데 조정을 위해 HTML 에서 div tag로 감싸줍니다. 그리고 text-box 라는 class 이름을 부여합니다.

<div class="text-box">
    <h1 class="heading-primary">
        <span class="heading-primary-main">Outdoors</span>
        <span class="heading-primary-sub">is where life happens</span>
    </h1>    
</div>

그리고 로고박스에서 한 것과 같이 text-box에도 위치를 absolute를 지정해 줍니다. 여기서 우리는 화면 중앙에 넣고 싶어 합니다. 그래서 top과 left에 각각 50%라는 값을 줍니다. 그렇게 되면 아래와 같은 화면이 나오게 됩니다.

비록 가운데에 위치하였으나 div tag의 제일 왼쪽 상단을 중심으로 하여 화면 가운데에 오게 되었습니다. 그렇기 때문에 이 부분을 가운데로 옮기려면 transform 속성을 사용합니다. transform 속성은 너무 많아서 여기서 필요한 이동 함수인 translate() 함수만 다루겠습니다.

먼저 translate 함수안에 들어가야 매개변수 값은 x와 y 입니다. x는 x축으로 x 거리만큼 상대적으로 위치를 정하고 y역시 마찬가지로 상대 위치를 정합니다. 하지만 y의 값을 생략하면 값은 0이 됩니다. 아래와 같이 translate의 x와 y가 움직인다고 보면 됩니다.

그렇기 때문에 아래와 같이 x와 y값에 -값을 넣고 중앙으로 이동 합니다.

.text-box{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: orange;
    transform: translate(-50%,-50%);
}

그렇게 되면 화면의 가장 중앙으로 오게 됩니다. 여기서 top 부분을 40%로 변경하는데 그 이유는 처음에 전체 화면을 95vh 만큼 보여주기 때문에 40%가 보기에 더 좋습니다.

<HTML>

<body>
    <header class="header">
        <div class="logo-box">
            <img src="img/logo-white.png" alt="Logo" class="logo">
        </div>
        <div class="text-box">
            <h1 class="heading-primary">
                <span class="heading-primary-main">Outdoors</span>
                <span class="heading-primary-sub">is where life happens</span>
            </h1>
        </div>
    </header>
</body>

<CSS>

.header{
    height: 95vh;
    background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)),url("../img/hero.jpg");
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0,100% 0,100% 75vh, 0 100%);
    position : relative;

}

.text-box{
    position: absolute;
    top: 40%;
    left: 50%;
    background-color: orange;
    transform: translate(-50%,-50%);
}

.logo-box{
    position : absolute;
    top: 40px;
    left: 40px;
}

.logo{
    height: 35px;
}

.heading-primary{
    color: #fff; /* 색상 지정 */
    text-transform: uppercase; /* 대문자 */
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub{
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
}