웹페이지 페이지 여백 (브라우저와 콘텐츠 사이) 설정과 없애는 방법 html, body {margin: 0px; padding: 0px;}
웹페이지의 콘텐츠와 브라우저 가장자리와의 사이 여백을 없애거나 줄임으로써 노트북과 같은 휴대용 기기들에서 콘텐츠가 가리우는 것을 피할 수 있다.
1. 페이지 여백 설정 코드 추가하기
구글 블로그 템플릿에는, 그림에서 보듯이, 기본적으로 페이지 여백이 설정되어 있으므로, 브라우저를 줄여도 일정한 여백이 주어진다. 이러한 여백을 줄이려면 다음의 코드를 추가해 주면 된다. (추가하는 방법은 링크 페이지를 참조 : 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지)
기본적으로는 페이지 바디(body)의 여백을 설정하는 것이므로, body {margin: 0px; padding: 0px;}으로 하면 되지만, 브라우저에 따라서는 그렇게 하면 작동이 되지 않는 경우가 있으므로, 아래와 같이 html, body { ~~~} 로 적어 주는 것이 안전하다.
또 하나의 방법은 HTML 편집창에서 <body> 태그에 직접 설정해 주어도 된다.
2. HTML 편집창에서 원래의 여백코드 지우기
위에서와 같이 CSS코드를 추가하면, 페이지가 열릴 때, 먼저 원래의 코드에 설정된 여백으로 페이지가 열린 다음에, 추가한 CSS코드의 여백을 다시 적용하여 조정하게 된다.
따라서, 페이지가 열리는 속도가 아주 빠른 경우에는 눈깜작할 사이에 이루어지므로 알 수가 없지만, 인터넷 속도나 컴퓨터의 처리 속도 등이 느릴 경우에는 페이지 열리는 속도가 느리게 되고, 그려면, 페이지가 좌우로 "끄떡"하는 것을 볼 수 있다. 방문자로서는 눈에 거슬릴 수 있을 것 같다. 익스플로러와 파이어폭스에서는 그런 현상이 보이지 않는대 유독 크롬에서만 눈에 띄게 나타난다.
아예 여백을 없도록 하려면,
위에서와 같은 CSS코드를 추가하지 말고, 아래와 같이 페이지 여백설정 원래 코드를 삭제하면 된다. 이렇게 하면, 페이지가 열릴 때 옆으로 끄떡 하는 현상도 없어 좋다.
아래는 원래의 페이지 여백 태그 (padding)를 지우는 방법이다.
도움이 되기를 바랍니다.
1. 페이지 여백 설정 코드 추가하기
구글 블로그 템플릿에는, 그림에서 보듯이, 기본적으로 페이지 여백이 설정되어 있으므로, 브라우저를 줄여도 일정한 여백이 주어진다. 이러한 여백을 줄이려면 다음의 코드를 추가해 주면 된다. (추가하는 방법은 링크 페이지를 참조 : 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지)
html, body {margin: 0px; padding: 0px;}
기본적으로는 페이지 바디(body)의 여백을 설정하는 것이므로, body {margin: 0px; padding: 0px;}으로 하면 되지만, 브라우저에 따라서는 그렇게 하면 작동이 되지 않는 경우가 있으므로, 아래와 같이 html, body { ~~~} 로 적어 주는 것이 안전하다.
html, body {margin: 0px; padding: 0px;}
또 하나의 방법은 HTML 편집창에서 <body> 태그에 직접 설정해 주어도 된다.
<body margin="0">
2. HTML 편집창에서 원래의 여백코드 지우기
위에서와 같이 CSS코드를 추가하면, 페이지가 열릴 때, 먼저 원래의 코드에 설정된 여백으로 페이지가 열린 다음에, 추가한 CSS코드의 여백을 다시 적용하여 조정하게 된다.
따라서, 페이지가 열리는 속도가 아주 빠른 경우에는 눈깜작할 사이에 이루어지므로 알 수가 없지만, 인터넷 속도나 컴퓨터의 처리 속도 등이 느릴 경우에는 페이지 열리는 속도가 느리게 되고, 그려면, 페이지가 좌우로 "끄떡"하는 것을 볼 수 있다. 방문자로서는 눈에 거슬릴 수 있을 것 같다. 익스플로러와 파이어폭스에서는 그런 현상이 보이지 않는대 유독 크롬에서만 눈에 띄게 나타난다.
아예 여백을 없도록 하려면,
위에서와 같은 CSS코드를 추가하지 말고, 아래와 같이 페이지 여백설정 원래 코드를 삭제하면 된다. 이렇게 하면, 페이지가 열릴 때 옆으로 끄떡 하는 현상도 없어 좋다.
아래는 원래의 페이지 여백 태그 (padding)를 지우는 방법이다.
도움이 되기를 바랍니다.