CSS

display 속성 (inline, block level,,,,)

엔지디 2021. 12. 11. 10:20

Display 속성은 해당요소(태그)가 브라우져 화면에 어떻게 나타는 지를 결정합니다. Display 속성 값에는 여러 속성 값이 있지만 브라우져가 모든 값을 지원하지는 않습니다. 브라우져에서 지원하는 대표적인 속성으로는 block, inline, inline-block, none등이 있습니다.

 

Block 속성 : 한 라인에 하나의 block 요소가 배치됩니다. 기본 너비 값은 브라우져 화면의 100%를 차지합니다. Width, height의 크기 값을 가질 수 있으며 상하 좌우 마진 값을 가질 수 있고, 상하 좌우 패딩 값도 가질 수 있습니다. 다음과 같은 태그들이 block 속성에 해당합니다.

h1 ~ h6, div, p, ul, ol, li, header, nav, aside, main, section, article, footer, figure, figcaption, table, dt, dd, tr, th, tr, form…

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diplay 속성 01</title>
    <style>
        *{
            margin:0;
        }
    
        div{
            display:block; /*명시적으로 block 속성 표시 */
                              /* 생략가능 */ 
            border:1px solid #000;
        }
        div:nth-child(1){background:rgb(133, 179, 240);}
        div:nth-child(2){background:rgb(101, 155, 226);}
        div:nth-child(3){
            background:rgb(87, 123, 170);
            width:300px;
            height:40px;
            margin:20px;
            padding:10px;
        }
        div:nth-child(4){
            background:rgb(101, 155, 226);
            width:300px;
            height:40px;
            margin:20px;
        }
    </style>
</head>
<body>
    <div>Block 요소 1</div>
    <div>Block 요소 2</div>
    <div>Block 요소 3</div>
    <div>Block 요소 4</div>
</body>
</html>

[예제 1-1]

[그림 1-1]

 

[그림1-1][예제1-1]의 실행 결과로, “Block 요소 1” “Block 요소 2”는 한 줄에 하나의 요소가 배치되며, 화면 너비의 100%를 차지합니다. “Block 요소 3”width, height 값을 가지며, 상하 좌우 마진 값을 가집니다. 그리고 “Block 요소 3”처럼 패딩 값도 가질 수 가질 수 있습니다. (패딩 값 10px 설정)

 

Block 요소 3 Block요소 4사이에는 상하로 마진 값 30px씩 주어져 60px의 빈 공간을 차지해야 하지만 실제로는 30px의 값만 가집니다. 요소가 세로로 배치될 때 발생하는 문제로 마진 값이 겹쳐질 때 큰 값만 적용됩니다. 이를 마진 중첩이라 하는 데, 여기서는 마진 값이 같으므로 요소의 상하 사이에 30px만 적용됩니다.

 

 

 

 

inline 속성 : 한 줄에 여러 요소를 배치합니다. 기본 너비 값은 콘텐츠의 크기 값입니다. 너비 값, 높이 값(width, height)을 가질 수 없고, 상하 마진 값을 가질 수 없습니다. 좌우 마진 값은 가질 수 있습니다. 인라인 속성에 해당하는 태그로는 다음과 같습니다.

Span, a, big, small, u, l, q, b, strong, label, sub, sup…

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diplay 속성 02</title>
    <style>
        *{
            margin:0;
        }
        span{
            display:inline; /* 명시적으로 inline 속성 표시 */
                               /* 생략가능 */
            border:1px solid #000;
        }
        span:nth-child(1){background:rgb(133, 179, 240);}
        span:nth-child(2){background:rgb(101, 155, 226);}
        span:nth-child(3){ 
            background:rgb(87, 123, 170);
            width:300px;
            height:40px;
            margin:20px; /* 좌우로만 마진 값 적용됨 */
            padding-left:40px; /* 좌우로만 패딩 값 적용됨 */
            padding-right:40px;
        }
    </style>
</head>
<body>
    <span>Inline 요소1</span>
    <span>Inline 요소2</span>
    <span>Inline 요소3</span>
    <span>Inline 요소4</span>
    <span>Inline 요소5</span>
    <span>Inline 요소6</span>
    <span>Inline 요소7</span>
    <span>Inline 요소8</span>
</body>
</html>
[예제 1-2]
 
 

[그림 1-2]

 

 

