CSS display 속성

1 개요[ | ]

CSS display 속성
설명
none 보이지 않게 함(공간도 없음)
block 블록 형식
inline 인라인 형식
inline-block 인라인 블록 형식
table 테이블 형식
table-cell 테이블 셀 형식

2 예시[ | ]

<style>
span {
	width: 100px;
	height: 60px;
	margin: 10px;
}
.my-block { display: block; background-color: salmon; }
.my-inline { display: inline; background-color: lightgreen; }
.my-inline-block { display: inline-block; background-color: skyblue; }
</style>
 
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
 
<hr><hr><hr>
 
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
 
<hr><hr><hr>
 
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>

3 같이 보기[ | ]

4 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}