티스토리 뷰
마진(margin) - 테두리(border) - 패딩(padding) 이란?
RunningWater 2017. 12. 27. 12:24오늘 배울 것은 마진과 보더 그리고 패딩입니다.
테두리는 직관적으로 쉽게 이해가 가실테지만 마진과 패딩에 대해서는 헷갈리는 분들이 많으실 겁니다.
우선 마진은 엘리먼트와 엘리먼트의 사이 여백을 뜻합니다. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지는 것입니다. 그리고 테두리는 말 그대로 엘리먼트의 경계선을 나타냅니다. 컨텐츠는 우리가 실제로 태그 사이의 쓴 글 등이 나타나는 부분입니다. 그리고 패딩은 테두리와 컨텐츠 사이에 있는 여백을 나타내는 말입니다.
한 개의 엘리먼트가 있어도 바깥쪽부터 안쪽까지 마진-보더-패딩-컨텐츠라는 네 부분으로 구성됩니다.
코드를 작성하면서 어느 공간을 넓히거나 좁힐 때 그 부분이 정확히 어느 부분인지 파악하는 것이 중요합니다. 다른 엘리먼트와의 거리인지 아니면 컨텐츠와 테두리 사이의 공간인지 제대로 파악하지 못하면 정확히 수정하지 못하겠죠 ?
이제는 예시를 보며 더 정확히 이해해 보도록 하겠습니다.
<head> <title>마진,보더,패딩</title> <style> div{ font-size: 32px; width: 400px; text-align: center; padding: 30px; margin: 30px; } body div:first-child{ border: 1px solid green; } body div:last-child{ border: 1px solid blue; } </style> </head> <body> <div>div-1</div> <div>div-2</div> </body>
위의 소스코드를 <html>태그 안에 넣어주세요. <div>태그에 css로 font-size나 text-align, width 값들을 준 이유는 좀 더 시각적으로 구분하기 편해서 입니다. 지난 시간의 복습겸으로 다른 값들을 넣으셔도 상관없습니다.
우선은 border(테두리)에 주목해주세요. 각각의 <div>태그를 구분하기 위해 border 값에 다른 색상을 주었습니다. css 속성의 경우 어떤 속성들은 축약형이 존재 합니다. 1px solid blue는 테두리의 두께와 형태, 색깔을 한번에 준 것입니다.
border: 1px solid blue; 는 border-width: 1px; border-style: solid; border-color: blue; 처럼 따로 값을 줄 수 있습니다.
그리고 각 <div>태그에 마진과 패딩값으로 30px을 주었습니다. 패딩값은 화살표처럼 30px이 된 것을 볼 수 있겠지만, 각 엘리먼트의 사이의 여백을 나타내는 마진 값은 각각 30px씩을 주었는데도 둘 사이의 거리가 60px이 아니라 30px인 것을 주목해 주세요. 이것을 마진겹침 현상이라고 합니다.
위 아래에 있는 엘리먼트(좌우는 마진겹침이 일어나지 않습니다.) 서로가 마진값을 가지고 있을 때 더 큰 쪽의 마진값만 적용되는 것을 마진겹침 현상이라고 합니다.
예를 들면 밑의 <div>태그의 위 쪽 마진값이 40px이 된다면, 마진겹침현상으로 인해 두 엘리먼트의 사이가 30px에서 40px로 늘어나는 것입니다. 하지만 20px로 바꾼다면 똑같이 30px로 유지되는 것이죠.
마진과 보더 패딩이 이제 무엇인지 이해가 가시나요? 마지막으로 마진값과 패딩값을 주는 방법을 알아보겠습니다.
소스코드를 보시면, margin: 30px; 이라고 값을 주었습니다. 이는 상하좌우 모두 30px이라는 값을 준 것입니다. 나름의 축약형이죠. 각 방향에 마진값을 다르게 주고 싶다면 방향을 붙이면 됩니다.
margin: 30px;은 margin-top:30px; margin-right:30px; margin-bottom: 30px; margin-left: 30px; 과 똑같은 의미입니다.
패딩도 위와 같은 형태로 값을 줄수 있습니다. margin 대신에 padding이라고 적으시면 됩니다. 위와 같은 형태 뿐만 아니라 margin: 30px 20px; 같은 형태도 볼 수 있습니다. 이건 상하에는 30px 좌우에는 20px이라는 마진값을 주겠다는 의미입니다. 그럼 margin: 30px 20px 10px;처럼 값을 세 개 준다면 어떤 의미일까요? 위쪽은 30px, 오른쪽은 20px, 아래쪽은 10px이라는 값을 준 것입니다. 시계방향이라는 것을 기억해주세요!
margin: 20px; (상하좌우에 마진값을 20px)
margin: 20px 30px; (마진값이 상하에는 20px, 좌우에는 30px)
margin: 20px 30px 10px; (마진값이 위엔 20px, 오른쪽엔 30px, 아래쪽엔 10px)
margin: 20px 30px 10px 20px(위엔 20px, 오른쪽엔 30px, 아래쪽엔 10px, 왼쪽엔 20px)
패딩도 똑같습니다. margin 대신에 padding을 집어 넣으면 바뀌는걸 볼 수 있습니다. 값을 3개 이상주면 시계방향으로 돌아간다는 것을 기억하시면 됩니다.
길었지만 이렇게 또 큰 산을 하나 넘었습니다. 다음시간엔 css속성 중에 display와 플렉스박스에 대해서 배워보겠습니다.
질문이 있으시면 댓글에 남겨주세요.
공감은 제작자에게 큰 힘이 됩니다. ^__^
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| flex의 컨테이너 (0) | 2017.12.31 |
|---|---|
| display 속성과 flexbox (1) | 2017.12.28 |
| 자주 사용하는 css의 속성들 (0) | 2017.12.25 |
| 캐스캐이딩의 개념과 css 사용하기 (0) | 2017.12.24 |
| CSS 소개와 CSS 선택자 (6) | 2017.12.18 |