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

     

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