잠 깐 만 요
<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; }