[CSS] 박스 모델 Box model

 

 

박스 모델 Box model

CSS에는 모든 요소가 박스 모양으로 구성되어 있습니다.

제 블로그 메인화면에서 크롬의 Develop Tools (shortcut: F12키)를 사용하여 웹페이지 구성을 살펴보겠습니다.

블로그 카테고리

블로그 카테고리가 박스로 표현되고, 각 카테고리 내에는 소카테고리도 박스로 구성되어 있습니다. 또한 가장 아래에는 귀여운 인스타그램 아이콘도 박스 안에 있습니다.

---

 

박스의 구조

각 박스는 아래와 같은 속성들 (properties)을 가지고 있습니다.

출처: developer.mozilla.org

• 콘텐츠 (Content) - 실제 콘텐츠 (아이콘, 텍스트, 이미지 등)이 표시되는 공간입니다.
• 패딩 (Padding) - 콘텐츠 주위를 둘러싼 빈 공간입니다.
• 테두리 (Border) - 콘텐츠와 패딩을 감싼 박스입니다.
• 마진 (Margin) - 박스와 다른 요소들과의 간격을 조정하는 제일 바깥쪽의 구조입니다.

 

---

콘텐츠 Content

아래와 같이 <div>를 세 개를 만들고 스타일을 지정해주지 않으면 각 <div>는 웹페이지 길이로 지정이 됩니다.

 <div id="box1">나는 첫번째 박스이다. +lorem ipsum </div> <div id="box2">나는 두번째 박스요! +lorem ipsum </div> <div id="box3">나는 박스 넘버 쓰리다. +lorem ipsum </div>

웹페이지 크기에 따라 바뀌는 박스의 길이 width

아래와 같이 <div>의 width를 지정해주면 길이(width)와 높이(height)를 지정해줄 수 있습니다.

div { width: 200px; height: 200px; }

width와 height를 지정해주지 않았을 때와 달리 웹페이지 길이와 상관없이 박스 사이즈(파란색 박스)가 200x200 픽셀인 것을 확인할 수 있습니다.

width, height 둘 다 200px로 지정해주었을때

 

---

 

패딩 Padding

박스 콘텐츠를 감싸는 여백 공간인 패딩은 콘텐츠 위, 아래, 왼편 오른편으로 영역이 네 군데가 있습니다.

출처: csssolid.com

패딩 영역의 사이즈를 지정하는 방식:

• padding: 100px; → 네군데 다 100px로 지정
• padding: 20px 100px; → 위, 아래 20px & 왼편, 오른편 100px로 지정
• padding: 50px 100px 80px; → 위 50px & 왼편, 오른편 100px & 아래 100px
• padding: 50px 10px 0px 80px; → 위, 오른편, 아래, 왼편 순으로 지정 (위부터 시작해 시계방향)

 

패딩 예제

---

테두리 Border

출처: developer.mozilla.org

테두리는 border 단축 속성을 이용하여 테두리의 두께, 스타일, 색의 값을 지정할 수 있습니다.

• border-width: 테두리 두께
• border-style: 테두리 스타일 (점선 등)
• border-color: 테두리 색

위 세 가지 값을 따로 설정해도 되지만 border:로 한꺼번에 설정도 가능합니다.

#box1 { background-color: #d8e2dc; border: 5px solid; } #box2 { background-color: #ffd7ba; border: 15px solid #b5838d; } #box3 { background-color: #fec5bb; border: 10px outset; }

테두리 다양한 스타일

 

---

마진 Margin

패딩과 마찬가지로 위, 아래, 왼편, 오른편 여백의 크기를 설정할 수 있습니다.

margin 값을 지정 안해준 &lt;div&gt; 3개

예시) 1. 왼쪽 편에만 10px 마진 설정, 2. 모든 면에 20px 마진 설정, 3. 위아래에만 50px 마진 설정

1. margin: 0px 0px 0px 10px; 2. margin: 20px 3. margin: 50px 0px;

마진을 설정한 예