HTML-블록과 인라인
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.
대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다.
- 블록(block)
- 인라인(inline)
블록은 새로운 라인에서 시작하고 모든 줄을 사용하고, 인라인은 내용만큼만 자리를 사용합니다.
블록(block) 타입의 요소
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
<p>,<div>,<h>,<ul>,<ol>,<form>요소는 display 속성값이 블록(block)인 대표적인 요소입니다.
<div>요소
<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.
인라인(inline) 타입의 요소
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
<span>,<a>,<img>요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.
<span>요소
요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.
요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.