<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를 선언한 경우 남은 공간은 margin으로 채운다. 그리고 별도 height를 선언하지 않으면 부모height는 자식요소 height의 합이다.

 

 margin-left : auto 속성을 주게되면 기존에는 오른쪽에 자동으로 margin값이 채워졌던것이 왼쪽으로 채워지면서 오른쪽으로 박스가 붙게된다. 여기서 margin-right : auto 까지하면 가운데에 위치하게된다. 이를 다르게쓰면 margin : 0 auto 를 통해 위아래는 0 왼쪽오른쪽은 auto라고 선언하면 한줄로써 가운데정렬이 가능하다.

 

2. Inline

 다음은 Inline 박스를 살펴보자. 이는 html에서 <span> <a> <strong>과 같은 태그에 자동으로 부여된다.

 

 Inline은 옆으로 흐르는 방식이다. 위와 같은 상황에서 Inline이 하나 더 추가된다면 옆에 자리가 모자라므로 왼쪽아래에서 부터 다시 쌓이기 시작한다. 이와 같은 속성때문에 Inline은 width와 height를 사용하지 못한다. 그리고 각 sizing요소의 left right는 사용가능하지만 top과 bottom은 사용할 수 없다.

 

3. Inline Block

 제목에서도 알 수 있듯이 이 box타입은 기본적으로 옆으로 가지만 block과 같이 영역도 설정이 가능하다. 가장 위에서 말했듯이 display : inline-block 과 같이 지정하여 사용할 수 있다.

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU