[css기초] 블록요소, 인라인요소, display속성

 

 

 

 

블록요소와 인라인요소

레이아웃 스타일에는 블록요소와 인라인요소가 있습니다.

 

블록요소 (block element)	div, h1~h6, p, ul, ol, li, table, td, th, hr, figure, figcaption, caption, header, nav, footer, section, article, aside, blockquote, from, fieldset
인라인 요소 (inline element)	span, a, video, audio, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup

 

 

 

 

1. block

: 컨텐츠의 그룹화나 화면의 레이아웃을 담당하는 태그

 

- 자동 줄바꿈

- 넓이값 지정하지 않을 시, 부모 요소 넓이값을 100% 상속받음

- 넓이와 높이값 지정 가능

- 블록요소 태그는 블록요소와 인라인요소를 감쌀 수 있음

- 단 p태그와 h1시리즈 태그는 서식관련된 요소이기 때문에 내부에 div나 여타 블록요소를 자식으로 넣을 수 없음

(+ 보통 그룹화 시키는 블록요소에는 자식 컨텐츠가 들어오게 되는 경우 높이값을 지정하지 않음)

 

블록요소

 

 

 

2. inline

: 글에서 특정문구나 단어를 선택후 꾸미거나 강조 하는 태그

 

- 자동 줄바꿈되지 않고 옆으로 나열됨

- 넓이와 높이값 모두 인라인 태그로 감싼 텍스트 자체의 크기로 설정됨

- 넓이와 높이값 지정 불가

- 인라인요소 태그는 인라인요소만 감쌀 수 있음

(+ 좌우 마진은 적용되는데, 상하마진은 적용 x / padding값은 적용 가능)

 

인라인요소

 

 

 

3. inline block

: display 속성을 활용하여 블록요소와 인라인요소 속성을 변경

 

display 속성

값 : block / inline / inline block / none

 

 

- 자동 줄바꿈되지 않고 옆으로 나열됨 (인라인)

- 넓이와 높이값 모두 인라인 태그로 감싼 텍스트 자체의 크기로 설정됨 (인라인)

- 넓이와 높이값 지정 가능 (블록)

- 인라인블록요소 태그는 블록요소와 인라인요소를 모두 감쌀 수 있음 (블록)

- 블록요소나 인라인 요소를 float배치하면 자동으로 인라인블록 속성으로 변경됨

- 블록요소나 인라인 요소를 position: absolute 혹은 position: fixed 적용하면 자동으로 인라인 블록속성으로 변경됨

 

 

 

 

 

요소 가운데 배치

블록요소 자신을 가로 가운데 배치 (블록요소에 구문 적용)

margin: 0px auto;

 

블록요소 안쪽의 모든 인라인요소를 가로 가운데 배치 (블록요소에 구문 적용)

text-align: center;

 

블록요소 안쪽의 인라인 글자를 세로 가운데 배치

부모 블록요소의 높이값과 글자의 line-height값을 동일하게 적용