헤더 css 넣어주기

 

css를 넣어줄 헤더 html 코드는 아래와 같다..

  <header class="welcome-header">

    <h1 class="welcome-header__title">Welcome to Kokoa Clone</h1>

    <p class="welcome-header__text">

      If you have a Kokoa Account, log in with your email or phone number.

    </p>

  </header>

 

그리고 02페이지에서의 헤더는 아래의 모양이다. 

 

헤더 CSS의 목표

 

1. Welcome h1 멘트 가운데 정렬 

2. if you~ p 멘트 역시 가운데 정렬 후 회색 (여기선 opacity 0.7로 표현했다)

3. h1 멘트와 p 멘트 사이에 마진 주기

 

뭐니뭐니 해도 중요한 것은 수직으로 가운데 정렬 한 것이다 . 

.welcome-header {

  margin: 90px 0px;             /* 헤더 자체에 위아래 마진을 동일하게 90씩 주었다. */

  text-align: center;

  display: flex;                      /* 일단 한줄로 정렬 시킨다 */

  flex-direction: column;      /* 정렬을 수직으로 하기위해서 column 기준으로 flex 다이렉션을 주었다 */

  align-items: center;          /* 수직으로 정렬된 아이템을 정중앙에 놓기 위해서 */

}

.welcome-header__title {

  margin-bottom: 20px;             /* h1과 p 사이에 마진 주기 */

  font-size: 25px;

}

.welcome-header__text {

  width: 60%;                       /* 한 문단의 크기를 제한을 주었다 (아니면 긴 하나의 문장으로 펼쳐지니까) */

  opacity: 0.7;                      /* opcity로 회색으로 폰트색 조정 */

}

 

css 코드는 위와 같다.