[HTML] Display 속성(block/inline)

HTML의 렌더링 방식 - HTML이 브라우저에 태그를 렌더링 할 때에는 display 속성에 따른다.

 * 렌더링 : 서버로부터 HTML파일을 받아서 브라우저에 뿌려주는 과정. 즉 HTML파일을 받아와서 우리에게 보여주는것

 

display 속성 - 요소를 어떻게 표시할지를 선택하는 것

 

1. block

: 혼자 자리를 차지해야하는 요소 

앞뒤로 다른 요소들을 밀어내고 한 줄을 차지함

• block은 height와 width 값을 지정 할 수 있다.
• block은 margin과 padding을 지정 할 수 있다.

display 속성 값이 블록인 요소는 언제나 새로운 줄(line)로 바뀜. 해당 줄의 모든 너비를 차지함(width: 100%)

<p>

<h1>~<h6>

<div>  

<ul>

<ol>

<form>

 

<div>요소

주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용

 

 

2. inline

:어울려 지낼 수 있는 요소

• width와 height를 명시 할 수 없다.
• margin은 위아래엔 적용 되지 않는다.
• padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

다른 요소들과 나란히 배치될 수 있음. 새로운 줄로 바꾸지 않고 다른 요소와 같이 표시됨

요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼 차지함

width, height 영역 지정 불가능

<span>

<a>

<img>

<strong>

 

<span>요소

텍스트의 특정 부분을 묶는데 자주 사용되는 inline 요소

특정 부분에 따로 스타일을 적용하기 위해 사용

 

 

 

 

---

 

div는 block의 대표적인 태그, span은 inline의 대표적인 태그

 

그럼 inline과 block의 개념에 대해 먼저 알아볼게요.

모든 태그들은 display 속성을 가지고 있어요.

display 속성의 값으로 들어갈 수 있는 대표적인 친구들이 바로 inline과 block입니다.

 

지금까지는 잘 모르고 썼겠지만

a태그, img태그, span태그 등은 display의 속성을 inline으로 기본값으로 가지고 있구요.

h1~h6 태그, p태그, div태그 등은 display의 속성을 block으로 기본값으로 가지고 있어요.

 

인라인과 블럭, 도대체 뭐가 다를까요?

다음 사진들을 보면서 이해해볼게요.

 

 

인라인 속성은 개행하지 않고 한 줄에 다른 요소들과 함께 있으려는 속성이라고 생각하시면 되요.

인라인 속성의 태그들은 너비/높이, 마진 등의 css속성이 정상적으로 작동하지 않아요.

때문에 레이아웃을 잡으려는 목적으로는 사용하면 안되겠죠?

보통 문장 안의 글자를 강조하거나 디자인을 입히려는 목적으로 주로 사용됩니다.

 

 

 

 

 

block속성은 하나의 태그가 그 자체로 한 줄을 완전히 차지하게 되요.

block속성인 경우 기본적으로 width(너비)값을 auto로 가지고 있는데, 이는 사진처럼 부모의 너비만큼을 잡게 됩니다.

 

또한, 인라인 요소와는 다르게 width,height,margin 등 거의 모든 css값들이 정상적으로 적용됩니다.

때문에 공간을 나누거나 레이아웃을 잡을 때는 필수적으로 block 속성의 태그를 사용하셔야됩니다!

 

 

출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=inceleb&logNo=220792546964