패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 헤더영역의 logo와 메인메뉴의 CSS(main.css) 코드를 review해보자

Common

공통으로 적용되는 style

• project에 공통으로 영향을 미치는 선택자와 CSS 스타일들 명시
• img 태그 : 인라인 요소라서 로고 밑에 생기는 약간의 여백을 없애기 위해 img 태그를 block요소로 변경

body{
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Nanum Gothic', sans-serif;
}

img{
    display: block;
}

a {
    text-decoration: none;
}

Header

logo 요소

• inner 영역을 header에 가운데 정렬하기 위해 inner의 margin: 0 auto; 으로 줌
• 로고가 header 영역의 수직상 가운데 위치하도록 하기 위해
  1. inner에 position : relative; 선언(logo 요소의 위치 상 부모요소에 선언)
  2. logo에 position : absolute;를 선언 > 해당요소가 위치상 부모요소를 기준으로 배치 의미
  3. top, bottom, left 0으로 선언 : 부모요소의 위/아래/좌 0인 지점이 기준
  4. margin : auto; : 요소의 바깥여백 위아래, 좌우가 전부 auto값
  5. margin을 계산하기 위해서는 요소의 height의 값을 알아야 하기 때문에 logo의 height을 명시해줌

/* HEADER */
header {
    background-color: #f6f5f0;
    border-bottom: 1px solid #c8c8c8;
}


header .inner {
    width: 1100px;
    margin: 0 auto;
    height: 120px;
    position : relative;
}


header .logo {
    height : 75px;
    position : absolute; 
    top : 0;
    bottom : 0;
    left : 0;
    margin : auto;
}

sub menu

• display: flex; : 수직으로 쌓여있는 메뉴들을 수평으로 정렬해줌
• 가상요소 선택자 before 사용해서 요소 앞에 수직선을 만들어 줌
  1. content 없으면 가상요소 선택자 만들어지지 않기 때문에 빈 문자열 선언
  2. 수직선 배치를 위해 position : absolute;를 선언 후, 부모요소에 position : relative; 선언해줌. top, bottom, margin, height 값 선언해줌
  3. 색상 흐린 아이보리(background-color: #e5e5e5;)로 변경
  4. position : absolute;를 선언하면 display: block;으로 자동 변경
  5. main menu 제일 첫 요소인 "sign in" 앞의 수직선은 없애기 위해 header .sub-menu ul.menu li:first-child 선택자를 추가하고, 가상요소 선택자 ::before를 더해 display: none; 선언함
  6. 메뉴들의 링크는 사용자가 링크 잘 클릭할 수 있도록 링크 영역을 넓혀줌
  7. 링크 요소에 마우스를 올리면 font 색상이 검정색으로 변할 수 있도록 가상 클래스 선택자 :hover를 사용함
• sub 메뉴들과 search 요소를 가로로 정렬 : header .sub-menu요소에 display: flex; 선언
• sub 메뉴들 오른쪽으로 배치 : header .sub-menu 요소에 부모요소 기준으로 top: 10px;, right: 0; 선언

header .sub-menu {
    display: flex;
    position: absolute;
    top: 10px;
    right: 0;
}

header .sub-menu ul.menu {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
}

header .sub-menu ul.menu li {
    position : relative;
}


header .sub-menu ul.menu li::before {
    content: "";
    width: 1px;
    height: 12px;
    background-color: #e5e5e5;
    position : absolute;
    top : 0;
    bottom : 0;
    margin : auto 0;
}

header .sub-menu ul.menu li:first-child::before {
    display: none;
    }

header .sub-menu ul.menu li a {
   font-size: 12px;
   padding: 11px 16px;
   display: block;
   color : #656565;
}

header .sub-menu ul.menu li a:hover {
    color:black;    
}