CSS Display 속성

 

- display 속성은 요소가 웹 페이지에 표시되는 방식을 기본 표시 동작으로 변경하기 위해 사용한다.

- 기본 표시 값은 block 또는 inline이다.

 

  • block 요소 : 항상 새 줄에서 사용 가능한 전체 너비를 차지한다.
  • block 예시 : <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
  • inline 요소 : 새 줄에서 시작하지 않으며, 필요한 만큼만 너비를 차지한다.
  • inline 예시 : <span>, <a>, <img>

 

Display 속성 값

 

값 속성값 설명
inline 요소를 inline 요소로 표시한다.
block 요소를 block 요소로 표시한다.
contents 컨테이너를 사라지게 만들어 요소들의 하위 요소를 DOM에서 다음 Level 위로 만든다.
flex 요소를 block 수준 플렉스 컨테이너로 표시합니다.
grid 요소를 block 수준 그리드 컨테이너로 표시합니다.
inline-block 요소를 인라인 수준 블록 컨테이너로 표시합니다. 요소 자체는 인라인 요소로 형식화되어 있지만 높이 및 너비 값을 적용할 수 있습니다.
inline-flex 요소를 inline 수준 플렉스 컨테이너로 표시합니다.
inline-grid 요소를 inline 수준 그리드 컨테이너로 표시합니다.
inline-table 요소가 inline 수준 테이블로 표시됩니다.
list-item 요소가 <li> 요소처럼 동작한다.
run-in context에 따라서 요소를 block 혹은 inline으로 표시한다.
table 요소가 <table> 요소처럼 동작한다.
table-caption 요소가 <caption> 요소처럼 동작한다.
table-column-group 요소가 <colgroup> 요소처럼 동작한다.
table-header-group 요소가 <thead> 요소처럼 동작한다.
table-footer-group 요소가 <tfoot> 요소처럼 동작한다.
table-row-group 요소가  <tbody> 요소처럼 동작한다.
table-cell 요소가  <td> 요소처럼 동작한다.
table-column 요소가  <col> 요소처럼 동작한다.
table-row 요소가  <tr> 요소처럼 동작한다.
none 요소가 완전히 제거한다.
initial 속성을 기본값으로 설정한다.
inherit 상위 요소로부터 이 속성을 상속받는다.

 

Display - none 속성

 

- diplay:none; 요소는 다시 생성하지 않고 숨기거나 표시하기 위해 사용된다.

- CSS로 스타일을 지정하고, JavaScript와 같이 사용한다. 

 

표기값 정의

 

- 모든 요소에는 기본값이 있지만, 재정의할 수 있다.

- 인라인 요소를 블록 요소로 변경하거나, 그 반대로 변경할 수 있다.

  변경하면 특정 방식으로 보이면서 웹 표준을 따르기 좋다.

 

diplay:none VS visibilty:hidden ; 무슨 차이일까?

 

- 두 방식의 공통점 : 사용하면 해당 요소를 숨긴다.

- diplay:none 특징 : 해당 요소가 숨겨지고, 해당 요소가 없는 것처럼 표시한다.

- visibilty:hidden 특징 : 해당 요소가 숨겨지지만 여전히 레이아웃에 자리가 남아있다.

 

 

마무리 실습 1 - css_display.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100%;
            height: 200px;
            border: 1px solid red;
            background-color: yellow;
            display: none;
        }
    </style>
</head>
<body>
    <p>style display : 화면 숨김</p>
    <br><br><br><br><br><br>
    <div id="div1">
        우리나라 우리님군 황천이 도으사<br>
        님군과 백성이 한가지로<br>
        만만세에 길거하야 태평독립 하여보세<br>
    </div>
    <p>브라우저의 영역을 차지하지 않고, 표시가 안됨</p>
</body>
</html>

 

마무리 실습 2 - css_visibility.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100%;
            height: 200px;
            border: 1px solid red;
            background-color: yellow;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p>style visibility : 화면 숨김</p>
    <br><br><br><br><br><br>
    <div id="div1">
        우리나라 우리님군 황천이 도으사<br>
        님군과 백성이 한가지로<br>
        만만세에 길거하야 태평독립 하여보세<br>
    </div>
    <p>브라우저의 영역을 차지하고, 표시가 안됨</p>
</body>
</html>

 

저작자표시 비영리 변경금지

'Devlopment > HTML & CSS' 카테고리의 다른 글

[CSS] Layout Float  (0) 2024.01.07
[CSS] 레이아웃 위치 - Layout Position  (1) 2024.01.07
[CSS] 표(Tables) 생성 및 속성 실습  (0) 2024.01.07
[CSS] 스타일 링크(Style Links)  (1) 2024.01.07
[CSS] 텍스트 서식 (Text)  (0) 2024.01.07

티스토리툴바