왼쪽 파트는 display: fixed로 고정하고 오른쪽 파트는 스크롤할 수 있게 만든다. navigation bar가 최상단에 들어간다.
html
<body>
<header class="header">
<a href="#" class="logo"></a>
<ul></ul>
<div class="toggle"></div>
</header>
<main class="inner">
<div class="left"></div>
<div class="right"></div>
</section>
</body>body 는 header 와 main로 나눈다. logo와 navigation bar 그리고 toggle이 들어갈 header 안에 a 와 ul 를 넣고 main 안에는 left 와 right를 넣는다.
<ul>
<li>
<a href="#home" class="nav__bar"><i class="fas fa-home"></i></a></li>
<li>
<a href="#about" class="nav__bar"><i class="fas fa-arrow-left"></i></a></li>
<li>
<a href="#history" class="nav__bar"><i class="fas fa-circle-notch"></i></a></li>
<li>
<a href="#willbe" class="nav__bar"><i class="fas fa-arrow-right"></i></a></li>
</ul>ul 안에 li 를 만들고 li 안에 a 태그를 a 태그 안에 font Awesome 에서 가져온 i 를 넣는다.
<div class="left">
<h1></h1>
<h3></h3>
</div>left에는 인사와 간단한 소개가 들어갈 것이니 가볍게 h1 과 h3를 넣는다.
<div class="right">
<section class="content">
<div class="wrapper">
<img src="" alt="">
<div class="content__header"></div>
</div>
</section>
</div>right 에서 한 섹션은 content 하나다. 그 안에는 wrapper 가 있고 wrapper 는 img와 텍스트가 들어갈 content__header 를 담고 있다. content를 원하는 만큼 복사한다. 얼추 끝났다 이제 css 부수러 가자.
프론트엔드 개발