display 속성 핵심 정리

block

ex) div, p , table h1~h6 등등...

기본 너비 값 : 100%

한줄에 하나씩만 배치됨

너비 값, 높이 가질 수 있음

상하좌우 margin 가능

 

inline

ex) span, a,em, string ...

글자 개별적으로 꾸미는 서식 관련 태그

기본 너비 값 : 컨텐츠 너비 값(text의 글자 넓이 만큼)

한줄에 여러 개 배치 가능

크기 값 가질 수 없음

상하 margin 안되고 좌우만 가능

 

inline-block

ex) img, input, button, textarea , iframe ...

이미지, 대부분 폼 요소

기본 너비 값 : 컨텐츠 너비 값

한줄에 여러개 배치 가능

크기값 가질 수 있음

상하좌우 margin 가질 수 있음

 

셋다 기본적으로 padding은 가능하다!

---

 

 

1.중간으로 가게 하기 위한 방법

 

block만 margin auto 가능

inline, inline-block 만 text-align : center 가능

 

2.display 요소 바꾸기

position : absolute or fixed

float : left, right

로 바뀌면 inline-block으로 바뀜

 

inline -> block

으로 display : block 바뀌면 자동으로 너비는 100%됨

inline-block -> block

으로 display : block 바뀌면 자동으로 너비가  100%되지 않기 때문에 width:100% 해줘야함

 

가상클래스 ::before, ::after 일 때는 display : inline가 기본적인 값임

 

웹 표준을 맞추기 위해서는

block 안에 inline 이나 inline-block 태그 써야함 반대는 안됨

<p>
	<h1>안녕하세용</h1>
</p>

이렇게는 할 수 없음 왜냐하면 p는 inline 태그고 h1는 block 태그여서 웹 표준에 맞지 않음