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 |