아무런 설정도 하지 않은 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개가 각각 다른 숫자이기 때문에 줄여서 쓸 수 없다.
"HTML 파일의 여백 없애기"에 대한 응답 : 13개
몰랐어요~!!
넵!
이 외에도 CSS 기반으로 디자인하다보면 잘 인식하지 못했던 form 태그의 여백 때문에 고생하는 경우가 종종 있죠;; ^^
*
{
margin: 0;
padding: 0;
}
이 코드는 html을 포함한 모든 종속된
태그들이 초기화되는 universal selecter로
알고 있는데요 body에 주는 것과 *에 주는 것은 별 차이 없나요?
oldlovas:
제대로 알고 계시네요. 모든 태그들이 초기화 되지요/
p 태그 등은 기본적인 margin 을 가지고 있지요.
이런 모든 태그들이 초기화 되어 버리는 것이지요.;;
body에 주는것은 body만 초기화 되지요..
네, 동치미가 설명한 것이 맞습니다 :)
* 대신 body에 적용시키면 body만 적용 되고, *에 적용 시키면 html안의 모든 엘리먼트에 적용이 됩니다.
body * {
value
}
아 그럼 이제까지 제가 괜히 오버했네요.ㅎㅎ
저는 막
*, html, body
{
margin: 0;
padding: 0;
}
요렇게 했거든요.
[…] 쿠키의 삽질들을 본받아 나 또한 이것 저것 정리 해가는 습관을 가져보려 노력해 보아야겠다. […]
[…] HTML 파일의 여백 없애기 […]
감사감사
이렇게 쓰던 것을 스타일시트로 바꾸는게 왜 똑똑하고 예븐거죠?
그리고 왜 그게 구식 방법이죠?
님 멋대로?
님의 생각이 HTML의 표준이라고 착각하시는겁니까?
모든 HTML 파일에 일일히 마진 패딩 넣기
Vs.
CSS 파일에 한번 넣기
^^
구식 맞습니다. 해당 방법의 불편함때문에 외부 스타일 시트 방식이 있는것인데 외부 스타일시트로 쓰면 편한것을 “굳이” 인라인 스타일로 할 필요는 없죠?
zzzzzzzzzzzzzzzㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