HTML 파일의 여백 없애기

html_body

아무런 설정도 하지 않은 HTML 파일에서는 기본적으로 사방에 여백이 생긴다.

(하늘색 네모 영역)
예전 혹은 기존의 markup에서는, HTML 파일의 body에 다음과 같은 태그를 적어주는 방법을 많이 사용해왔다.

<body topmargin="0"  leftmargin="0" marginwidth="0" marginheight="0">

지금도 이렇게 쓰고 있는 곳들이 꽤 많다.

똑똑하고 예쁘게 코딩하려면 다음과 같이 바꾸어 주면 된다.

CSS를 사용해서 body에 있는 여백을 없애준다.
여백은 margin, padding 두 가지 종류가 있으므로 둘 다 0으로 리셋해준다.

<head>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
</style>
</head>

head안의 style 부분에 적어주거나, 사용하는 CSS파일에 적어준다.

혹시 아래처럼 HTML파일 안에서 배경색을 지정하고 있다면, 

body {
    background-color: #F30;
}

앞서 설정한 여백 뒤에 오도록 넣어주면 된다.

body {
    margin: 0;
    padding: 0;
    background-color: #F30;
}

덧붙여서,
여기서의 색상값 #F30은 #FF3300과 같은 의미 이다.
두 자리씩 잘라서 합쳐줄 수 있다.

ex)
#FF3300 -> #F(F)3(3)0(0)
#FFFFFF -> #FFF
#FF1493 – 이것은 앞의 두개가 중복된다고 해도 그 뒤의 4개가 각각 다른 숫자이기 때문에 줄여서 쓸 수 없다.