반응형

display 속성

​

1. block

Element 를 block 로 설정하면 그 줄에는 그 Element 말곤 존재할수없다



​

​

2. inline-block

높이 위치등을 설정하였을경우 그 속성의 값을 가지고 차례대로 나열된다



​

​

​

3. inline

높이 위치등이 설정된것을 다 무시하고 오로지 컨텐츠 내용 (텍스트) 로만 크기가 할당된다.



​

​

​

​

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ display: inline; }</style> </head> <body> <div style="width: 100px; height: 100px; background-color: red;">Display:inline width:100 height:100</div> <div style="width: 100px; height: 100px; background-color: green;">Display:inline width:100 height:100</div> <div style="width: 100px; height: 100px; background-color: blue;">Display:inline width:100 height:100</div> <!-- inline-inline width:100 height:100 --> // 이걸로 교체해가면서 테스트 <!-- inline width:100 height:100 --> </body> </html>

​






반응형

'디자인 > CSS' 카테고리의 다른 글

CSS - 우선순위 cascading(캐스캐이딩)  (0) 2019.03.02
CSS - 가상클래스(pseudo)  (0) 2019.03.02
CSS - 선택자(selector)  (0) 2019.03.02
CSS - @media 쿼리  (0) 2019.03.02
CSS - 애니메이션 @keyframes  (0) 2019.03.02

+ Recent posts

티스토리툴바