CSS에서 마진과 패딩은 <div>태그 만큼이나 많이 사용하는 스타일시트 속성입니다. 이들의 주된 역할은 <div>태그와 같은 블럭요소를 이용한 레이아웃에서 블럭의 경계선에 해당하는 border(테두리)와 컨텐트의 간격을 설정하거나 인근의 블럭요소와 의 간격을 설정해서 보기 좋은 레이아웃을 만드는데 있습니다. 블럭요소의 내부에 있는 컨텐트와 border와의 간격을 패딩이라고 하고 블럭요소간의 간격을 마진이라고 합니다.
우선 이들의 세부적인 내용을 알아보기 전에 이전 글에서 작업한 것을 보면 배경색도 이상하고 블럭요소간에 구분하기 위해서 설정한 테두리 색깔도 보기 좋지 않으므로 다 제거하고 CSS3에서 새롭게 나온 속성인 그림자(Shadow)효과와 박스의 모서리를 둥글게 할 수 있는 효과인 border-radius에 대해 알아보고 설정해 보겠습니다. 이 두가지 속성은 모든 브라우저에 적용되는 기능이어서 기초부분에서 소개해도 될것 같습니다. CSS3의 모든 속성이 대부분의 브라우저는 적용이 되지만 인터넷 익스플로러는 적용이 안되는 경우가 있어서 이를 적용되게끔 수정하는 핵(Hack)은 기초에서 다루기 어렵기 때문입니다.
이전글에서 진행한 것중에 테두리와 배경의 색상관련한 내용은 다 제거합니다.
그다음에 배경색을 넣어줍니다. 화면전체의 배경에 해당하는 body태그의 배경색은 #f2f2f2를 입력하고 나머지 헤더, 컨텐트, 사이드바, 푸터의 배경색은 흰색인 #fff를 입력합니다. 그리고나서 이 네가지 요소에 대하여 border-radius:15px; 을 입력해줍니다. 저장을 하고 웹브라우저에서 보면 body의 배경색은 옅은 회색이 되고 나머지 요소들의 색은 흰색이 되면서 각 요소의 모서리는 둥글게 됩니다. border-radius는 모서리의 반지름이 15픽셀만큼 둥글게 하는 효과입니다.
그다음에 바디태그를 제외한 4가지 요소에 대하여 box-shadow속성과 값을 입력합니다. box-shadow 속성의 처음나오는 값은 X방향으로, 두번째 값은 Y방향으로 그림자를 만드는 수치입니다. 여기서는 0으로 했으므로 어떤 방향으로 그림자가 만들어지지 않습니다. 하지만 세번째 값인 블러값으로 인해서 모든 방향에 그림자가 만들어집니다. 네번째 값은 스프레드인데 이것도 0으로 합니다. 색상은 중간회색인 #888888을 입력합니다. 저장을 하고 웹에서 보면 다음과 같이 나옵니다.
테두리에 그림자가 생기고 모서리가 둥글게 됐습니다. CSS3가 아니면 포토샵으로 이미지를 만들어서 작업해야하는 효과입니다. 그런데 여기서 또 원하지 않은 공간이 나오게 됩니다. 1의 공간은 안녕하세요라는 h1태그가 만들어내는 고유의 공간이고 2는 ul태그가 만들어내는 고유의 공간입니다. 이런 공간들은 블럭요소들이 가지고 있는 고유의 특성이라서 처음 스타일시트 작성할때 초기화(Reset)을 해주고 시작하는 것이 좋습니다. 즉 스타일시트에서 최상위에 * { margin:0; }을 입력해주면 저러한 공간은 없어집니다. 그런데 3은 ul태그가 있는데도 공간이 없습니다. 이것은 이전 글에서 float라는 속성을 이용해서 사이드바를 컨텐트 우측으로 보내는 작업을 했는데 float라는 속성이 들어가면 위 두개의 요소는 빈 공간에 뜨게 됩니다. 다음의 사진을 보면 알게됩니다.
wrapper태그에 대해서 border를 5픽셀 설정한 상황입니다. 원래의 의도대로라면 1의 테두리는 2까지 내려와서 컨텐트와 사이드바를 감싸야하는데 그냥 상단에 머물러 있습니다. 이것이 float로 인한 부작용입니다. 그래서 3의 푸터와 4의 래퍼는 5의 공간만큼 벌어져 있는 것이나 마찬가지라서 두 요소를 떨어트리기 위해 3의 푸터에 margin-top:10px; 을 설정해도 그대로 나오게 됩니다. 5의 공간이상의 수치를 줘야 비로소 벌어집니다. 이를 고치려면 스타일시트에서 #wrapper에 display: inline-block; 라는 속성과 값을 부여하면 됩니다.
이제부터 마진과 패딩을 이용하여 원하는 여유공간을 넣고 멋지게 레이아웃을 할 준비가 됐습니다.
div {
width:100px;
margin:20px;
padding:20px;
border:5px solid blue;
}
위 스타일시트의 코드는 위 그림으로 나타납니다. 어떤 컨텐트의 width가 100픽셀인데 여기에 패딩을 20픽셀 주게 되면 이 컨텐트는 140픽셀로 넓이가 늘어나고, border를 5픽셀 주면 총 넓이는 150픽셀로 늘어납니다. 다른 요소와의 간격인 margin을 20픽셀 주면 총 190픽셀로 늘어납니다. 1은 다른 요소가 위치하는 자리입니다. 위 코드를 스타일시트에 입력하고 div태그를 만들어 클래스 선택자를 적용하면 다음과 같이 나옵니다.
미니 웹사이트에서 실제로 적용하면서 이해하면 쉽습니다.
현재 웹페이지는 컨텐트영역에 글자가 꽉차게 나와서 패딩이 필요한 상태입니다. 스타일시트에서 컨텐트부분에 padding:20px;을 입력합니다. 그러면 앙쪽으로 20픽셀씩 늘어나므로 컨텐트의 원래 폭인 660픽셀을 더하면 700픽셀이 됩니다. 이것을 저장해서 웹에서 보면 사이드바가 아래로 내려갑니다. 그래서 사이드바의 width를 260픽셀로 줄여주면 사이드바는 원래의 위치로 돌아오고 폭은 줄어듭니다. 그러면 이번에는 sidebar에 padding:20px; 을 입력합니다. 이번에도 저장해서 보면 아래로 내려갑니다. 그래서 사이드바의 width를 220픽셀로 줄여주면 다시 원상태로 돌아옵니다.
컨텐트영역과 사이드바영역의 글자가 모든 면에서 20픽셀의 패딩이 만들어지면서 여유가 생겼습니다. 이번에는 마진을 입력해서 두개의 요소에 공간을 주도록합니다.
1처럼 두개의 요소가 벌어지면서 숨통이 트입니다. 그러면 래퍼가 헤더와 푸터사이에 있으므로 래퍼의 상단마진(margin-top)과 하단마진(margin-bottom)을 주면 공간이 생길것입니다.
스타일시트의 래퍼에 상하 마진을 20픽셀씩 주니 위아래에 공간이 생겼습니다. 위의 코드는 margin:20px 0; 으로 해도 같은 결과가 나옵니다. 다음 글에서는 마진과 패딩, border를 설정하는 방법을 알아보고 위 미니 웹사이트의 나머지 부분의 마진과 패딩을 정리해 보겠습니다. 마진과 패딩에 대해서 이해가 되신다면 혼자서 해보셔도 됩니다.
우선 이들의 세부적인 내용을 알아보기 전에 이전 글에서 작업한 것을 보면 배경색도 이상하고 블럭요소간에 구분하기 위해서 설정한 테두리 색깔도 보기 좋지 않으므로 다 제거하고 CSS3에서 새롭게 나온 속성인 그림자(Shadow)효과와 박스의 모서리를 둥글게 할 수 있는 효과인 border-radius에 대해 알아보고 설정해 보겠습니다. 이 두가지 속성은 모든 브라우저에 적용되는 기능이어서 기초부분에서 소개해도 될것 같습니다. CSS3의 모든 속성이 대부분의 브라우저는 적용이 되지만 인터넷 익스플로러는 적용이 안되는 경우가 있어서 이를 적용되게끔 수정하는 핵(Hack)은 기초에서 다루기 어렵기 때문입니다.
이전글에서 진행한 것중에 테두리와 배경의 색상관련한 내용은 다 제거합니다.
모서리 둥글게하기, 그림자효과 주기
그다음에 배경색을 넣어줍니다. 화면전체의 배경에 해당하는 body태그의 배경색은 #f2f2f2를 입력하고 나머지 헤더, 컨텐트, 사이드바, 푸터의 배경색은 흰색인 #fff를 입력합니다. 그리고나서 이 네가지 요소에 대하여 border-radius:15px; 을 입력해줍니다. 저장을 하고 웹브라우저에서 보면 body의 배경색은 옅은 회색이 되고 나머지 요소들의 색은 흰색이 되면서 각 요소의 모서리는 둥글게 됩니다. border-radius는 모서리의 반지름이 15픽셀만큼 둥글게 하는 효과입니다.
그다음에 바디태그를 제외한 4가지 요소에 대하여 box-shadow속성과 값을 입력합니다. box-shadow 속성의 처음나오는 값은 X방향으로, 두번째 값은 Y방향으로 그림자를 만드는 수치입니다. 여기서는 0으로 했으므로 어떤 방향으로 그림자가 만들어지지 않습니다. 하지만 세번째 값인 블러값으로 인해서 모든 방향에 그림자가 만들어집니다. 네번째 값은 스프레드인데 이것도 0으로 합니다. 색상은 중간회색인 #888888을 입력합니다. 저장을 하고 웹에서 보면 다음과 같이 나옵니다.
테두리에 그림자가 생기고 모서리가 둥글게 됐습니다. CSS3가 아니면 포토샵으로 이미지를 만들어서 작업해야하는 효과입니다. 그런데 여기서 또 원하지 않은 공간이 나오게 됩니다. 1의 공간은 안녕하세요라는 h1태그가 만들어내는 고유의 공간이고 2는 ul태그가 만들어내는 고유의 공간입니다. 이런 공간들은 블럭요소들이 가지고 있는 고유의 특성이라서 처음 스타일시트 작성할때 초기화(Reset)을 해주고 시작하는 것이 좋습니다. 즉 스타일시트에서 최상위에 * { margin:0; }을 입력해주면 저러한 공간은 없어집니다. 그런데 3은 ul태그가 있는데도 공간이 없습니다. 이것은 이전 글에서 float라는 속성을 이용해서 사이드바를 컨텐트 우측으로 보내는 작업을 했는데 float라는 속성이 들어가면 위 두개의 요소는 빈 공간에 뜨게 됩니다. 다음의 사진을 보면 알게됩니다.
wrapper태그에 대해서 border를 5픽셀 설정한 상황입니다. 원래의 의도대로라면 1의 테두리는 2까지 내려와서 컨텐트와 사이드바를 감싸야하는데 그냥 상단에 머물러 있습니다. 이것이 float로 인한 부작용입니다. 그래서 3의 푸터와 4의 래퍼는 5의 공간만큼 벌어져 있는 것이나 마찬가지라서 두 요소를 떨어트리기 위해 3의 푸터에 margin-top:10px; 을 설정해도 그대로 나오게 됩니다. 5의 공간이상의 수치를 줘야 비로소 벌어집니다. 이를 고치려면 스타일시트에서 #wrapper에 display: inline-block; 라는 속성과 값을 부여하면 됩니다.
모든요소에 마진, 패딩, 보더의 기본값을 초기화했으며 wrapper에
display: inline-block; 라는 속성을 적용했더니 다음과 같이 나옵니다.
이제부터 마진과 패딩을 이용하여 원하는 여유공간을 넣고 멋지게 레이아웃을 할 준비가 됐습니다.
마진(Margin)과 패딩(Padding) 테두리(border)의 관계
div {
width:100px;
margin:20px;
padding:20px;
border:5px solid blue;
}
위 스타일시트의 코드는 위 그림으로 나타납니다. 어떤 컨텐트의 width가 100픽셀인데 여기에 패딩을 20픽셀 주게 되면 이 컨텐트는 140픽셀로 넓이가 늘어나고, border를 5픽셀 주면 총 넓이는 150픽셀로 늘어납니다. 다른 요소와의 간격인 margin을 20픽셀 주면 총 190픽셀로 늘어납니다. 1은 다른 요소가 위치하는 자리입니다. 위 코드를 스타일시트에 입력하고 div태그를 만들어 클래스 선택자를 적용하면 다음과 같이 나옵니다.
미니 웹사이트에서 실제로 적용하면서 이해하면 쉽습니다.
현재 웹페이지는 컨텐트영역에 글자가 꽉차게 나와서 패딩이 필요한 상태입니다. 스타일시트에서 컨텐트부분에 padding:20px;을 입력합니다. 그러면 앙쪽으로 20픽셀씩 늘어나므로 컨텐트의 원래 폭인 660픽셀을 더하면 700픽셀이 됩니다. 이것을 저장해서 웹에서 보면 사이드바가 아래로 내려갑니다. 그래서 사이드바의 width를 260픽셀로 줄여주면 사이드바는 원래의 위치로 돌아오고 폭은 줄어듭니다. 그러면 이번에는 sidebar에 padding:20px; 을 입력합니다. 이번에도 저장해서 보면 아래로 내려갑니다. 그래서 사이드바의 width를 220픽셀로 줄여주면 다시 원상태로 돌아옵니다.
컨텐트영역과 사이드바영역의 글자가 모든 면에서 20픽셀의 패딩이 만들어지면서 여유가 생겼습니다. 이번에는 마진을 입력해서 두개의 요소에 공간을 주도록합니다.
컨텐트 부분의 스타일시트에 마진을 입력합니다. 오른쪽 부분만 주면 되므로 margin-right라는 속성을 사용합니다. 사이드바에서 너무 줄였으니 이번에는 컨텐트에서 width를 줄입니다.
1처럼 두개의 요소가 벌어지면서 숨통이 트입니다. 그러면 래퍼가 헤더와 푸터사이에 있으므로 래퍼의 상단마진(margin-top)과 하단마진(margin-bottom)을 주면 공간이 생길것입니다.
스타일시트의 래퍼에 상하 마진을 20픽셀씩 주니 위아래에 공간이 생겼습니다. 위의 코드는 margin:20px 0; 으로 해도 같은 결과가 나옵니다. 다음 글에서는 마진과 패딩, border를 설정하는 방법을 알아보고 위 미니 웹사이트의 나머지 부분의 마진과 패딩을 정리해 보겠습니다. 마진과 패딩에 대해서 이해가 되신다면 혼자서 해보셔도 됩니다.
Project (3).zip
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
