CSS - 박스모델(Box Model)

border, padding, margin

◼︎ 박스모델 : 모든 HTML 요소는 박스 형태로 되어 있음.

- 박스모델 요소 : 콘텐츠를 둘러싸고 있는 패딩, 마진, 경계선

- 레이아웃 : 요소들을 화면에 배치하는 것

h3 {

    border: solid 5px blue;

    padding: 20px;

    margin: 30px;

}

<h3>What is WEB?</h3>

<p>웹(WEB)은 거미줄을 뜻하는 말로 WWW(World Wide Web)의 약어입니다.<br>

  - 인터넷과 웹 브라우저를 통해 사용자에게 정보를 제공하고 서로 소통하게 해줍니다.<br>

  - 웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹 프로그래머가 있습니다.<br></p>

◼︎ 박스모델 요소

- 콘텐츠 : 텍스트, 이미지, 동영상 등 HTML 본문 요소

- 경계선 : 콘텐츠를 둘러싼 경계를 나타내는 선

- 패딩 : 경계선과 콘텐츠 사이의 간격

- 마진 : 경계선과 외부 요소 사이의 간격

---

◼︎ 경계선(border) 그리기

border(속성) : 값1(경계선 스타일) 값2(경계선 두께) 값3(경계선 색상);
border : solid 5px #e1285a;
 
- 경계선 스타일 : solid(실선), double(이중실선), dotted(점선), dached(줄선)
- 경계선 두께 : px 단위
- 경계선 색상 : 색상명 또는 색상코드

ex)
border: solid 1px red;
border-top: double 2px blue;
border-right : dotted 1px green;
border-bottom: dashed 1px yellow;
border-left: solid 8px black;
border-radius: 20px    박스 모서리를 20px 정도로 둥글게 만들기

padding : 10px;
- 패딩 속성값은 픽셀 단위로 지정

width: 345px;
- 박스의 너비

height: 200px;
- 박스의 높이

◼︎ 패딩과 마진 설정하기

padding: 20px;
padding: 20px 30px 40px 50px; (상우하좌)
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

margin: 20px;
margin: 20px 30px 40px 50px; (상우하좌)
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;

◼︎ 패딩과 마진 초기화하기

- 패딩과 마진값을 설정하지 않아도 모든 HTML 요소는 기본적으로 패딩과 마진값을 가지고 있음. 따라서 웹 페이지를 제작할 때 모든 HTML 요소의 패딩과 마진을 0으로 초기화하는 경우 많음.

* {                            전체선택자
    padding: 0;
    margin: 0;
}

<끝>