1. display
Element(html 정보)의 어떤 형식으로 전시할지 정의하는 속성
2. inline & block
(display:inline)
Element(html 정보)를 inline 요소로 정의함 (대표적 inline 배치 tag : a, span)
(display:block)
Element(html 정보)를 block 요소로 정의함 (대표적 block 배치 tag : div, p)
(display:inline-block)
Element(html 정보)를 inline-block 요소로 정의함
3. 속성 실습
1. Element(html 정보)를 넣어준다.
1 2 3 4 5 6 7 8 9 | <body> <span>abc</span> <span>def</span> <span>ghi</span> <hr/> <div>jkl</div> <div>mno</div> <div>pqr</div> </body> | cs |
2. css 정보를 넣어준다.
1 2 3 4 5 6 7 | <style> span,div { background-color:#fff000; color:#000fff; width:100px; height:100px;} </style> | cs |
3. 결과
inline 요소는 text 중심
block 요소는 구역 중심
4. css 정보 변경
1 2 3 4 5 6 7 8 | <style> span,div { background-color:#fff000; color:#000fff; width:100px; height:100px; display:inline; </style> | cs |
5. 결과
6. css 정보 변경
1 2 3 4 5 6 7 8 | <style> span,div { background-color:#fff000; color:#000fff; width:100px; height:100px; display:block; </style> | cs |
7: 결과
8. css 정보 변경
1 2 3 4 5 6 7 8 | <style> span,div { background-color:#fff000; color:#000fff; width:100px; height:100px; display:inline-block; </style> | cs |
9: 결과
'CSS > CSS 기초' 카테고리의 다른 글
| transform & transition (0) | 2018.05.01 |
|---|---|
| :link :visited :hover :active 속성 (0) | 2018.03.29 |
| 960 Grid System (0) | 2018.03.02 |
