[HTML] Block과 Inline

Block

---

Block Level의 특징

---

Block은 <div>,<h> 같은 태그들이 있습니다. Block은 위에서 아래로 레이아웃이 잡히는 요소로 서로 좌/우에 배치 될 수 없습니다. 

특징 

• 기본 width의 값이 100%이다.
• padding과 margin을 모든 방향으로 사용할 수 있다.
• width와 height를 지정할 수 있다.
• 자식 요소가 쌓일 수록 height는 자동으로 늘어난다.
• 레이아웃을 잡을 때 사용된다.

---

Inline

---

Inline의 경우 Text를 다룰 때 사용됩니다. Block과는 다르게 같은 Inline요소들은 서로 좌/우에 배치될 수 있습니다. <span> , <img> , <a> 가 Inline에 해당됩니다. 

Inline Level의 특징

---

• 크기를 지정할 수 없다.
• 기본 width , height값이 0이다.
• margin과 padding을 좌/우만 사용할 수 있다.
• 주로 Text를 다룰 때 사용된다.

---

Block과 Inline을 서로 변경하기

---

Block과 Inline의 태그들의 속성을 서로 변경할 수 있습니다. block -> inline , inline -> block과 같이 변경할 수 있는데 변경해주는 속성은 display라는 속성입니다.

/* block -> inline */
div {
	display: inline
}

/* inline -> block */
span {
	display: block
}

---

❗ 저작권

https://icons8.com/icon/TZ69zUw6d3Lu/right

https://icons8.com/icon/NXAECrAk3Vkg/code

https://icons8.com/icon/48250/암호"