[CSS] 인라인 요소와 블록라인 요소 개념과 display 프로퍼티

HTML의 태그는 크게 인라인 요소와 블록 요소로 나눌 수 있다. 

 

1. 인라인 요소

 

1) 특징:

- 인라인 요소는 블록 요소안에 포함할 수 있다. 인라인 요소 안에는 또 다른 인라인 요소가 들어갈 수 있다.

-  콘텐츠에게 맞추어져 있기 때문에 width와 height를 변경 해 줄 수 없다.

- 따라서 인라인 요소는 line-length로 줄의 높낮이를 조절하여 콘텐츠의 크기를 변경하거나 text-align으로 좌, 우, 중앙 정렬을 할 수 있다.

-인라인 요소는 줄바꿈이 없고 우측에 바로 이어져서 표기가 된다.

 

 

2) 인라인 요소:

<a>	하이퍼링크를 걸어주는 테그
<img>	이미지를 삽입하는 태그
<input>	사용자에게서 입력받을 수 있는 입력 폼을 만들어내는 기능
<span>	의미 없는 태그
...

See the Pen Untitled by Hun-Se (@hun-se) on CodePen.

 

2. 블록요소:

 

1) 특징: 

- 다른 인라인 요소를 포함할 수 있다.

- 기본적으로 가로폭 전체의 넓이를 가진다. 

- 레이아웃을 조정 해 줄 수 있다. (width, height 등등)

- 자동으로 줄바꿈이 이루어진다.

- 내부의 인라인 요소와 블록 요소를 포함할 수 있다.

- 블록 요소는 vertical-align 이 적용되지 않는다.

- 블록 요소는 text-align이 적용되지 않는다.

 

2) 블록요소 예시

<h1>~<h6>	제목(헤더)테그
<p>	문단을 삽입 할 수 있는 태그
<ul>,<ol>	리스트 형식을 만들 수 있는 태그
<div>	의미 없는 태그
...

See the Pen Untitled by Hun-Se (@hun-se) on CodePen.

 

3. display

 

css의 display 속성을 통해 inline요소, block요소의 특징을 갖도록 변경해 줄 수 있다.

또한 inline-block요소를 사용한다면

기본적으로 inline 요소처럼 수평으로 나린히 배치된다는 특징을 가짐과 동시에

block요소 처럼 요소의 크기와 마진, 패딩 등을  사용할 수 있게 된다.

See the Pen Untitled by Hun-Se (@hun-se) on CodePen.