본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

블록과 인라인

최초 작성일
최종 수정일
이번 시간에는...
HTML 웹 표준을 준수하는데 있어서 가장 기본적인 규칙은 인라인(inline) 요소와 블록(block) 요소를 구분하는 일입니다. 이 두 가지 형태의 기본 원리와 규칙을 살펴 봅니다.

요소의 두 가지 형태

이제 드디어 웹 페이지에 실질적으로 보이는 body 요소 내에 들어가는 요소들을 다룹니다. 여러분은 이제 앞으로 배우게 될 요소들을 body 요소 안에 넣으면서 여러분의 웹 페이지 화면을 완성해 나갈 것입니다. 이 요소들은 크게 두 가지 형태로 나눌 수 있는데요, 바로 '블록' 요소와 '인라인' 요소입니다. 이 두 가지 형태에 해당하는 요소들만 잘 알고 있어도, 여러분은 거의 웹 표준을 준수하는 코딩을 하게 될 것입니다.

블록 요소 (Block Level Elements)

블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태입니다. 이 블록 요소에 들어가는 요소들로는 h1~6 요소, p 요소, div 등이 있습니다. 이게 글 만으로는 언뜻 이해되지 않을 것 같은데요, 아래 예제를 보도록 하겠습니다.

위의 코드는 아래와 같은 형태로 보여집니다.

블록 요소
p 요소는 블록 형태입니다.
div 역시 블록 형태입니다.

이번에는 css를 이용해서 각 요소들에게 배경색을 주도록 하겠습니다.

블록 요소
p 요소는 블록 형태입니다.
div 역시 블록 형태입니다.

보시는 바와 같이 요소 영역의 너비가 가로 전체에 퍼져있는 것을 알 수 있습니다.

인라인 요소 (Inline Elements)

인라인 요소는 블록 요소와 반대되는 형태로 줄 바꿈이 일어나지 않는 요소들 입니다. 인라인 형태의 요소들로는 a, img, strong, span 요소 등이 있습니다. 다음의 예제를 보시죠.

이 요소는 strong 요소 입니다. 링크가 있는 a 요소 역시 인라인 형태입니다. 이것은 span 요소입니다.

위와 같이 나타납니다. 이번에는 모든 요소가 아닌 a 요소에만 배경 색을 줘보도록 하겠습니다.

이 요소는 strong 요소 입니다. 링크가 있는 a 요소 역시 인라인 형태입니다. 이것은 span 요소입니다.

이제 블록 형태와 인라인 형태의 차이점이 좀 이해가 되시나요?

푸르고 넓직한 코끼리의 모습과 노랗고 기다란 뱀의 모습
블록 요소는 넓직한 꼬끼리를, 인라인 요소는 기다란 뱀를 떠올려 보세요

블록 요소와 인라인 요소의 규칙

이 블록 형태와 인라인 형태의 요소들에는 기본적인 규칙이 있습니다. 이 기본적인 규칙을 지키면 웹 표준을 준수하는 것이 몹시 쉬워집니다.

  • 대부분의 요소는 같은 형태의 다른 요소를 안에 포함할 수 있습니다. (블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소)
  • 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있습니다.
  • 하지만, 인라인 요소는 블록 요소를 포함 할 수 없습니다.

위의 세가지 규칙만 지키면 됩니다. 다시 말하면 블록 요소는 블록요소와 인라인 요소를 포함 할 수 있지만, 인라인 요소는 인라인 요소만 포함 할 수 있습니다. 물론, 일부 요소들 중에는 포함할 수 있는 요소가 한정적인 요소들이 있습니다만, 대체로 위의 규칙을 준수합니다.

앞으로 살펴보게 될 요소들을 그때 그때 어떠한 형태인지 잘 봐두시면, 잘못된 마크 업을 할 일은 거의 없을 것입니다. 그리고 이러한 형태들은 브라우저에서 바로 확인이 가능하기 때문에 알아보시는데 어렵지 않을 겁니다.

코끼리(블럭)안에 뱀(인라인)은 괜찮지만, 뱀(인라인) 속 코끼리(블럭)은 안됩니다.
인라인 요소는 블럭 요소를 포함 할 수 없습니다.
요점 정리
  • 인라인 요소의 형태는 영역에 해당하는 글자만을 포함합니다.
  • 블럭 요소의 형태는 한 행 전체를 포함하기 때문에, 줄 바꿈이 일어나게 됩니다.
  • 보통의 블럭 요소는 블럭 요소와 인라인 요소 모두 포함할 수 있습니다.
  • 보통의 인라인 요소는 인라인 요소만을 포함할 수 있으며, 블럭 요소를 포함할 순 없습니다.

이 글이 유용하셨다면 친구들에게 공유 해주세요.