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

사전작업

코드 작업에 앞서 디폴트 값을 제거하기 위해 아래와 같이 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>

주요 구현내용

1. 상단에 header 고정시키기