#4. CSS BOX

모든 HTML요소에는 Box형태의 영역을 가지고 있다.

이 Box는 콘텐트(Content), 패딩(Padding), 보더(Border), 마진(Margin)으로 구성된다.

Content	요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역
Padding	테두리(Border)안쪽에 위치하는 요소의 내부 여백 영역 padding의 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명이다.
Border	테두리 영역으로 border의 프로퍼티 값은 테두리의 두께를 의미한다.
Margin	테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin의 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명하며 배경색을 지정할 수 없다.

1. width / height 프로퍼티

width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다. 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다.

div {
    width: 300px;
    height: 100px;
    background-color: yellowgreen;
    border: 5px solid black;
  }

width와  height 프로퍼티의 초기값은 auto로써 이것은 브라우저가 상황에 따라 적당한 width와 height 값을 계산할 것을 의미한다.

 

명시적으로 width와 height를 지정하기 위해서는 px, %등의 크기 단위를 사용한다.

 

2. margin / padding 프로퍼티

margin / padding 프로퍼티는 content의 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.

div {
    border: 5px solid red;

    margin-top: 40px;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 10px;

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
  }

-top, -right, -bottom, -left 4방향의 프로퍼티를 각각 지정하지 않고 margin, padding 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 지정할 수 있다.

---

4개 값을 지정할 때

margin: 10px 20px 30px 40px

• margin-top: 10px
• margin-right: 20px
• margin-bottom: 30px
• margin-left: 40px

3개 값을 지정할 때

margin: 10px 20px 30px

• margin-top: 10px
• margin-right, margin-left: 20px
• margin-bottom: 30px

2개 값을 지정할 때

margin: 10px, 20px

• margin-top, margin-bottom: 10px
• margin-right, margin-left: 20px

1개 값을 지정할 때

margin: 10px

• margin-top, margin-right, margin-bottom, margin-left: 10px

---

margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다.

      div {
        border: 5px solid red;
        width: 600px;
        margin: 0 auto;
      }

요소의 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어진다. 이 문제를 해결하기 위해서 max-width프로퍼티를 사용할 수 있다.

3. border 프로퍼티

3.1 border-style

border-style프로퍼티는 테두리 선의 스타일을 지정한다.

  p .dotted { border-style: dotted; }
  p .dashed { border-style: dashed; }
  p .solid  { border-style: solid; }
  p .double { border-style: double; }
  p .groove { border-style: groove; }
  p .ridge  { border-style: ridge; }
  p .inset  { border-style: inset; }
  p .outset { border-style: outset; }
  p .none   { border-style: none; }
  p .hidden { border-style: hidden; }
  p .mix    { border-style: dotted dashed solid double; }

프로퍼티 값을 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.

p {
    background: yellowgreen;
    padding: 10px;
  }
  p.d1 {
    border-style: dashed;
  }
  p.d2 {
    border-style: dotted solid;
  }
  p.d3 {
    border-style: hidden double dashed;
  }
  p.d4 {
    border-style: none solid dotted dashed;
  }

3.2 border-width

border-width프로퍼티는 테두리의 두께를 지정한다. 프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.

* border-width프로퍼티는 border-style과 함께 사용하지 않으면 적용되지 않는다.

p {
    background: yellowgreen;
    padding: 10px;
    border-style: solid;
    border-width: 15px;
  }

3.3 border-color

border-color프로퍼티는 테두리의 색깔을 지정한다. 프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.

p {
    background: yellowgreen;
    padding: 10px;
    border-style: solid;
    border-width: 15px;
    border-color: skyblue brown;
  }

3.4 border-radius

border-radius프로퍼티는 테두리 모서리를 둥글게 표현하도록 지정한다. 프로퍼티 값은 깅리를 나타내는 단위와 %를 사용한다. 각각의 모서리에 적용할 수 있고 한번에 모든 모서리에 적용할 수 있다.

div {
    background: yellowgreen;
    width: 100px;
    height: 100px;
    margin: 30px;
  }

  .d1 {
    border-radius: 5px;
  }

  .d2 {
    border-radius: 50%;
  }

3.5 border

border프로퍼티는 border-width, border-style, border-color를 한번에 설정하기 위한 shorthand프로퍼티 이다.

div {
    border: 5px solid yellowgreen;
  }

*참고할만한 사이트

border-style: MDN

border-style - CSS: Cascading Style Sheets | MDN

border-width: MDN

border-width - CSS: Cascading Style Sheets | MDN

border-color: MDN