HTML 기초4 Block and Inline Elements

본 문서는 https://www.w3schools.com/html/default.asp를 공부하기 좋게 요약해 놓은 것입니다.

 

블록 수준 요소

블록 수준 요소는 항상 새 줄에서 시작합니다.

블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남).

블록 수준 요소에는 위쪽 및 아래쪽 여백이 있지만 인라인 요소에는 없습니다.

<div> 요소는 블록 수준 요소입니다.

 

<div style="border: 1px solid black">Hello World</div>

 

인라인 요소

인라인 요소는 새 줄에서 시작하지 않습니다.

인라인 요소는 필요한 만큼만 너비를 차지합니다.

이것은 단락 내부의 <span> 요소 입니다.

 

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

 

<div> 요소

<div>요소는 종종 다른 HTML 요소에 대한 컨테이너로 사용됩니다.

<div>요소에 속성이 필요 없지만,있다 style, class그리고 id일반적이다.

CSS와 함께 사용할 때 <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>

<span> 요소

<span>요소는 텍스트, 또는 문서의 일부의 부분을 표시하는 데 사용 인라인 용기이다.

<span>요소에 속성이 필요 없지만,있다 style, class그리고 id일반적이다.

CSS와 함께 사용하면 <span>요소를 사용하여 텍스트 부분의 스타일을 지정할 수 있습니다.

 

<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>