Boxmodel2 [HTML/CSS] CSS Box Model - Width, Height 10) 속성 - width width는 요소의 가로 크기를 정의하는 데 사용하는 속성으로, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. 기본값이 auto이기 때문에 브라우저를 resize할 때 저절로 width가 변화된다. box .box { width: 100px; padding: 20px; border: 10px solid black; } 위 코드를 분석해보면 width에 의해 100px content + ( 20px * 2 ) padding + ( 10px * 2 ) border = 160px이 되는 것이다. child .parent { width: 300px; border: 20px solid red; } .child { width: 50%; padding: 20px; borde.. 2020. 8. 13. [HTML/CSS] CSS Box Model - Content, Padding, Border, Margin 5) 속성 - boxmodel Box Model에 대해서 알아볼까요 .boxmodel { border: 10px solid #000000; padding: 30px; margin: 50px; } 위 코드의 결과로 보이는 것과 같이, content와 border 사이에 공간을 나타내는 padding과 다른 box 사이의 공간을 나타내는 margin을 설정할 수 있다. ▶ boxmodel 구성 Content 영역 요소의 실제 내용을 포함하는 영역으로, 크기는 내용의 너비 및 높이를 나타낸다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 한다. Padding 영역 content 영역과 테두리 border 사이의 여백을 padding이라고 한다. content 영역에.. 2020. 8. 12. 이전 1 다음
