Display 알아보기

SUM·2020년 10월 16일

Display에 대하여

HTML의 레이아웃을 결정하는 중요한 속성이다.

Display 속성 종류

inline
block
inline-block
flex
table
none

등이 있다.

한 요소는 하나의 display를 가지고 있다.
크게는 inline요소와 block요소로 나뉜다.

각 속성별로 특징과 차이점 등을 알아보자.

1-1. inline

특징

inline요소는 width와 height가 contents크기만큼 정해져 있다.
상단하단 여백을 설정하지 못한다.
--->'line-height' 를 통해 상하단 여백을 만들어낼 수 있다.
기본적으로 옆으로 정렬시 4px정도의 여백이 생긴다.
--->html안에서 엔터로 줄넘김을 한 경우 생긴다.

span, a, b, nav, i, img, strong, label 등이 inline 요소 태그들이다.

html

<span class="inline">인라인</span>
<span class="inline">인라인</span>
<span class="inline">인라인</span>

css

.inline {
    display: inline;
    font-size: 5em;
    background-color: brown;
    color: white;
}

실행화면

inline

1-2. block

특징

블록요소는 width가 기본적으로 100%다.
- 웹페이지상 한 줄을 차지하고있다.
- width, height값을 변경 할 수 있다.
옆으로 이어서 정렬하는 방법
- float을 사용한다.(but 하더라도 clear를 시켜주어야 하는 경우가 많다.)
- 부모요소의 display를 flex로 바꿔준다.
- display를 inline-block으로 변경해준다.

p, div, h#, nav, ul, li 등이 block 요소 태그들이다.

HTML

<div class="block">블록</div>

CSS

.block {
    display: block;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: yellow;
}

실행화면

1-3. inline-block

특징

inline-block 요소는 inline 요소처럼 옆으로 개체가 정렬이 된다.
정렬을 text-align으로 할 수 있다.(부모가 block요소일때)
block 요소처럼 widthe값과 height값을 가질 수 있다.

inline과 차이점

margin-top과 margin-bottom 적용이 가능하다.

line-height적용이 쉽다.

	대신 inline태그는 특정태그를 그대로 사용하면 되지만 inline-block의 경우는 div태그안에 묶어서 설정해주어야 한다.>>> 디테일하게 작업이 가능함

HTML

<div class="contain_align">
	<div class="inline_block">인라인블록</div>
	<div class="inline_block">인라인블록</div>
	<div class="inline_block">인라인블록</div>
</div>

CSS

.contain_align {
    text-align: center;
}

.inline_block {
    display: inline-block;
    background-color: violet;
    width: 300px;
    height: 100px;
    padding: 20px;
    line-height: 100px;
    text-align: center;
}

실행화면

2-1. flex

특징

flex요소는 부모의 display를 flex로 설정하여 유연한 box layout을 설정해줄 수 있다.
정렬 속성으로는 align-content, align-items, align-self, justify-content 등이 있다.
--> flex 정렬 속성은 추후 따로 담아보도록 하겠다.

2-2. table

특징

테이블은 레이아웃을 제어할 때 사용된다.
html의 table태그의 이점을 사용할 수 있다.
굳이 table태그를 쓰지 않고도 td,tr등의 강점을 이용할 수 있다.
inline요소처럼 vertical-align을 사용하여 세로정렬을 할 수 있는 등 활용도가 높은 속성이다.

HTML

<div class="boxwrap">
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
    	</div>
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
    	</div>
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
	</div>
    	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.내용입니다만내용입니다만내용입니다만내용입니다			만내용입니다만내용입니다만내용입니다만</p>	
        </div>
</div>

CSS

.boxwrap {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.boxwrap .box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid gray;
    background-color: thistle;
}