블록요소와 인라인 요소

 

블록요소 (block element)

블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 

가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블록 요소 다음에는 줄바꿈이 이루어집니다.

 

인라인 요소 (inline element)

인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 콘텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌, 우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄 바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.

 

 

블록요소

1. 줄 바꿈이 일어남.

2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함)

 

인라인요소

1. 줄 바꿈이 일어나지 않음.

2. 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 인라인 요소 안에는 블록 요소를 포함할 수 없음.

4. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 함.