인라인 구조와 블록구조

01. 블록 레벨 요소(Block-level Elements)

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록  요소는 하나의 박스라고 생각하면 됩니다.

 

블록 레벨 요소(Block Leverl Elements)는, 한개의 독립된 덩어리로 부모 요소의 가로 폭 전체를 차지하는 요소이다.

따라서 라인 한 개에 하나의 블록 요소가 들어갈 수 있고, 블록 요소의 다음 요소부터는 라인이 바뀐다.

 

• 특징

1. 새로운 줄에서 시작합니다.
2. 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
3. 다른 블록 레벨 요소와 인라인 요소들을 포함할 수 있습니다.
4. 블록 레벨 요소 자체를 text-align을 활용해 가운데 정렬할 수 없습니다.
5. 블록 레벨 요소 자체를 Vertical-align을 활용해 수직 정렬할 수 없습니다.

 

사진 클릭시 이미지 출처로 이동

 

 

• 대표적인 블록 레벨 요소인 요소들

1. <article>
2. <header>
3. <nav>
4. <section>
5. <div>

     등이 있으며 대부분의 grouping contents들이 블록 요소이다.

 

     블록 레벨 요소는 width나 height 값을 주어 박스의 크기를 변경할 수 있다.

 

 

 

02. 인라인 요소 (Inline Element)

인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.

 

인라인 요소(Inline Elements)는 콘텐츠 자신의 크기 만큼 영역을 가지는 요소로 <span>, <strong> 이 인라인 요소의 대표적인 예이다. 주로 텍스트 레벨의 콘텐츠를 감싼다.

 

콘텐츠 만큼의 크기를 갖기 때문에, 아래 그림과 같이 한 개의 라인에 여러 개의 인라인 요소가 나열될 수도 있다.

 

 

• 특징

1. 새로운 줄을 만들지 않습니다.
2. 필요한 너비만 차지합니다.
3. 다른 인라인 요소를 포함할 수 있습니다. (인라인 요소가 블록 레벨 요소를 포함하는 건 웹 표준에 어긋납니다.)
4. height가 적용되지 않습니다.
5. width가 적용되지 않습니다.

 

사진 클릭시 이미지 출처로 이동

 

 

• 인라인 요소인 요소들

1. <a>
2. <i>
3. <br>
4. <img>
5. <var>

     

 

일반적으로 인라인 요소 하위에는 인라인 요소만 중첩이 가능하며, 자신이나 부모 태그의 텍스트 정렬에 영향을 받는다.

인라인 요소는 width, height 값이 적용되지 않아, 만약 크기를 조절하고 싶을 땐 CSS를 이용해

 

display: inline-block

display: block

 

속성을 부여해야 한다.

 

03.  블록 레벨 요소와 인라인 요소의 차이점

 

이미지 출처

 

• 줄 바꿈

블록 요소  :  항상 새 라인에서 시작

인라인 요소  :  라인 안에 있음

 

• 다른요소와 나란히 나열하기

블록 요소  :  불가능

인라인 요소  :  가능

 

• 크기 조절

블록 요소  :  width와 height 값으로 조절

인라인 요소  :  콘텐츠 크기 적용, 조절 불가능

 

• CSS Box model 프로퍼티

블록 요소  :   padding, border, margin 등 조절 가능

인라인 요소  :  margin-top, margin-bottom 조절 불가능 (margin-lift, margin-right 가능)