1 개요[ | ]
- CSS display 속성
| 값 | 설명 |
|---|---|
| none | 보이지 않게 함(공간도 없음) |
| block | 블록 형식 |
| inline | 인라인 형식 |
| inline-block | 인라인 블록 형식 |
| table | 테이블 형식 |
| table-cell | 테이블 셀 형식 |
2 예시[ | ]
block, inline, inline-block 차이 문서를 참고하십시오.
html
Copy
<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 같이 보기[ | ]
- CSS display, visibility
- CSS visibility 속성
- HTML 블록 요소, 인라인 요소
- CSS 오른쪽 aside 레이아웃 예제
- CSS float 자식들 포함하기