thinkNote

■ 요약

▶ 표시 값은 두 개가 있다. : block / inline

▶ block-level 요소는 항상 새 줄에서 시작하며 가능한 전체 너비를 차지한다.

▶ inline 요소는 새 줄에서 시작하지 않으며, 적당히 필요한 너비를 차지한다.

▶ <div> 요소는 block-level 이고 다른 HTML 문서의 컨테이너로 종종 사용한다.

▶ <span> 요소는 문서의 일부 혹은 텍스트의 일부를 표시하는데 사용하는 inline 컨테이너이다.

▶ 모든 HTML 요소는 요소 유형에 따라 기본 표시 값이 있다.

▶ 두 개의 표시 값이 있다 : block / inline

■ Block-level 요소

▶ block-level 요소는 항상 새로운 줄로 시작한다.

▶ Browser는 요소 전후로 약간의 공백을 자동으로 추가한다.

▶ block-level 요소는 항상 사용 가능한 전체 너비를 차지한다.

( 가능한 왼쪽과 오른쪽으로 확장됨 )

▶ 두가지 일반적으로 사용되는 block 요소 : <p> / <div>

▶ <p> 요소는 HTML 문서의 단락을 정의한다.

▶ <div> 요소는 HTML 문서의 구분 또는 섹션을 정의한다.

<p>Hello World</p>
<div>Hello World</div>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_block_div 

▶ HTML block-level 요소는 아래와 같다

■ Inline 요소

▶ inline 요소는 새로운 줄에서 시작하지 않는다.

▶ inline 요소는 필요한 만큼의 너비만 차지한다.

<span>Hello World</span>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span 

▶ HTML inline 요소는 아래와 같다

※ inline 요소는 block-level 요소를 포함할 수 없다.

■ <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>
</div>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div 

■ <span> 요소

▶ <span> 요소는 텍스트의 일부 혹은 문서의 일부를 표시하는 데 사용되는 inline 컨테이너이다.

▶ <span> 요소는 필수 속성은 없지만 "stlye", "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>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_span 

출처 : https://www.w3schools.com/html/html_blocks.asp