display 속성 정리

display 속성 정리

1. display 속성 (CSS 사전 바로가기)

 - 웹 페이지의 레이아웃(Layout)을 결정하는 CSS의 중요한 속성 중 하나

 - inline-bolck or inline, block, none이 있음

종류	inline-block, inline	block	none
너비	너비가 설정되어 있지 않다면, 최소한으로 줄어듦	너비가 설정되어 있지 않다면, 최대한으로 넓어짐	없어짐
높이	높이가 설정되어 있지 않다면, 최소한으로 줄어듦	높이가 설정되어 있지 않다면, 최소한으로 줄어듦	없어짐
line 사용	한 줄에 최대한 여러개가 나옴	한 줄을 무조건 혼자 사용
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬

    ※ 예외 사항

        - a, span 엘리먼트는 기본적으로 display가 inline

        - img 엘리먼트는 기본적으로 display가 inline-block

        - inline 요소에는 width, height, margin, padding 속성이 제대로 적용되지 않음

 

2. block

 - 너비가 auto로 설정되어 있으며, 높이는 설정하지 않으면 최소한으로 줄어듦

- div, section, nav, article의 기본 display 속성 값은 block

<div>1</div>
<section>2</section>
<article>3</article>

div {background-color: red;}
section{background-color: blue;}
article{background-color: green;}

div, section, article {
	display: block;
}

 

 - 출력시, 다음과 같이 한 엘리먼트 당 한 줄씩 차지함

    ※ 엘리먼트 : 단위 개체로 간주하는 문서의 논리적 요소

 

3. inline-block, inline

 - 설정한 width, height만큼 위치하고 싶을 경우, 사용 (한 줄을 차지하지 않음)

 - inline-block은 inline속성처럼 요소들이 한줄로 보이고, <block> 태그에 적용할 수 있는 속성들도 사용할 수 있는 속성값

<div>1</div>
<section>2</section>
<article>3</article>

div {background-color: red;}
section{background-color: blue;}
article{background-color: green;}

div, section, article {
    width: 100px;
    height: 100px;
    display: inline-block;
}

 

 - 출력 시, 나란히 한 줄에 출력됨