HTML5 기본 레이아웃 만들기

HTML5 기본 레이아웃은 기본적으로 최상단에는 header 태그를 사용하고 최하단에는 footer 태그를 사용합니다. 그 사이에는 핀터레스트와 같은 레이아웃으로 제작하거나 생활코딩과 같이 왼쪽에는 aside 태그를 사용하고 나머지는 content로 정보가 오게 하는 레이아웃으로 제작할 수 있습니다.

추천 글: HTML 레이아웃 잡는 2가지 방법

목차


레이아웃 구성

오늘은 생활코딩 레이아웃을 만들어보겠습니다. 레이아웃 구성은 다음과 같습니다.

HTML5 기본 레이아웃
  1. 웹 사이트의 전체 제목이며 링크가 걸려있습니다. 링크를 클릭하면 초기 화면으로 돌아갑니다.
  2. 왼쪽에는 수업의 목차를 적고 링크가 걸려있습니다. 링크를 클릭하면 콘텐츠가 오른쪽에 표시됩니다.
  3. 오른쪽 위에는 목차의 제목이 표시되고 본문에는 제목에 대한 자세한 설명이 표시됩니다.
  4. 오른쪽에는 ‘설명 색상 변경’ 버튼이 있습니다. 클릭하면 설명 영역에 있는 색상이 바뀝니다.

코드 다운받기


코드 설명

HTML5 기본 레이아웃에 대한 코드를 살펴보겠습니다.


HTML

목록 태그와 링크 태그를 만들었고 버튼에 id 값을 mainBtn으로 넣었고 그 버튼을 누르면 실행됩니다.

<aside>
 <h2>목차</h2>
 <ul>
  <li><a href="html.html">HTML</a></li>
  <li><a href="css.html">CSS</a></li>
  <li><a href="javascript.html">JavaScript</a></li>
 </ul>
</aside>
<button id="mainBtn">설명 색상 변경</button>

CSS

aside 태그와 클래스 container에는 float를 통해 20%, 80%의 비율로 나눴습니다. 또한, ‘설명 색상 변경’ 버튼은 body 태그를 기준으로 가운데에 위치하도록 했습니다.

body{
 position:relative;
}

aside{
 float: left;
 background-color: #c0eb75;
 width: 20%;
 height: 300px;
}

main .container{
 float: left;
 background-color: #ffe066;
 width: 80%;
 height: 300px;
 text-align: left;
}

main button{
 position: absolute;
 top: 50%;
 right: 0;
}

클래스 container에 새로운 클래스 active가 선택될 때 배경과 글씨 색상이 바뀌도록 합니다. 이는 JavaScript에서 active 클래스를 생성할 수 있습니다.

main .container.active{
 color: #fff;
 background-color: #868e96;
}

JavaScript

버튼을 클릭했을 때 클래스 container의 배경과 글씨가 바뀌는 기능을 구현해보도록 하겠습니다.

먼저 버튼에 있는 id 값 mainBtn과 배경과 글씨 색상을 바꿀 클래스 container를 가져오겠습니다.

const button = document.querySelector("#mainBtn");
let container = document.querySelector(".container");

handleColor 함수를 만들고 클래스 container의 배경과 글씨 색상을 바꾸는 것이기 때문에 필요한 건 클래스 active 생성과 버튼을 클릭할 때마다 배경과 글씨 색상이 바뀌어야 합니다. 이를 코드로 작성하면 다음과 같습니다.

handleColor = () =>{
 if(container.classList[1] !== "active"){
  container.classList.add("active");
 }else if(container.classList[1] === "active"){
  container.classList.remove("active");
 }
};

button.addEventLisener("click", handleColor);

Leave a Comment