모두의 HTML5 & CSS3: 2 박스 모델의 4가지 요소

slide 1 of 17, currently active
slide 2 of 17
slide 3 of 17
slide 4 of 17
slide 5 of 17
slide 6 of 17
slide 7 of 17
slide 8 of 17
slide 9 of 17
slide 10 of 17
slide 11 of 17
slide 12 of 17
slide 13 of 17
slide 14 of 17
slide 15 of 17
slide 16 of 17
slide 17 of 17

icon_038 잠 깐 만 요

<html>과 <body> 태그의 초기화 작업

다음 코드에 대한 결과를 살펴보면 브라우저와 노란색 박스 상단과 왼쪽에 미세한 공백이 보입니다. <html>과 <body> 태그는 기본적으로 margin 속성과 padding 속성을 갖고 있기 때문에 지금처럼 미세한 공백이 생깁니다.

<div>
    <span>Hello World</span>
</div>

div {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

이 공백을 없애려면 <html>과 <body> 태그의 margin과 padding 속성값을 0으로 설정해야 합니다. CSS 언어에서 0은 단위를 생략해서 입력할 수 있습니다.

/* 쉼표(,)는 and의 의미를 담고 있으며, <html>과 <body> 태그에 margin: 0 속성과 padding: 0 속성을 적용하겠다는 뜻입니다. */
html, body {
    margin: 0;
    padding: 0;
}

div {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.