CSS3으로 블록 박스와 인라인 박스 다루기

 

 

HTML 태그가 출력될 위치를 지정하는 것을 '배치(positioning)'이라고 한다.

오늘은 이 배치와  관련된 프로퍼티와 블록/인라인 박스에 대해서 알아보자

 

 

- 먼저 배치와 관련된 프로퍼티는 아래와 같다.

• display
• position
• left / right / top / bottom
• float
• z-index
• visibility
• overflow

 

[블록 태그 & 인라인 태그]

 

- HTML의 태그는 블록 태그와 인라인 태그로 나뉘게 되며 이는 아래와 같다.

 

• 블록 태그 : <p>, <hl>, <div>, <ul>
• 인라인 태그 : <span>, <a>, <img>

 

- 블록 박스인지, 인라인 박스인지에 따라 태그가 브라우저에서 차지하는 영역과 위치에 많은 차이가 있게 된다.\

 

 

(블록 박스)

- 블록 박스는 '새 라인에서 시작'하며, 옆에 다른 태그를 배치할 수 없다는 특징이 있다.

- 예시로 아래와 같은 코드를 들 수 있다.

<div>DIV블록박스 입니다.</div>

 

 

(인라인 박스)

- 인라인 박스는 블록 안에 배치하여 옆에 다른 태그도 배치할 수 있다는 특징이 있다.

- 예시로 아래와 같은 span태그를 들 수 있다.

<div>블록 박스와 달리<span>이러한 span영역을 통해 다른 태그도 배치가 가능</span>합니다.</div>

 

 

- 즉, <div>와 같이 블록 박스에서는 새로운 라인에서 시작되어 라인의 끝까지 차지하게 되므로 옆에 다른 태그가 들어갈 여유 공간이 없다. 하지만 <span> 태그와 같은 태그들은 인라인 박스이기 때문에 블록 박스 내에 배치가 가능하다.

 

 

 

 

 

 

 

 

 

 

★ 해당 게시물은 "HTML5 + CSS3 + Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ★