728x90

padding 2

css 박스모델 2 - margin, padding 하위 속성

1. margin, padding 하위 속성 margin과 padding에 top, right, bottom, left 등을 붙여 하위 속성을 만들 수 있다. 이것은 마진과 패딩에 동일한 방법으로 적용된다. 1) margin의 하위 속성 margin-top margin-right margin-bottom margin-left 아래 (그림 1)처럼 위, 우측, 아래, 좌측에 속성값을 주고 구글 크롬 개발자 도구로 출력하면 그 아래 (그림 2)와 같다. 아래 (그림 2)를 보면 패딩이 상, 우, 하, 좌측의 패딩이 20픽셀, 30픽셀, 40픽셀, 50픽셀로 지정되었다. 2) padding의 하위 속성 padding-top padding-right padding-bottom padding-left paddin..

코딩/CSS 2021.12.07

css 박스모델1 - margin, padding, border, content

css 박스 모델(Box-Model) 1 - margin, padding, border, content 박스(Box)란: 요소가 차지하고 있는 사각형의 영역 브라우저가 요소를 렌더링하는 시점에 각각의 요소들은 각각 사각형 형태의 영역을 차지하고 있다. 박스는 4개의 영역으로 구성되는데, margin, padding, border, content이다. css는 이 박스들의 크기, 위치, 속성들에 대해 스타일을 정의할 수 있다. 위 그림에서 바깥쪽 여백이 margin이고, 안쪽 여백이 padding이다. 테두리는 border 속성을 가짐으로써 두께, 모양, 색깔 등을 정의할 수 있다. 콘텐츠나 언제나 테두리(border)로 감싸져 있다. 콘텐츠 영역(span은 제외)은 width, height(너비, 높이)..

코딩/CSS 2021.12.07
728x90