패스트캠퍼스 챌린지 29일차 - Part1. Ch10

이제 스타벅스 예제의 헤더 부분을 만들어보자. 왼쪽에 로고와 오른쪽에 서브메뉴, 메인메뉴로 나뉘어 있다.

 

만들어볼 헤더 부분

여기를 확대해보면 헤더 부분의 내용이 확대되다가 일정 이상 확대되면 왼쪽을 기준으로 오른쪽이 잘리기 시작하고, 일정 이상 축소하면 헤더의 내용이 중앙에 몰려있게 된다. 기억하고 시작해보자!

 

먼저 바디 태그에 header 태그를 만든다. 실질적으로 어떤 기능을 수행한다기 보다는 단순하게 사이트의 헤더 영역이라는 기본적인 의미만 가지고 있는 태그이다. 

안에 inner 클래스를 가진 디브 태그를 만들고, a 태그 안에 이미지 태그를 만들어 로고를 넣어준다. a 태그의 경로로는 / 만 넣어준다. 도메인/index.html 에서 도메인과 index.html을 생략한 구조로, 따라서 로고를 클릭하면 메인 페이지 즉 현재의 index.html 파일로 이동하게 된다.

 

글자색상은 따로 지정하지 않으면 기본으로 검정이 된다. 다만 검정색상은 디자인적인 관점에서 촌스러울 수 있으므로 어두운 회색(#333) 으로 지정해주고, 폰트 크기는 16px 로 명시해준다.

 

헤더를 약간 수정하고 페이지를 봤더니 로고가 잘 출력되고 있는데 아래쪽에 약간 빈 공간이 보인다. 인라인 요소는 글자를 취급하는 요소로 baseline을 가지고, 글자들은 baseline을 기준으로 아래쪽에 약간 공간을 가지고 있다. 이미지는 인라인 요소이므로 마찬가지로 baseline 아래쪽의 특정한 공간이 있게 된다.

이를 수정하는 방법은 간단하다. img 선택자에 display 속성을 block으로 변경해주면 끝이다.

깔-끔

 

 

로고를 배치(position)를 이용한 상황에서 (세로 방향)가운데로 정렬하려면, (1) position 설정 후 (2) top과 bottom 값에 0을 주고 (3) margin 상하 값에 auto를 준다. (4) 정렬할 요소에 높이 값이 있어야 하며 (5) position을 설정할 땐 부모요소에도 position 값을 주는 걸 잊지 말도록 하자!! 참고로 이는 가로 방향 가운데 정렬을 할 때도 마찬가지로 적용된다.

가운데 정렬 완료

 

그리고 css 코드를 작성할 때 body 태그나 img 태그와 같이 모두 적용하는 부분은 COMMOM, 헤더 부분에 적용할 부분은 HEADER 로 주석을 달아놓았다. 이렇게 분류해놓으면 나중에 알아보기 쉬움!!

 

 

---

29일차!! D-1.....

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa