05. 헤더와 드롭다운 메뉴 - 로고(feat. css의 로고 부분, inner는 왜 생략 했을까)

# header태그

html에서는 기본적인 태그들은 이미 핵심요소로 만들어져 있다.

예를들면 header태그!

엄연히 html에 존재하는 태그이고요, 일단 특별한 기능은 없어요. (단순하게 이 부분이 사이트의 헤더영역이다라는 기본적인 의미만 가지고 있다고 보시면 되어요.) 우리가 대표적으로 div 태그를 이용해서 어떤 구조들을 만들고 화면에 출력을 할 수가 있겠는데, 그러면 그렇게 만들어진 구조가 어떤 역할을 하는지 알기가 쉽지않거든요. 그래서 사실 많은 경우에 이렇게 클래스를 부여해서 대표적으로 헤더라는 이러한 이름들을 부여함으로 해서 우리는 그 요소에 어떤 의미를 부여하게 되는데요.

이 html은 기본적으로 그러한 의미를 가지는 몇가지 태그가 있고요, 헤더태그가 그런 것 중 하나입니다. 

class heasder로 div요소를 만들어도 되고요.

 

 

#header 태그로 스타벅스 예제 만들기

html의 index.html doby태그에 헤더에 관한 코드를 작성 해 줍니다.

*<a .logo> 태그 설명: 우리가 보통 일반적인 사이트에서 왼쪽상단에 로고를 선택하게 되면 그 사이트릐 메인사이트의 메인 페이지로 이동을 하거든요. <a href="/" ...>의 슬래쉬 기호를 넣은 것은, 절대경로를 넣은 것으로,( '도메인부분이생략',' /', 'index.html파일이 생략') 생략이 된 절대경로처럼, 이 예제를 완성해서 실제 서버에 업로드를 하고, 접속할 수 있는 웹사이트 주소 도메인 주소를 하나 확보하게 되면, 그 도메인주소도 우리의 프로젝트 안에서는 생략할 수 있습니다.

 

#CSS에 글자색깔, 폰트사이즈,폰트두께,줄간격 명시

글자색깔(color)은 어두운그레이색으로.

폰트사이즈(font-size)는 명시적으로 폰트사이즈를 16px로 시작한다고 명시해 주세요. 이렇게하면 body 안에있는 모든 요소에 영향을 미치게되겠죠. 

폰트두께(font-weight)도 기본 두께 400으로 명시 해 주세요.

줄간격(line-height)도 별도의 단위 없이 1.4로 입력하면, 기본 글꼴크기, 여기서는 16px에 1.4배의 줄 높이를 가지면서, 첫번째줄, 두번째 줄, 이렇게 여러 줄이 될 경우에 사용자에게 적당한 행간을 줄 수 있다. (개인적인 추천)

 

#.최종적으로 header에 대한 css 코드작성은 아래와 같습니다.

추가 코드작성 있음!!!!!!

***추가!!***

header .logo {

   left: 0; /*로고가 부모요소를 기준으로 왼쪽에 정렬되었다라는 것도 명시 해 주세요!!*/

}

 

/*HEADER*/ 주석: 여기서 부터 header 의 내용이 시작되는 것을 알 수 있습니다.

<header>에 대한 선택자: header영역과 inner영역이 정확하게 시각적으로 확인 될 수 있도록 각각 블루색과 오렌지색을 넣었습니다. 

<div .inner> 에 대한 선택자

<a .logo>  에 대한 선택자(header안에 inner는 통상적으로 건너뛰는 것이 좋습니다.)

<img> 블록요소로 만들어 줍니다.

 

 

#각 영역 배치하기

inner영역은 헤더의 왼쪽에만 붙어있습니다, 이것을 중앙으로 배치하고 싶어요.

 

#margin을 추가 해 줍니다.

가로사이즈 width:110px;로 해 두고,

마진의 좌우값이 auto로 입력 됨으로

( 위아래 값은 0(사용하지않고,) 좌우의 값만 브라우저가 계산하도록 auto로 해 줍니다.  )

