[HTML] inline요소와 block요소 구분

요소의 구분

🟦 inline

: 크기를 가질 수 없는 요소, 요소들은 서로 옆으로 나열된다.

: 대표적인 요소 - span, a href

🟦 block

: 크기를 가질 수 있는 요소, 요소들은 위에서부터 아래로 쌓인다.

: 대표적인 요소 - div, h, hr, li, p

🟦 inline-block

: block처럼 크기를 가지면서 동시에 옆으로 나열 가능하다.

: 대표적인 요소 - button

• 어떤 요소가 inline이고 block인지 확인하려면 htmlreference.io 참조!
• block 요소 안에 block과 inline 요소를 담을 수 있지만, inline 요소 안에 block 요소를 담을 수는 없다.
• <a href=”#”> 요소는 inline 중 예외적으로 안에 block 요소를 담을 수 있다.
• <p> 요소는 block 요소 중 예외적으로 안에 block 요소를 담을 수 없다.

---

🟦 Display
: 실제로 코드가 변하지는 않지만, 눈에 보이는 요소의 형태를 inline을 block처럼, block을 inline처럼, 또는 아예 안 보이게 할 수 있는 css 요소

div.block_01 { display : inline ; }
a.link_01 { display : block ; }
.sound { display : none ; } // 이 때, 페이지 상 사운드 파일은 보이지 않으나 소리가 흘러나오게 할 수 있다.