CSS 코딩 - 박스 모델, Box model (margin, border, padding)


CSS 코딩 - 박스 모델, Box model (margin, border, padding)

CSS 박스 모델 이전 수업에서는 CSS의 DIV 태그가 박스 형태로 속성을 부여하는 것을 보았다. 하지만 실제로는 CSS는 모든 것을 박스로 규정한다. head 태그도, body 태그도 모두 보이지는 않지만 박스 형태인 셈이다. 모든 박스는 아래와 같이 4 파트가 있다. CSS를 사용하여 margin, border, padding을 변경할 수 있는 것이다. Margin아래와 같이 margin에 15px이라는 값을 넣어줘보자. 사진에서는 잘 보이지 않지만 margin이 생기며 box가 우측으로 조금 밀려났다. 테두리의 margin이 생긴 것이다. 만약 상하좌우에 다른 margin 값을 주고 싶다면 위부터 시계 방향으로 값을 넣어주면 된다. (상, 오, 하, 왼)코드가 약간 더 길어지겠지만 만..........

CSS 코딩 - 박스 모델, Box model (margin, border, padding)에 대한 요약내용입니다.

자세한 내용은 아래에 원문링크를 확인해주시기 바랍니다.



원문링크 : CSS 코딩 - 박스 모델, Box model (margin, border, padding)