HTML 파일의 여백 없애기
아무런 설정도 하지 않은 HTML 파일에서는 기본적으로 사방에 여백이 생긴다.
(하늘색 네모 영역)
예전 혹은 기존의 markup에서는, HTML 파일의 body에 다음과 같은 태그를 적어주는 방법을 많이 사용해왔다.
1 | <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> |
지금도 저렇게 쓰고 있는 곳들이 꽤 많다.
똑똑하고 예쁘게 코딩하려면 다음과 같이 바꾸어 주면 된다.
1 2 3 4 | body { margin: 0; padding: 0; } |
head안의 style 부분에 적어주거나, 사용하는 CSS파일에 적어준다.
ex)
1 2 3 4 5 6 7 8 | <style type="text/css"> <!-- body { margin: 0; padding: 0; } //--> </style> |
혹시 배경색을 이런식으로 HTML파일 안에서 지정하고 있었다면,
1 2 3 | body { background-color: #F30; } |
여백 설정과 배경색 설정을 함께 예쁘게 쓰려면, 위의 두가지를 합쳐서 적으면 된다.
1 2 3 4 5 | body { margin: 0; padding: 0; background-color: #F30; } |
덧붙여서,
여기서의 색상값 #F30은 #FF3300과 같은 의미 이다.
두 개씩 잘라서 합쳐줄 수 있다.
ex)
#FF3300 -> #F(F)3(3)0(0)
#FFFFFF -> #FFF
#FF1493 – 이것은 앞의 두개가 중복된다고 해도 그 뒤의 4개가 각각 다른 숫자이기 때문에 줄여서 쓸 수 없다.
(+)
당연히 사용해온 사소한 것들에 대해 조금씩 적어 보기로 했다.
가끔씩 너무 당연하거나 간단한 글이 올라와도 황당해 하지 말고 그냥 읽도록 하자. =.=)~
몰랐어요~!!
넵!
이 외에도 CSS 기반으로 디자인하다보면 잘 인식하지 못했던 form 태그의 여백 때문에 고생하는 경우가 종종 있죠;; ^^
추가 보충하자면…
#FF3300 or #F30
R: F(F)
G: 3(3)
B: 0(0)
*
{
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 파일의 여백 없애기 [...]