강의 목표

• 박스 모델이 가지는 의미
• 박스 모델을 구성하는 요소

박스 모델이란

• 모든 html 요소는 상자의 형태이다
• 박스 모델은 내용, 패딩, 경계선, 마진으로 이루어 져있다.
  • 내용
    • 실제로 담고 있는 부분
  • 경계선
    • 말 그대로 컨텐츠를 감싸고 있는 테두리
  • 패딩
    • 내용와 경계선 사이의 여백
  • 마진
    • 경계선 밖의 여백

내용(content)

• 요소의 width, height는 content의 크기에 해당함
• css로 크기를 정해준다면 내용이 벗어나도 크기에 맞춘다.

경계선(border)

• css에서는 방향이 상,우,하,좌 순서로 적용(시계방향)

• border-style

  • 종류

    border-style: none | hidden | dotted | 
    dashed | solid | double | groove | ridge 
    | inset | outset | initial | inherit
    

  • 가장 많이 쓰는 4가지

    • solid(실선) dashed(파선) dotted(점선) double(이중선)

  • 참조

    
    border-style: solid dashed dotted double;
    /*위와 아래는 동일한 스타일*/
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
    
    border-top-style: solid; /* 상 */
    border-style: solid; /* 상하좌우 */
    border-style: solid dashed; /* 상하/좌우 */
    border-style: solid dashed dotted; /* 상/좌우/하 */
    border-style: solid dashed dotted double; /* 상/우/하/좌 */
    

• border-width

  • 비슷한 식으로 적용됨

• border-color

  • 여기도

• border의 shortcut

  • 한번에 지정할 수도 있다.

  border: red solid 1px;
  

• border-radius

  • 경계선을 둥글게 표현
  • 반지름의 값을 기준