CSS - display 속성 :: 아빠개발자의 노트

CSS - display 속성

2019. 3. 2. 01:32

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

아빠개발자의 노트

CSS - display 속성

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

+ Recent posts

티스토리툴바