Front-End/CSS

[CSS] Ex08_display.html

이뮨01 2023. 6. 11. 18:42

요소가 화면에 보이는 방식을 지정해 주는 display 속성을 배우다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--    display: 요소가 화면에 보이는 방식 지정 
        (1) block -> 웹 페이지의 가로공간을 모두 차지하는 속성
        -> widht, height 설정 가능
        -> display: inline 으로 변경가능
        ex) div, p, h1, ul, ol, table, ... 

        (2) inline -> 컨텐츠 내용이 끝나는 지점까지 너비를 가지는 속성
        ->  widht, height 설정 불가능
        -> display: block 으로 변경가능
         ex) span, a, 
    -->
    <style>
        div, span{
            width: 200px;
            height: 200px;

        }
        div{
            background-color: lightgreen;
            display: inline;
        }
        span{
            background-color: lightcyan;
            display: block
        }
    </style>
</head>
<body>
    <div>div 태그</div>
    <div>div 태그</div>
    <div>div 태그</div>

    <span>span태그</span>
    <span>span태그</span>
    <span>span태그</span>
</body>
</html>

결과

block: 웹 페이지의 가로공간을 모두 차지하는 속성 (세로로 쌓임, 블록 쌓기 느낌)

  • width, height 설정 가능
  • display: inline, inline-block으로 변경 가능
  • ex) div, p, h1, ul, ol, table...

inline: 컨텐츠 내용이 끝나는 지점까지 너비를 가지는 속성 (콘텐츠 크기만큼만 영역을 가짐)

  • width, height 설정 불가능
  • display: block, inline-block으로 변경 가능
  • ex) span, a...

inline-block: 요소의 크기조절을 하고싶지만 위치는 그대로 두고 싶을 때 사용하는 속성

  • width, height 설정 가능

 

 

저작자표시 (새창열림)