[HTML/CSS] display 속성 알아보기

[HTML/CSS] display 속성 알아보기

 

display 종류 정리

종류	inline-block, inline	block	none
너비	너비가 설정되어 있지 않다면,  최소한으로 줄어든다.	너비가 설정되어 있지 않다면,  최대한으로 넓어진다.	없어진다.
높이	높이가 설정되어 있지 않다면,  최소한으로 줄어든다.	높이가 설정되어 있지 않다면, 최소한으로 줄어든다.	없어진다.
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개가 나온다.	한 줄을 무조건 혼자 쓴다.	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를  사용해서 정렬	-
대표되는 태그	img(inline-block 종류) a, span(블록 아닌 inline 종류)	div, nav(block)

display 속성의 특징

inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. 모든 태그들은 display 속성 값을 다르게 해주면 속성을 바꿀 수 있다.

 

 

display 속성 변경 활용

만약 nav 태그를 display: inline-block; 으로 설정할 경우, 높이가 최소한으로 줄어들어 보이지 않게 된다.

span{
	display: block;
}

nav{
	display: inline;
}

display 본질

inline-block은 글자화가 되어서 나타난다. 만약, 블록형을 inline-block으로 만들어 놓는다면, 태그가 한 개의 글자처럼 인식이 된다.

만약 div 태그를 inline-block으로 만들었고, margin을 어느 정도 준 상태라면, 사각형의 박스 안에 담긴 각각의 내용들이 일정 간격을 두면서 떨어져있는 것을 볼 수 있다.