KDT 5th 웹개발자 입문 수업 7일차

 

인프런 헤더 만들기

간단하게 헤더를 만드는 방법에는 2가지가 있는데,

첫번째로는 position absolute로 고정시키는 것

 

두번째로는 display flex로 만들기 ✔️ 이 방식을 사용함

 

1. HTML 파악하기

- 로고

- Nav 메뉴

- 검색창

- 추가 메뉴

- 로그인/회원가입 버튼

 

1-1. B.E.M (Block / Element / Modifier)

CSS 클래스 이름을 짓는 방법

기본적 룰을 가지고 통일이 되어야 협업하기에 용이, 추후 SCSS 와 함께 사용하기 편리 (React 때문에 점점 덜 사용되는 추세지만 기본으로 알아 둬야함)

 

- 요소__일부분 : 요소의 일부분을 표시할 때 언더바(__)

- 요소--상태 : 요소의 상태를 표시할 때 대쉬(--)

 

1-1-1. Block

• 가장 바깥쪽 상위 요소인 독립적 블록
• 재사용이 가능하게끔 ---> margin/padding을 적용X
• 블록은 블록을 하위요소로 가질 수 있음
• 가장 바깥 상위 요소이므로 바로 클래스 선택자로 사용이 가능

1-1-2. Element

• 블록에 종속되는 하위요소
• 소속된 블록에 의존적, 다른 블록에 들어가면 이상해질 수 있음
• __ 를 사용하여 연결

ex) .block__element { } .header__menu { }

 

1-1-3. Modifier

• 블록에 종속되는 하위 요소
• 요소 모양 또는 속성이 변형된 경우 사용
• 기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른 경우 등에 적용
• --를 사용하여 연결

ex) .btn--red { } / .btn--gray { }

 

 

2. HTML 로 작성하기

시멘틱 태그를 적극 활용한다. 시멘틱 태그는 특별한 기능은 없고 정보를 주는 태그로써 div와 동일한 기능이라 보면 된다.

헤더의 경우 <header> 로 감싸준다.

 

2-0. .inner 부분 설정하기

홈페이지를 보면, 어느 부분을 기점으로 컨텐츠가 중앙 정렬 되어 있다는 것을 알 수 있다.

그 부분이 inner로 묶여있는 것이므로 inner 밖 부분은 반응형으로 나타내줄 때 늘어나게 표현해준다.

 

2-1. 로고 영역

<div>로 <a>를 묶어서 로고영역을 나타낸다. 바깥으로 묶은 div에 .header__logo 로 지정

 

아이콘을 사용하고자 할 때, fontawesome 사이트 참고

https://fontawesome.com/

Font Awesome

* width와 height를 줘도 적용되지 않고 폰트로 취급되므로 폰트 사이즈를 늘려야한다.

script 를 연결해주고<i> 태그를 복사해서 붙여넣으면 된다.

 

2-2. 메뉴 영역

<ul>을 사용하되, .header__menu 로 지정

 

2-3. 줄어드는 공간영역

인프런 헤더의 특징은 메뉴가 줄어드는 것이 아닌, 줄어드는 공간이 따로 존재한다.

div에 .header__space 로 만들어준다.

 

2-4. 검색 영역

div에 .header__search 로 지정하고 <input> 를 넣어준다.

 

2-5. 로그인/회원가입

div에 .header__login-join 으로 지정

자식으로 div에 .btn과 .btn--login / .btn .btn--join 을 넣어준다.

 

