본문 바로가기

cssbox

(2)
<CSS 기초> 05. Box 타입 Box는 각 박스별로 타입을 가지고 있다. 이는 HTML태그별로 부여되어 있지만 display속성을 통해서도 지정이 가능하다. 타입에는 Block, Inline, Inline Bolck, Flex 가 있으며 이번 장에서는 Flex를 제외한 세가지를 알아보자. 1. Block 먼저 block이다. 말그대로 막는다는 의미가 가장 크다. 보다시피 block의 속성을 갖고있는 박스의 오른쪽에 자리가 있음에도 아무것도 오지 못하고 있다. 이것이 block의 가장 큰 특징이다. block은 width, height, margin, padding, border의 위아래 옆쪽등 전부 사용이 가능하다. 별도의 width 선언이 없으면 width=부모의 content-box의 100%를 채운다. 따로 width를 선언한 ..
<CSS 기초> 04. Box 모델과 크기 웹페이지의 구성요소들은 전부 박스모델을 갖고 있다. 박스모델을 통해 크기와 여백 모양 뿐아니라 위치까지 조정할 수 있다. 1. Box model 먼저 content를 살펴보자. 우리가 내용을 넣는 부분에 해당하며 width와 height 속성으로 가로와 세로의 크기를 조정할 수 있다. 다음은 padding이다. 내부의 여백을 의미한다. padding-left : 10px 나 padding-top : 10px 와 같은 방식으로 top right bottom left 등의 여백을 줄 수 있다. border은 테두리를 의미한다. border : 1px solid #fff 와 같이 굵기와 스타일 색을 지정할 수 있다. 이 때 스타일같은경우 주로 solid를 이용하여 일반적인 실선을 사용하지만 dashed와 do..