이미지 보기

[CSS] 전통적인 웹 사이트 레이아웃 구조 만들기

21.07.05 작성

22.02.07 수정

읽는 데 4분

# 0. 들어가기

<header>, <aside>, <section>, <footer> 태그를 사용하여 설계 도면 작업을 진행한다.

# 1. 기본 여백 제거 및 공간 크기 설정

<html> 태그와 <body> 태그는 기본적으로 margin과 padding 속성을 가지고 있으므로 margin: 0; 과 padding: 0; 을 적용하여 여백을 제거한다.
공간의 크기를 임의로 설정한다.

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>기본 공백 제거</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <header></header>
    <aside id="left"></aside>
    <section></section>
    <aside id="right"></aside>
    <footer></footer>
  </body>
</html>

* css 파일

html, body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%
    height: 100px;
    background-color: yellow;
}

# left {
    width: 150px;
    height: 200px;
    background-color: blue;
}

section{
    width: 400px;
    height: 200px;
    background-color: orange;
}

# right {
      width: 200px;
      height: 200px;
      background-color: red;
  }

footer {
    width: 100%;
    height: 100px;
    background-color: black;
}

# 2. 공간 배치 작업

<aside id="left">, <section>, <aside id="right"> 공간에 대한 배치 작업
left의 파란색 박스에 대해 float: left; 속성을 부여해보자.

*css파일 # left {
  float: left;
  width: 150px;
  height: 200px;
  background-color: blue;
}

실행결과, 파란색 박스가 브라우저 왼쪽 끝에 위치하며 주황색 section 박스가 파란색 박스 아래로 위치하며 겹쳐진다.

만약 주황색 section 박스가 파란색 left 박스 왼쪽으로 바로 붙게 하고 싶다면?

*css파일 section {
  float: left;
  width: 400px;
  height: 200px;
  background-color: orange;
}

위처럼 주황색 section 박스에도 float: left; 속성을 적용한다.

빨간색 right 박스는 파란색 left 박스와 주황색 section 박스 뒤에 숨어 보이지 않는다. 이 빨간색 right 박스를 left/section 박스와 같은 선상의 오른쪽 끝에 배치하고 싶다면 float: right; 속성을 부여하면 된다.

*css파일 # right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: red;
}

이때 검은색 footer 박스는 float 속성이 없이 2차원 구조이므로 파란색 left 박스, 주황색 section 박스, 빨간색 right 박스의 뒤에 배치된다. 이 <footer> 태그를 <asdie>, <section> 공간 아래에 배치하고 싶다면 float 속성과 함께 사용되는 clear 속성을 적용한다.

*css파일 footer {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: black;
}

# 3. clear 속성값

clear 속성은 float 속성의 기능을 제어하는 데 사용된다.
속성값에는 left, right, both 등이 있다.

float: left 기능을 제어하고 싶다면 clear: left
float: right 기능을 제어하고 싶다면 clear: right
둘 다 제어하고 싶다면 clear: both
※ 일반적으로 both 속성값 사용

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] 전통적인 웹 사이트 레이아웃 구조 만들기

TOC

# 0. 들어가기

# 1. 기본 여백 제거 및 공간 크기 설정

# 2. 공간 배치 작업

# 3. clear 속성값