정확하게 가운데 정렬을 시켜 줄 수있는 개념은, 많이 쓰이기 때문에 기억 해 둡니다.

화면을 확대함에 따라서, 1100px의 오렌지영역은 중앙으로 배치된다. 그리고 더더더 확대를하면 할 수록 오렌지색 영역만 나타나게 됩니다.

최대 확대했을 때, 파란색영역은 보이지 않게 됩니다.

#.img 태그의 블록화

스타벅스 로고가 inner의 영역에 완전히 채워지지 않고 밑의 공간이 생기는 이유는?

img 태그는 인라인요소고 글자를 다루는 용도로, 그래서 base line(기준선)이 존재하기 때문에 그런 기준으로 약간의 공간을 가질 수 있도록 설정되어있다. 원래 이미지 태그는 화면을 꾸미는 용도가 아니었음.

이것을 이해하고, 우리에게 맞는 방법으로 수정해서 쓸 수 있다. img 태그선택자를 작성하고 display: block;을 넣어주면 로고가 제대로 배치됩니다.

display: block; 모든 이미지를 블록요소로 선언하겠다. 로 해결했습니다.

 

#. /*common*/

프로젝트 전체에 영향을 미치고 있는 내용들이 헤더 윗부분에 다 정의가 되어있어서 /*common*/이라는 주석처리를 해 줍니다.

코드작성의 기본은 정리정돈이 핵심입니다.

 

#. inner부분에 높이값 넣고, 로고 배치하기

inner영역에 높이값을 넣었고, 우리가 원하는 것은 로고가 이 헤더영역의 수직 가운데에 위치하고 있는 거에요.

높이값을 넣은 후에 로고를 이 헤더영역의 수직 가운데에 위치시켜줄겁니다.

 

<a .logo> 의 선택자 header .logo 부분에

position: absolute;를 작성.

(부모요소를 기준으로 배치를 하겠다고 선언을 해 줍니다.)

top: 0; 위에 0픽셀

bottom: 0; 아래에 0픽셀

margin: auto; 외부영역 속성의 값은 자동.

 

그리고 로고의 높이값은 실제 로고 높이값인 75라고 명시를 해 줍니다.

height: 75px;

그리고 결과가 아래와 같습니다. 

어 그런데 왜 이렇게 되는 거죠?

(암기)position: absolute;를 작성 했다면, 구조적인 부모요소에 position: relative;를 세트로 넣어주어야 합니다.

 

#. 배치의 개념 복습

가운데 배치라는 개념을 우리가 쓸 때 어떠한 값들이 조건으로 사용되는지 봅시다.

position: absolutue;( position: relative; 도)를 사용해서 오렌지색 컨테이너를 가운데 배치

top과 bottom으로 끝점을 잡아주고, margin을 이용해서 가운데로 몰아주고,

(중요)요소의 위쪽 여백과 아래쪽 여백을 자동으로 계산하려면 결국에는 요소의 높이값도 브라우저가 알고 있어야 하는데요,  height로 오렌지색 요소가 100px이라고 명시를 해줘야 해요 . 

 

같은 원리로 좌우도,

좌우에 끝점을 잡아주고, margin을 이용해서 가온데로 몰아주고, 너비weight도 100px로 명시 해 주면 수평에 해당하는 가운데 배치를 완성했습니다.

이렇게 가운데에 배치가 되었습니다. 

 

일반적으로는 가운데 정렬이라는 개념을 많이 쓰는데요. 또 여러가지 이유에 의해서 우리가 정렬이 아닌 배치를 활용해야하고, 그 배치를 활용하다보면 가운데에다가 저 오렌지색 요소처럼 배치를 해야할 수도 있기 때문에 배치와 정렬의 개념을 동시에 쓸 수는 없으니까. 만약에 배치를 해야되는 상황에 가운데를 맞춰야 한다면, 양 끝에 기준점을 잡아준 다음에 외부여백을 auto로 해 두고 요소의 너비와 높이를 명시 해 주세요.