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의 차이를 이해하고 능숙하게 다룰 수 있어야 합니다.