[HTML]2. 태그 구조와 블록요소/인라인 요소

목차

• HTML 태그들의 구조
• 블록 요소와 인라인 요소

HTML 태그의 구조

HTML 태그의 가장 기본적인 형태는 위 사진과 같다. 대부분의 태그는 여는 태그와 닫는 태그로 이루어져 있으며, 여는 태그는 <>, 닫는 태그는 </>로 구성되어있다. 다만 img 삽입태그와 같이 일부 태그는 닫는 태그가 존재하지 않는다. 닫는 태그와 여는 태그를 통틀어 요소라 부른다.

 

블록 요소와 인라인 요소

HTML의 태그들은 블록 요소와 인라인 요소로 분류된다. 아래 글은 mdn에서 정의하는 블록 요소와 인라인 요소의 정의입니다.

• 블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소입니다.  블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿉니다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus),  꼬리말(Footers) 등을 표현할 수 있습니다. 블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없습니다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있습니다. 
• 인라인 요소(Inline elements)는 항상 블록 레벨 요소내에 포함되어 있습니다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있습니다. 인라인 요소는 새로운 줄(Line)을 만들지 않습니다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 됩니다.  예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 <a> , 텍스트(Text)를 강조하는 요소인 <em>,<strong> 등이 있습니다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

위 코드에서 알 수 있듯이, p 태그와 같은 블록 요소는 사용 가능한 넓이를 최대한 이용하고, span 태그와 같은 인라인 요소는 그 반대로 사용 가능한 넓이를 최소한으로 사용한. 그 외의 특징은 블록 요소는 수직으로 쌓이며 margin, padding값을 조절할 수가 있고, 인라인 요소는 수평으로 쌓이며 크기 지정이 불가능하다. 

 

참고문헌: https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements