Block & Inline 요소

Block? Inline?

Block과 Inline은 html에서 대단히 중요한 개념입니다. block과 inline 개념은 나중에 css를 통하여 각 태그들을 적절히 배치하여 레이아웃을 배치할 때 굉장히 중요하게 활용되는 개념이므로 이번 내용에 대해서 확실히 잘 알고 넘어가야할 필요성이 있습니다.

 

각각의 html 태그들은 자신이 웹 브라우져에 의해서 보여질 때 어떻게 보여질지에 대한 값 즉, display value라는 값에 대한 기본값을 가지고 있습니다. 그리고 이 Display Value가 가질 수 있는 두 가지 종류의 값이 각각 block과 inline 입니다.

 

 

Block

Display value를 Block으로 가진 html 요소들은 항상 시작할 때 새로운 행 즉, 개행을 한 후에 시작하고 해당 태그가 차지할 수 있는 가로너비 영역을 최대한 크게 차지하게 됩니다.(가능한 왼쪽, 오른쪽 방향으로 확장하여 표시함)

display value 값을 block으로 가지는 태그의 종류는 다음과 같습니다.

display value를 block으로 가지는 태그들

Inline

Display value를 Inline으로 가진 html 요소들은 항상 시작할 때 개행이 이루어지지 않으며, 해당 태그 자신이 필요한 만큼의 가로너비만을 차지 합니다.

display value 값을  inline으로 가지는 태그의 종류는 다음과 같습니다.

display value를 inline으로 가지는 태그들

 

그렇기 때문에 현재는 block과 inline이 가지는 차이가 무슨 의미가 있을까 라는 생각이 들 수 있지만 차후에 CSS에서 각 요소들을 배치하여 레이아웃을 구성할 때 이는 굉장히 중요하고 의미있는 내용이 됩니다. (차후에는 css에서 display 속성을 이용해서 각 태그들이 가지는 display vlaue 값을 사용자 임의로 지정하고 변경하는 내용을 공부할 것 입니다.)

 

그리고 display value를 inline으로 가지는 요소들이 안에 block을 display value로 가지는 것이 불가능함 또한 꼭 기억하시기 바랍니다.

 

 

Block, Inline Elements 중에서 대표적으로 사용되는 태그

<div>

<div> 태그는 대표적인 Block Element로서 다양한 종류의 html 태그를 담는 컨테이너의 용도로 자주 사용됩니다. <div> 태그는 굳이 속성을 가질 필요는 없지만 주로 style, class, id 속성을 포함하여 사용됩니다.(class, id 속성은 차후에 뒤에서 다룹니다.) 그래서 보통 <div>는 동일한 디자인, 또는 함께 묶여서 나타나야 하는 태그들을 묶어주는 역할을 수행합니다. 나중에 CSS를 통해서 디자인을 공부하면서 <div> 태그가 얼마나 유용한지 보실 수 있을 것 입니다.

 

<div> 태그를 이용한 코드의 예시와 그 출력결과는 다음과 같습니다.

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

div 태그를 이용해서 태그들이 집합에 대해서 디자인을 적용한 모습

 

<span>

<span> 태그는 대표적인 Inline Element로서 텍스트의 일부분 또는 글에서 일부분을 강조하기 위한 목적으로 주로 사용됩니다.  <span> 태그 역시 특별히 속성을 필요로 하는 태그는 아니지만 주로 style, id, class 속성을 포함하여 사용됩니다. 이렇게 사용함으로서 <span> 태그는 텍스트의 일부분을 강조하는 디자인을 수행할 수 있습니다. <span>태그를 활용한 예시코드와 그에 대한 실행결과는 다음과 같습니다.

 

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> 
eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

<span> 태그를 이용한 텍스트의 일부분을 강조한 모습

 

내용은 길지 않지만 이번 글에서 다룬 내용은 나중에 CSS로 이어질 때 굉장히 활용도가 높은 중요한 개념입니다. 그러므로 각 내용들을 잘 살펴보시고 잘 기억해두시기 바랍니다.