c08. CSS 디스플레이 프로퍼티

CSS 디스플레이 프로퍼티

디스플레이 프로퍼티는 레이아웃을 관리하기 위한 매우 중요한 CSS 프로퍼티입니다.

태그의 유형에 따라 기본 디스플레이 프로퍼티 값이 정해지는데, 기본 디스플레이 값은 블록(block)과 인라인(inline)이 있습니다.

블록-레벨(block-level) 태그는 항상 새로운 줄에서 시작하고 (가능한한) 화면의 전체폭을 채웁니다.

블록-레벨 태그들은 아래와 같습니다.

<div>, <h1> 에서 <h6>, <p>, <form>, <header>, <footer>, <section>

인라인(Inline) 태그는 새로운 라인에서 시작하지도 않고, 꼭 필요한 폭 만큼만 갖습니다.

인라인 태그들은 아래와 같습니다.

<span>, <a>, <img>

Display: none; 은 자바스크립트에서 사용되어, 태그를 삭제/재생성하기 보다는, 숨기고 보이게 할 때 사용합니다.

자바스크립트와 같은 <script> 태그에서는 display: none; 을 기본값으로 사용합니다.

그래서 스크립트 안의 내용이 안보이고 영역도 차지 하지 않습니다.

기본 디스플레이 값 display: none; 을 인라인 값 display: inline; 으로 <li> 태그에 지정하면, 수평 메뉴 바를 생성할 수 있습니다.

태그를 숨기는 프로퍼티는 두가지가 있는데, display:none 과 visibility:hidden 입니다.

디스플레이 프로퍼티를 none 으로 바꾸면 그 태그는 숨겨지게 되고, 웹페이지에서는 마치 애초부터 그 태그가 없었던 것처럼 표시됩니다.

visibility:hidden; 프로퍼티도 태그를 숨김니다만, 그 태그가 그자리에서 계속 영역을 차지하게 됩니다.

즉 보이지는 않지만 레이아웃에는 그대로 남아 있습니다.

<style>
li {display: inline;}
p.visHidden {visibility: hidden;}
p.disNone {display: none;}
</style>
<p>검색사이트로 이동하기</p>
<ul>
<li><a href="http://www.naver.com/" target="_blank">네이버</a></li>
<li><a href="http://www.daum.net/" target="_blank">다음카카오</a></li>
<li><a href="https://www.google.com/" target="_blank">구글링</a></li>
</ul>
<hr />
<p class="visHidden">p.visHidden {visibility: hidden;}</p>
<hr />
<p>visibility: hidden; 은 영역은 남겨둡니다(위).</p>
<hr />
<p class="disNone">p.disNone {display: none;}</p>
<hr />
<p>반면 display: none; 은 영역까지도 없애버립니다(아래).</p>
<hr />

---

검색사이트로 이동하기

• 네이버
• 다음카카오
• 구글링

---

p.visHidden {visibility: hidden;}

---

visibility: hidden; 은 영역은 남겨둡니다(위).

---

p.disNone {display: none;}

---

반면 display: none; 은 영역까지도 없애버립니다(아래).

---

[광고] Udemy 동영상 강의로 보기