[HTML] 블록과 인라인

블록과 인라인

 

HTML 의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.

대부분의 HTML 요소는 이러한 display 속성값으로 블록(block) 이나 인라인(inline) 의 값 중 하나를 가지게 됩니다.

 

<p>, <div>, <h>, <ul>, <ol>, <form> 요소는 대표적인 블록타입의 요소입니다.

<span>, <a>, <img> 요소는 대표적인 인라인 타입의 요소입니다.

 

<div> 요소

 

<div> 요소는 다른 HTML 요소들을 하나로 묶는데 자주 사용되는 대표적인 블록 요소입니다.

주로 여러 요소들의 스타일을 한번에 적용하기 위해 많이 사용됩니다.

 

<div style="background-color:darkgray; color:red; text-align:center">
	<h1>div요소의 스타일 적용</h1>
	<p>내부에 있는 아이들도 부모인 div와 같은 스타일이 적용됩니다</p>
</div>

 

위 코드의 결과 !!

 

 

 

<span> 요소

 

<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.

주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.

 

<h1>span요소 스타일 적용</h1>
<p> 인라인 
<span style="border: 3px solid red">span요소로 요기만</span>
스타일 적용해보기</p>

 

위 코드의 결과 !!

 

 

요기까지 임미다.