더북(TheBook)

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;
}

 

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