[HTML5] 20. 배치 및 블록 박스 + 인라인 박스 + 박스 유형 제어와 display 프로퍼티

20. 배치 및 블록 박스 + 인라인 박스 + 박스 유형 제어와 display 프로퍼티

 

 

 

# 배치

- CSS3로 HTML 태그가 출력될 위치 지정 가능

: HTML 태그의 경우 웹 페이지에 작성된 순서와 다르게 배치할 수 ㅇ

 

 

- 배치 기능을 하는 CSS3 프로퍼티

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

 

 

 

 

# 블록 박스와 인라인 박스

: HTML 태그는 인라인 태그와 블록 태그로 나뉨

 

- 블록 태그

: 블록 박스로 출력

블록 박스의 디폴트 출력 모양

+ 블록 박스는 새 라인에서 시작

+ 왼쪽에서 오른쪽 끝까지 모두 점유

 

 

 

- 인라인 태그

:인라인 박스로 출력

인라인 박스의 디폴트 출력 모양

+ 인라인 박스는 블록 안에 배치됨

+ 옆에 다른 태그를 배치할 수 있음

 

 

 

 

# 박스의 유형 제어와 display 프로퍼티

블록 박스 (display:block)	인라인 박스 (display:inline)	인라인 블록 박스 (display:inline-block)
항상 새 라인에서 시작	새 라인에서 시작 불가하며, 라인 안(inline)에서만 존재	< inline 속성 1 > 새 라인에서 시작 불가하며, 라인 안(inline)에서만 존재
블록 박스 안에만 배치 가능	모든 박스 안에 배치 가능	< inline 속성 2 > 모든 박스 안에 배치 가능
옆에 다른 요소 배치 불가	옆에 다른 요소 배치 가능	< inline 속성 3 > 옆에 다른 요소 배치 가능
width, height 로 크기 조절 가능	width, height로 크기 조절 가능	< block 속성 1 > width, height 로 크기 조절 가능
padding, margin, border 조절 가능	margin-top, margin-bottom 조절 불가	< block 속성 2 > padding, border, margin 조절 가능

 

 

ex) display 프로퍼티로 박스 유형 설정해 보기

 

 

 

- display : block

ex) <span>을 블록 박스로 수정

+ <span>을 블록 박스로 지정하고 폭, 높이를 각각 100px, 60px로 지정

+ 한 줄을 모두 차지하여 옆에 다른 태그 배치 X

 

 

 

- display : inline

ex) <div>를 인라인 박스로 수정하기

+ <div>를 인라인 박스로 지정하고 라인 안에 다른 요소들과 함께 배치

+ 공간이 부족할 경우에는 남는 부분이 다음 라인으로 넘어감

 

 

 

- display : inline-block

ex) <div>를 인라인 블록 박스로 수정

+ 라인 안에 다른 요소들과 함께 배치

+ width, margin, height 등으로 크기 조절 가능