CSS Box Model - 여백, 테두리

191219 수업 내용 정리

---

여백 속성
    margin : 해당 태그의 바깥쪽 여백 / padding : 안쪽 여백 
    ▷ top, right, bottom, left 시계방향으로 여백 지정

       ex) margin: 10px 15px 10px 15px; → 상하 10px, 좌우 15px의 바깥쪽 여백을 가짐
    ▷ margin-top 처럼 개별적으로 지정할 수도 있음
    ▷ margin: npx; 과 같이 하나의 값만 주면 전방위로 npx만큼의 여백을 적용
    ▷ margin: npx auto; = margin-top/bottom:0px; margin-left/right:auto

          → 상하는 0px, 좌우는 해당 태그가 중앙에 오도록 자동으로 설정됨
    ※ padding도 margin과 동일한 방식으로 작용 - 두 여백의 차이점을 정확히 숙지하는 것이 중요

 

---

테두리 속성
   border : 테두리를 정의하는 상위 속성
   ▷하위 속성 - boder-style : 테두리 모양, double(이중선), solid(실선), dotted(점선) 
                             border-width : 테두리 크기, px단위로 지정
                             border-color: 테두리 색

                             border-radius : 테두리의 둥글기를 지정, 숫자가 커질수록 원에 가까워짐, px/%로 지정 가능
    ※ border: style width color;

          → border가 상위속성이기 때문에 한 번에 다 써줄 수도 있음 단, 순서대로 써야함

 

---

margin, padding의 차이를 이해하고 능숙하게 다룰 수 있어야 합니다.