Boxmodel 2

[CSS] CSS Box Model(3) | Padding(패딩)

Padding(패딩) padding은 콘텐츠 박스와 요소를 둘러싼 테두리 사이의 남은 공간이다. (콘텐츠와 테두리 사이의 공간) 또한 padding은 요소 내부에 있는 공간이다. padding-left padding-right padding-bottom padding-top #one { background-color: #DDB892; border-width:10px; border-color: indianred; border-style: solid; padding-right: 50px; /* box-sizing: border-box; */ } 녹색 부분이 padding이다. padding shorthand property (속기법 특성) 4개의 개별 특성을 한번에 작성하는 것이다. 속기법 특성에는 4가지 ..

📦 CSS/CSS 2022.11.04

[CSS] CSS Box Model(1) | Width(가로) & Height(세로)

CSS Box Model Box Model이란 뭘까? Box Model은 요소가 웹 페이지에 표시된 방식 그리고 크기를 조정하는 방법이다. box model에서는 웹 페이지의 모든 요소로 된 직사각형 상자를 볼 수 있다. 각 상자에는 콘텐츠가 있다. 경계, 그 안팎의 공간 그래서 모든 조각을 정의하면 상자 하나에 한개의 box model이 있는거다. 사진의 중앙에 핵심 콘텐츠가 있다. 박스 중앙에는 단락의 첵스트와 같은 실질적인 정보가 위치한다. 그 주변에는 패딩이 있다. 테두리가 둘러져 있고 박스 사이에는 여백이 있다. 콘텐츠 레이아웃에 매우 중요한 특성이고 콘텐츠의 크기나 모양, 테두리 간격을 바꿀때 필요하다. Width(가로) & Height(세로) 콘텐츠 박스에 관여하는 가로와 세로부터 설명 시작..

📦 CSS/CSS 2022.11.03
728x90