레이아웃을 구성하는 CSS 박스 모델 3 - 여백을 조절하는 속성

이제 마진에 대한 학습을 진행해 본다. 두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 한다. 마진과 패딩은 웹 문서에서 여러 가지 요소를 배치할 때 자주 쓰이는 속성이므로 꼭 기억해두어야 한다.

바로 학습을 진행해본다.

---

 

 

 

 

1. 요소 주변의 여백을 설정하는 margin 속성

마진은 요소 주변의 여백을 의미한다. 마진을 이용하면 요소와 요소 사이의 간격을 조절할 수 있다.

margin: <크기> | <백분율> | auto

 

---

 

 

 

margin 속성으로 여백 설정하기

 

 

개발자 모드에서 보면 마진값이 잘 들어가 있음을 확인할 수 있다.

---

 

 

 

 

2. margin 속성을 사용하여 웹 문서를 가운데 정렬하기

margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 내비값이 정해져 있어야 한다. 그리고 margin-left와 margin-right의 속성값을 auto로 지정한다. 이렇게 하면 CSS는 웹 브라우저 화면의 너비에서 요소 너비값을 뺀 나머지 영역을 좌우 마진으로 자동 계산한다.

 

 

웹 문서 전체를 웹 브라우저 화면 중앙에 배치하기

 

 

웹 문서가 브라우저 중앙에 배치되었다. 전에는 늘 왼쪽에 있어서 보기가 불편했는데, 이렇게 하니 가독성도 좋고 정말 마음에 든다.

---

 

 

 

 

3. 마진 중첩 이해하기

박스 모델에서 마진을 지정할 때 주의해야 할 것이 있다. 요소를 세로로 배치할 경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹치는 문제이다. 이런 현상을 마진 중첩 또는 마진 상쇄라고 한다.

예를 들어 나래와 같이 <div> 태그를 사용한 박스 영역 3개가 있다고 생각하자. 각각 박스 영역의 margin 속성값을 30px로 지정했다면 결과는 어떤 모습일까?

 

 

이러한 결과를 예상할 것이다. 하지만 실제로는 다른 결과가 나타난다.

---

 

 

마진 중첩 이해하기

 

가운데 마진이 60px이 아닌 각각 30px로 적용이 되었다.  그 이유는 아래 마진과 위 마진이 서로 만날 때 큰 마진값으로 합쳐지기 때문이다.

---

 

 

 

 

4. 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 테두리 안쪽의 여백이라고 생각하면 된다. 패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같다.

 

다양하게 패딩 지정하기

 

 

마진 범위

 

패딩 범위

 

이렇게 마진과 패딩을 확인해 볼 수 있다.

---

 

 

 

 

DO IT 실습 - 박스 모델 영역에 여백 추가하고 중앙에 배치하기

이전 실습에서 테두리를 그렸던 박스 모델 영역에 패딩과 마진 등을 추가하여 보기 좋게 바꿔보겠다.

 

1단계 : HTML 파일 열고 확인하기

 

이 문서를 보면 영역과 테두리, 내용 사이가 바짝 붙어있다. 이 부분을 수정하게 될 것이다.

---

 

 

 

2단계 : 패딩과 마진으로 여백 주기

---

 

 

 

3단계 : 모서리 둥글게 처리하기

---

 

 

 

4단계 : 문서 전체를 화면 중앙에 배치하기

문서 전체를 감싸고 있는 영역의 좌우 마진을 auto로 지정하면 된다. 먼저 css 문서에 있는 #container 스타일에 margin 속성을 추가한 후 저장한다. 이를 위해서는 반드시 #container의 너비값이 저장되어 있어야 함을 기억하자.

 

 

 

마진과 패딩이 잘 적용이 되어 예쁘게 보인다. 문서도 가운데 정렬이 되어 있고.

---

 

 

 

 

학습을 마치고

벌써 12시가 다 되어 간다. 이제 슬슬 잠이 오지만 1시간 반 정도는 더 공부를 하다 취침하려고 한다. 오늘 박스 모델까지는 다 공부를 하고 내일은 온라인 수업도 듣고 다음 학습을 진행해 볼 수 있을 테니까.

조금 전에 수업 내용을 복습했던 내용이 이제 이해가 되었다.