티스토리 뷰

CSS

Display 속성

placidcy 2022. 1. 20. 17:53

Display

display 속성은 요소를 어떻게 보여줄지를 결정한다
인라인 요소들을 블록 요소로 보이게 만들 수 있고 블록 요소를 인라인처럼 보이게 만들 수도 있다

 

1. display:inline

요소를 감쌀정도의 크기만을 보여준다, 줄바꿈이 되지 않고 width값과 height값을 지정할 수 없다

2. display:block

display의 기본값, 기본적으로 width값이 자신의 컨테이너 크기의 100%가 되게 설정한다

3. display:none

박스가 생성되지 않고 공간을 차지하지 않는다

4. display:inline-block

인라인과 블록의 특성을 합쳐놓은 속성, 기본적으로 인라인의 속성을 지니고 있지만 크기를 바꿔줄 수 있다

 

HTML


<body>
    <div class="div1">This is div1
    <div class="div2">This is div2
    <div class="div3">This is div3
    <div class="div4">This is div4
</body>

CSS


  <style>
        .div1 {
            display: none;
            background-color: blue;
        }
        .div2 {
            display: block;
            background-color: brown;
        }
        .div3 {
            display: inline;
            background-color: cornflowerblue;
        }
        .div4 {
            display: inline-block;
            background-color: darkgray;
        }
    </style>

결과

'CSS' 카테고리의 다른 글

Padding  (0) 2022.02.04
Margin  (0) 2022.02.04
Clear  (0) 2022.02.04
float  (0) 2022.02.04
Flex 속성(컨테이너에 적용하는 속성)  (0) 2022.01.25

UP NEXT : CSS

댓글
© 2018 webstoryboy