html div span 블록 및 인라인 요소

[HTML 블록 및 인라인 요소]

모든 HTML 요소는 요소 유형에 따라 기본 표시 값을가집니다. 대부분의 요소에 대한 기본 표시 값은 블록 또는 인라인입니다.

[블록 수준 요소]

블록 레벨 요소는 항상 새 행에서 시작하여 사용 가능한 전체 너비를 사용합니다 (가능한 한 왼쪽과 오른쪽으로 늘입니다).

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

블록 수준 요소의 예 :

<div>

<h1> - <h6>

<p>

<form>

인라인 요소

인라인 요소는 새 행에서 시작하지 않으며 필요한만큼의 너비 만 차지합니다.

이것은 단락 안에있는 인라인 <span> 요소입니다.

인라인 요소의 예 :

<span>

<a>

<img>

[<div> 요소]

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

<div> 요소에는 필수 속성이 없지만 스타일과 클래스는 공통입니다.

CSS와 함께 사용하면 <div> 요소를 사용하여 콘텐츠 블록을 스타일 지정할 수 있습니다.

예

<div style = "background-color : black; color : white; 패딩 : 20px;">

  <h2> 런던 </ h2>

  <p> 런던은 영국의 수도입니다. 영국에서 가장 인구가 많은 도시로 1300 만이 넘는 대도시가 있습니다. </ p>

</ div>

[<span> 요소]

<span> 요소는 종종 일부 텍스트의 컨테이너로 사용됩니다.

<span> 요소에는 필수 속성이 없지만 스타일과 클래스는 공통입니다.

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

예

<h1> 내 <span style = "color : red"> 중요 </ span> 제목 </ h1>