display 속성 정리

html display

 

● Block 요소 특징

1) 넓이 값 미지정시 전체 넓이 100%를 다 쓴다.

2) 넓이 값, 높이 값 지정이 가능하다.

3) 자동으로 줄 바꿈 된다.

4) 블록 요소는 블록 요소와 인라인 요소 모두 포함 가능

 

 

● Inline 요소 특징

1) 자동 줄 바꿈 안되고 한 줄로 선처럼 나열된다.

2) 가로, 세로 사이즈 적용 불가능. 즉 태그로 감싼 글자 자체의 넓이와 높이가 태그의 크기

3) 일부 요소는 가로, 세로 사이즈 적용됨 ex) img 태그

4) 인라인 요소 안에는 인라인 요소만 포함된다.

5) 인라인 요소에 넓이와 높잇값 주기 위해서는 block화 시켜야 한다. (display:block, inline-block)

6) 인라인 요소는 좌우 여백만 줄 수 있다.

 

	inline-block, inline	block	none
너비	최소한으로 줄어든다	최대한으로 넓어진다	없어진다
본질	글자화	블록화	-
line 사용	한 줄에 여러개가 나온다	한 줄 무조건 혼자 쓴다	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, magin-right 사용해서 정렬	-