HTML : 블록(Block)요소 와 인라인(Inline)요소

HTML : 블록(Block)요소 와 인라인(Inline)요소

---

HTML : 블록(Block)요소 와 인라인(Inline)요소

 

1. 블록(Block) 요소

• 블록 레벨 요소는 언제나 새로운 줄에서 시작하며, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다
  • (상위 요소가 허락한 범위 안의 최대)
• 상자를 아래로 쌓는 것이라고 생각하면 된다. (나열이 위에서 아래로 실행된다.)
• ex :) <div>

 

예시

div 블록요소이며, 한줄을 모두 사용합니다.

 

---

 

2. 인라인(Inline) 요소

• 인라인 요소는 줄의 어느 곳에서 시작할 수 있다.
• 바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용(content)만큼만 차지한다.
• ex :) <span>

 

예시

span1 인라인 요소입니다.
span2 인라인 요소입니다.
span3 인라인 요소입니다.

---

규칙

• 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록> 블록, 인라인> 인라인)
• 대부분의 블록 요소는 인라인 요소를 하위 요소로 가질수있지만, 인라인요소는 블록요소를 하위요소로 가질 수 없다.

 

---

2022.06.10 - [TIL/HTML] - HTML : 컨테이너 요소 div, span

HTML : 컨테이너 요소 div, span