<header>
    <div class="inner">
      <!--로고 영역-->
      <div class="header__logo">
        <a href="#" target="_blank"><i class="fa-solid fa-leaf"></i></a>
        <a href="#" target="_blank">Inflearn</a>
      </div>
      <!--메뉴 영역-->
      <ul class="header__menu">
        <li><a href="#">강의</a></li>
        <li><a href="#">로드맵</a></li>
        <li><a href="#">멘토링</a></li>
        <li><a href="#">커뮤니티</a></li>
        <li><a href="#">인프런</a></li>
      </ul>
      <!--줄어드는 공간 영역-->
      <div class="header__space"></div>
      <!--검색 영역-->
      <div class="header__search">
        <input type="text">
        <i class="fa-solid fa-magnifying-glass"></i>
      </div>
      <!--로그인/회원가입 영역-->
      <div class="header__login-join">
        <div class="btn btn--login">로그인</div>
        <div class="btn btn--join">회원가입</div>
      </div>
    </div>
  </header>

 

3. CSS 시작하기

가장 좋은 접근을 위해선 접근 가능한 요소에 대한 CSS선택자를 미리 전부 선언한다.

/*Common*/
body {}
a {}

/*Block*/
/*로고 영역*/
header {}
header .inner {}
header .inner .header__logo {}
header .inner .header__logo a {}
header .inner .header__logo a i {}

/*메뉴 영역*/
header .inner .header__menu {}
header .inner .header__menu li {}
header .inner .header__menu li a {}

/*공간 영역*/
header .inner .header__space {}

/*검색 영역*/
header .inner .header__search {}
header .inner .header__search input {}
header .inner .header__search i {}

/*로그인/회원가입 영역*/
header .inner .header__login-join {}
header .inner .header__login-join .btn {}
header .inner .header__login-join .btn.btn--login {}
header .inner .header__login-join .btn.btn--join {}

 

CSS 기본 세팅

• A태그 기본 스타일 빼기
• header 영역 확인을 위한 배경 색상 설정
• inner 영역 확인을 위한 배경 색상
• inner는 고정 크기 부여
• 각 아이템들을 가로로 배치 후 중앙 정렬

 

헤더 1 - 로고

• 로고 사이즈의 기본이 될 아이콘 크기 키우기
• 옆의 글자 크기도 아이콘 크기에 맞추기!
• a태그의 효과는 필요 없으니 없애고 로고 아이콘과 a태그 크기와 색상 변경
• 수직 중앙 정렬하고 폰트 고르기

헤더 2 - 메뉴

• 수직으로 쌓여있는 요소들을 -> display :flex
• padding으로 수직 정렬을 해줄 수 있지만, line-height로도 가능

 

헤더 3 - 공간

• 여백 공간을 차지해야 하므로 flex-grow:1 을 해줘야 한다

헤더 4 - 검색

• input태그의 검색창 설정을 고정 크기로 지정하고 테두리 등을 사용
• 돋보기를 <input> 안에 넣기 위해선 두가지 방법이 있는데, 간단한 방법인 transform의 translate은 눈에 보이는 것만 위치를 변경시켜주는 개념이라 원래 아이콘이 있던 위치가 그대로 자리를 차지하고 있게 된다.
• 그러므로 position absolute를 줘서 이동 시켜준다. absolute에서 margin:auto 로 중앙 정렬을 하고 싶다면,
• 수직 중앙 정렬인 경우 top, bottom은 0으로 / 수평 중앙 정렬의 경우 left, right는 0으로 정해주면 된다.

헤더 5 - 로그인 / 조인

• 로그인버튼과 조인버튼이 간격을 두고 떨어져 있으므로 display flex 를 지정해준 뒤 gap으로 띄워준다.
• 각 버튼 속성을 설정해준다.

 

마지막으로 flex로 디테일을 설정해주는데, 늘어났다 줄었다 하는 공간인 space부분만 flex-grow:1 로,

줄어들면 안되는 부분은 flex-shrink:0 로 지정해준다.

이 부분은 계속 만들어보면서 감을 잡아야 할 것 같다.

 

끝 ......

어제 혼자 투썸플레이스 홈페이지 만드느라 낑낑 댔는데... 아직도 flex 이해가 부족한 것 같아서 일단 이번 주말은 다른 사이트의 헤더만 주구장창 클론 해봐야겠다.