inline-block 속성 : inline 속성처럼 한 줄에 여러 요소를 배치하며, 기본 너비 값은 컨텐츠의 크기 값입니다. Block 속성처럼 크기 값을(widh, height)을 가질 수 있습니다. 또 상하 좌우 마진 값을 가질 수 있습니다. 인라인-블록 속성에 해당하는 태그로는 다음과 같습니다.

 

img, input, select, button, textarea, audio, video…

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diplay 속성 03</title>
    <style>
        *{
            margin:0;
        }
        button{
            display:inline-block; /* 명시적으로 속성 표시*/
                                       /* 생략 가능 */
        }
        button:nth-child(1){
            background:rgb(231, 176, 176);
        }
        button:nth-child(2){
            background:rgb(233, 159, 159); 
            width:150px;
            height:60px;
            margin:20px;  
        }
        button:nth-child(3){
            background:rgb(240, 132, 132);
        }
        button:nth-child(4){
            background:rgb(231, 64, 64);
        }
        button:nth-child(5){
            background:rgb(224, 198, 198);
        }
        button:nth-child(6){
            background:rgb(226, 167, 167);
            margin:20px;  
            padding:10px       
        }
    </style>
</head>
<body>
    <button>버튼 요소 01</button>
    <button>버튼 요소 02</button>
    <button>버튼 요소 03</button>
    <button>버튼 요소 04</button>
    <button>버튼 요소 05</button>
    <button>버튼 요소 06</button>
</body>
</html>
[예제 1-3]
 

[그림 1-3]

[그림1-3]에서 요소가 width, height 값을 가지며, margin 값도 가질 수 있습니다. 대신 inline 속성처럼 한 줄에 여러 요소가 배치됩니다.

 

 

 

none 속성 : 이 속성은 요소를 화면에 보이지 않게 합니다. 그리고 공간도 차지하지 않습니다. visibilityt:hidden속성과 비교되는 데, 이 속성은 화면에는 보이지 않으나 빈 공간은 차지합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display 속성 04</title>
    <style>
        div{
            border:1px solid #000;
        }
        div:nth-child(2){
            display:none;
        }
        div:nth-child(5){
            visibility:hidden;
        }
    </style>
</head>
<body>
    <div>Test01</div>
    <div>Test02</div>
    <div>Test03</div>
    <div>Test04</div>
    <div>Test05</div>
    <div>Test06</div>
</body>
</html>
[예제 1-4]
 
 

[그림 1-4]

 

[그림 1-4]에서 “Test02” 박스는 보이지 않습니다. “diplay:none”으로 지정되었기 때문입니다. “Test05” 박스는 보이지 않으나 공간은 차지하고 있습니다. visibility:hidden 으로 지정되었기 떄문입니다. 

 

display 속성 바꾸기 : display 속성은 바뀔 수가 있습니다. Block 속성을 가지는 div 태그를 inline 속성으로 바꾸거나 span 태그의 속성을 inline-block 등으로 바꿀 수가 있습니다. 다음 예제를 봅시다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>display 속성 07</title>
    <style>
       div{
           background:rgb(238, 238, 163);
       }
       #div01{
           height:50px;
           margin:30px;
       }
       #div02{
           display:inline;
           width:200px;
           margin-top:300px;
       }
       #div03{
           display:inline-block;
           width:200px;
           height:50px;
           margin:30px;
       }
    </style>
</head>
<body>
    <div id="div01">div 태그 01</div>
    <div id="div02">div 태그 02</div>
    <div id="div03">div 태그 03</div>
</body>
</html>

[예제 1-5]

 

[그림 1-5]

 

id“div01”div 태그는 block 속성을 가지므로 height 값과 margin값을 화면에 잘 반영합니다. id“div02”div 태그는 속성을 inline 속성으로 바꾸었으므로 wirdth 값과 margin-top 값이 반영이 안됩니다. 마지막으로 id“div03div 태그는 inline-block 속성을 가지게 되었으므로 width, height, margin 값이 브라우져 화면에 잘 반영됩니다.

 

다른 태그들도 각각의 속성을 무시하고 다른 속성으로 바꿀 수가 있습니다. 스타일링하다가 필요에 따라 해당 속성으로 바꾸어 주면 됩니다.

'CSS' 카테고리의 다른 글

컨텐츠 중앙정렬  (0) 2021.12.13
display:inline-block 으로 메뉴 만들기  (0) 2021.12.11