CSS3 margin padding
■ 웹 문서를 만들 때 전체적인 구조나 디자인이 중요하고 이것들을 배치할 때 서로 간의 간격을 적절히 유지하는 게 웹 문서의 전체적인 분위기를 좌우하게 되고, 요소 간의 적당한 간격은 가독성에도 많이 도움이 되는데요. 각 요소의 간격을 조절해주는 게 margin과 padding 입니다. 이 두 속성에 대해서 알아보도록 할게요.
■ 먼저 padding과 margin이 뭔지 확실하게 이해하기 위해서 그림을 하나 보겠습니다.
■ 이 그림은 현재 본문에 <div>박스를 하나 만들고 그 안에 이미지를 하나 넣은 상태 인데요. <div>의 테두리를 검은색 실선으로 처리했습니다. 이때 테두리를 기준으로 바깥쪽 그러니까 박스와 웹 브라우저와의 거리가 [margin] 입니다. 그리고 박스 안쪽에 있는 이미지와의 거리가 [padding] 입니다. 이 값들을 바꿔가면서 박스와 이미지의 거리가 어떻게 움직이는지 확인해볼게요.
■ 아직 margin이나 padding 값은 전혀 넣지 않고 박스를 하나 만들고 그 안에 이미지를 하나 넣었습니다. 그리고 박스 배경색과 border 속성만 설정한 상태입니다.
■ 이렇게 margin과 padding이 전혀 설정되지 않은 기본 상태로 나타나게 되는데요. 값을 하나씩 넣어보겠습니다. 먼저 박스 (div)와 웹 브라우저와의 거리를 적당히 떨어뜨리겠습니다. margin이 되겠죠? id="aaa"에 margin 값을 입력해보겠습니다.
■ margin : 값 4개 ;를 입력했는데요. 이때 순서대로 위쪽, 오른쪽, 아래쪽, 왼쪽의 거리가 됩니다. 값을 하나만 입력하면 4면이 모두 똑같은 값이 적용되구요. 두 개만 입력한다면 첫 번째가 위와 아래, 두 번째 값이 오른쪽과 왼쪽의 거리가 됩니다. 이 부분은 padding도 똑같이 적용되니까 참고하셔요. 예제에서는 50, 100, 50, 100을 입력했지만, 줄여서 50px 100px 값 두개만 입력해도 같은 값이 되겟죠?
■ 그리고 어느 한쪽만 margin값을 주고 싶다면 margin-top: 값, margin-right : 값;, margin-bottom, margin-left 속성을 이용해서 한쪽만 margin값을 줄 수 있습니다. 위 예제의 결과를 보겠습니다.
■ 이렇게 박스와 웹 브라우저의 간의 거리가 지정해준 값만큼 멀어지게 되는것이 margin 입니다.
다음은 padding값을 이용해서 박스 안에서 그림의 위치를 지정해볼게요.
■ img의 스타일 속성값 중에서 padding-left : 100px값을 지정햇는데요. margin에서 설명드렸듯이 한 쪽 부분 (왼쪽)만 padding값을 설정했습니다. 어떻게 출력되는지 보죠.
■ 이렇게 테두리와 이미지와의 거리가 지정해준 값(100px) 만큼 떨어지게 됩니다.그럼 이번에는 위쪽을 떨어뜨려 볼까요. 같은 방법으로 padding-top값을 설정하겠습니다.
■ padding-top 값을 150px 로 설정해봤습니다. 아래와 같은 결과값이 나오는게 당연하겠죠?
■ 이렇게 해서 margin과 padding에 대해서 알아봤는데요. margin 부분에서 설명 했듯이 padding도 값을 하나만 설정하면 네 방향 모두의 값이 되고, 두 개만 표시한다면 첫 번째는 위, 아래 두 번째는 왼쪽 오른쪽 값이 됩니다. 물론 네 방향 모두 다른 값을 설정할 수도 있습니다. 직접 테스트 해보시길 바래요. ㅎ 수고하셨습니다.
