[CSS3]BOX (Block,Inline,Inline Block)

🤔BOX란 무엇인가?

Box는 Box Model만을 이해한다고해서 바로 사용 가능한 것이 아니다.

내가 어떠한 BOX Type을 쓰느냐에 따라 Box Model은 달라진다.

우리에게 중요한 Box type은 4가지가 있다.

Block / Inline / Iline Block / Flex

 

📢BoxModel

Box Model는 4가지 영역으로 나뉜다.

1. Content

content는 content가 들어가있는 상자로 가로는 width, 세로는 height로 표현한다.

2. Padding

안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 것을 padding이라 한다.

3. Border

테두리를 나타내는 border, 사용법이 다른 BOX들과 다르다.

/*border: 굵기 스타일 색상*/

상단의 코드와 같이 사용이한다.

4. Margin

바깥 여백. 즉 요소와 요소 사이의 간격을 나타낼때 사용한다.

 

속기형 표현법

.box{
/*padding: top right bottom left*/
padding: 20px 10px 20px 10px
/*margin: top right bottom left*/
margin: 20px 10px 20px 10px
/*시계방향으로 순서가 돌아간다고 생각하면 외우기 쉽다!*/
    }

📢Box sizing

---

📢Box Type 

❗ block

🧐Keywords: 길막

block은 (지나가지 못하게) 막다 차단하다라는 뜻을 가지고있다.

그래서 다른 tag가 온다면 지나가지 못하게 길을 막는 성질을 지닌다.

 

❗block의 특징

▫ width

자녀 태그에 따로 width를 선언하지 않은 경우, width = 부모의 content-box의 100%로 늘어난다.

하지만 자녀 태그에 따로 width를 선언한 경우, 남은 공간은 margin으로 자동적으로 채워진다.

▫ height

부모 태그에 height를 선언하지 않을 경우, 자식요소의 height의 합 = 부모의 height이다.

ex) 자식 태그 2개의 height가 각 140px일 때, 부모 태그는 280px을 가지게된다.

 

❗ Inline

🧐Keywords: 흐름

in + line: 즉, line 안에 속해 있는다.

그래서 in line은 기본적으로 옆으로 늘어서 흐르는 성질을 지닌다.

 

❗inline의 특징 

부모 태그의 width범위가 넘어가는 자녀 태그가 있다면 자녀태그는 줄바꿈을 한다.

글을 작성할때 공간이 부족하면 다음 줄로 줄바꿈되는 것과 같은 원리이다.

 

Inline의 경우 Box model의 property중

width, height, padding-(top,bottom),border-(top,bottom),margin-(top,bottom)을 사용 할 수 없다.

그 이유는 inline 줄간격에 맞춰 흐르려는 성질을 가지고 있는데, 상단의 코드는 그 흐름을 박살낸다.

 

<span> tag에 상단의 코드를 집어 넣으면 대환장 파티가 열리는 것을 볼 수 있다.

(span은 display가 inline이며, background 색을 집어 넣고 비교해봐라) 

Block과 Inline의 차이점 비교

Block	Inline
면(영역)	선(흐름)

 

❗ Inline block

/*선언*/
.box{
	display:inline-block;
}

Block의 좋은점과 Inline의 좋은점을 모두 가지고 있는게 Inline block이다.

block의 경우 영역 잡기에 좋지만 길막하는 성향때문에 가로 배치에 어려움이 있다.

하지만, inline block같은 경우엔 inline 성질에 block을 추가한 것으로

기본적으로 inline과 같이 block이가로로 흐르며 동시에 영역도 잡을 수 있다.

 

⭐Flex

Flex는 다른 게시물로 자세히 다뤄도록하겠습니다