자기소개 페이지 만들기(2) header 구현

Somi·2021년 5월 5일

Project #1 자기소개 페이지

목록 보기

2/6

사전작업

코드 작업에 앞서 디폴트 값을 제거하기 위해 아래와 같이 margin, padding, text-decoration등을 없애는 작업을 했다. 특히 a 태그의 경우 text-decoration: none;으로 밑줄이 제거가 되질 않아 a:link, a:visited, a:hover를 사용해서 없애줬다.(왜일까..?)

body,div,span,h1,h2,h3,h4,h5,h6,header,
section,footer,nav,img,form,figcaption,figure,i,p {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a:link {
  color: red;
  text-decoration: none;
}
a:visited {
  color: black;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}

레이아웃 구현

앞서 작성한 레이아웃 구성을 참고하여 코드는 아래와 같이 짜보았다.

    <header class="grid">
        <h1 class="title"><a href="index.html">Somi Hwang</a></h1>
        <nav></nav>
        <div class="icons"></div>
    </header>
    <main class="scroll_container">
        <div id="section1" class="content_box">
        </div>
        <div id="section2" class="content_box">
        </div>
        <div id="section3" class="content_box">
        </div>
        <div id="section4" class="content_box">
        </div>
    </main>
    <footer></footer>

주요 구현내용

position: fixed를 통해 상단에 헤더를 고정시킬 수 있었는데, fixed를 사용할 경우 아래 본문의 내용 상단이 header의 높이 만큼 가려져 본문에 padding-top을 줬어야 했다.
구글 검색을 해보니 position: sticky라는 속성을 통해서 이러한 문제를 해결할 수 있음을 발견했다!
참고 블로그: https://juahnpop.tistory.com/182

(수정: 처음에 display: sticky를 사용했는데, 그렇게하면 section이 header아래에서 시작하게 된다는 걸 깨달았다. 그래서 최종 페이지에는 다시 display: fixed로 바꿔서 적용했다.)

2. header의 메뉴 가로로 나열하기

display: inline을 통해 nav와 icons의 li를 가로로 정렬할 수 있게 되었지만, 코드펜 작업창에서도 볼 수 있듯이 창이 작아지면 이 항목들이 세로정렬이 된다는 문제점을 발견했다.

3. 특정 창 크기에 메뉴 세로정렬하기

처음에는 창 크기가 작아지면 메뉴가 사라지고 아이콘이 등장하는 것을 목표로 했으나 js 기능이 필요해질 것 같아 title, nav, icons를 3행으로 세로 정렬하는 것으로 바꾸었다.
이를 위해 미디어쿼리를 사용하여 특정 창 크기 이하가 되면 display: flex와 flex-direction: column을 이용하여 세로로 정렬되게끔 조정하였다.