• Q&A
  • 회원가입
  • 로그인

[position] CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변경) +및 노출여부 (= 숨김설정) (= 디스플레이속성, display속성, 상속X) ※ 균분 너비

display 예제

 

<style>

p {color: red;}

p.ex1 {display: none;}

p.ex2 {display: inline;}

p.ex3 {display: block;}

p.ex4 {display: inline-block;}

</style>


<h2>display: none:</h2>

<div>홈짱닷컴 <p class="ex1">Homzzang.com</p> 홈페이지 제작강의</div>

<hr>

<h2>display: inline:</h2>

<div>홈짱닷컴 <p class="ex2">Homzzang.com</p> 홈페이지 제작강의</div>

<hr>

<h2>display: block:</h2>

<div>홈짱닷컴 <p class="ex3">Homzzang.com</p> 홈페이지 제작강의</div>

<hr>

<h2>display: inline-block:</h2>

<div>홈짱닷컴 <p class="ex4">Homzzang.com</p> 홈페이지 제작강의</div>


결과보기

 
 
 
block 요소 vs. inline 요소
 
※ block 요소 특징 
1. 연속 나열 시 상하 줄 바꿈 현상 있음. 즉, 가로 길이 100% 차지,
2. 가로 배열하려면, dinsplay:inline  속성값을 부여해 속성 변경해야 함.

※ inline 요소 특징 : 
1. 연속 나열 시 상하 줄 바꿈 현상 없음. 즉, 가로가 텍스트 만큼만 차지,
2. 세로로 줄바꿈 배열하고 싶을 땐 display:block 속성값을 주면 됨.

 

 
display 정의

 

요소표시동작 (렌더링 상자 유형) 지정. (요소를 어떻게 보이게 할지를 지정.)

주로, 해당 요소를 block (블럭요소)나 inline (인라인요소)로 지정할 때 사용.

 


 

1.

HTML: 기본표시 속성값은 HTML 스펙 또는 브라우저/사용자기본 스타일시트에서 가져옴.

XML의 기본값은 SVG 요소를 포함하여 인라인임.

 

2.

기본값 : 각 요소의 기본 성질 상태.

상속여부 : X

애니효과 : X

CSS버전 : CSS1

JS 구문 : object.style.display="none";

 

3.

IE8 이상 모든 브라우저 지원.

참고 : "flex"및 "inline-flex"값은 Safari에서 -webkit- 접두사 사용해야 작동.

참고 : "display: contents" 경우, Edge / Internet Explorer에서 작동 안 함.

 

 
 
display 구문
 
선택자 {display:속성값;}
 

[속성값]
 
none  
해당 요소가 생성 안됨. 즉, 안보이면서 공간도 안 차지.
주의: 소스는 노출됨. 소스보기하면 다 보임.
         
cf. 참고
선택자 {display:none; } - 보이지 않으면서 공간도 안차지
선택자 {visibility:hidden} - 보이지 않지만, 공간은 차지
 
block  
상하 줄바꿈이 되는 블럭 요소 지정  
인라인 요소의 블럭 전체에 링크 걸 때 아주 유용. (맨 하단 예제 참고)
 
inline  
상하 줄바꿈이 없는 인라인 요소 지정  (기본값)

inline-block
  
기본 인라인 요소이나, 블럭 요소의 특징 지님. 
(즉, width, height, margin, padding 속성을 갖을 수 있음)


※ 아래 속성값은 IE 하위 버전에서 지원 안 될 수 있으니 사용 시 주의 !
 
contents
container를 사라지게하여 DOM에서 다음 단계의 하위 요소를 생성. (IE/Edge 에서 작동 안 함.)
 
flex
요소를 블럭레벨 flex container로 표시. 자세히 보기
※ Safari 경우 -webkit- 접두어 필요.
 
grid
요소를 블럭레벨 grid container로 표시. 자세히 보기
 
inline-flex
요소를 인라인레벨 flex container로 표시. (Safari 경우 -webkit- 접두어 필요.) 
 
inline-grid
요소를 인라인레벨 grid container로 표시.
 
inline-table
기본 인라인 요소이나, 테이블 요소의 특징 지님. 

list-item
요소를 <li> 요소처럼 작동케 함. (기본 블럭 요소이나, list 요소를 인라인 요소로 만듦.)

run-in
해당 문맥에 의존해 블럭 또는 인라인 요소 만듦.

table
앞뒤 줄바꿈이 일어나는 테이블 요소의 특징 지님.

table-caption
요소를 <cation> 요소처럼 작동케 함. (기본 인라인 요소이나, 테이블 요소의 특징 지님.)
 
table-column
요소를 <col> 요소처럼 작동케 함.
 
table-column-group
요소를 <colgroup> 요소처럼 작동케 함.
 
table-header-group
요소를 <thead> 요소처럼 작동케 함.


table-footer-group
요소를 <tfoot> 요소처럼 작동케 함.

 

table-cell

요소를 <td> 요소처럼 작동케 함. (텍스트의 수직 정렬 속성인 vertical-align속성과 함께 사용)

table-row
요소를 <tr> 요소처럼 작동케 함.

table-row-group 

요소를 <tbody> 요소처럼 작동케 함. 

 


 
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소 속성을 상속
 

 
display 예제 - 블럭 요소의 인라인 요소화 
(=줄바꿈이 일어나는 요소를 가로로 배열하는 법)

<style>
.a {display: inline; width:400px;}
.b {display: inline-block; width:400px;}
li {background-color: yellow; height: 30px; line-height:30px; margin-top: 20px; text-align:center}
li:hover {background-color: red; color:white;}
</style>

<ul>
   <li class=a>홈짱닷컴 homzzang.com)</li>
   <li class=a>홈페이지 무료 제작 카페</li>
</ul>
<ul>
   <li class=b>홈짱닷컴 homzzang.com)</li>
   <li class=b>홈페이지 무료 제작 카페</li>
</ul>
 
 
display 예제 - 인라인 요소의 블럭 요소화 

(= 옆으로 배열되는 요소를 줄바꿈시켜 수직으로 배열되게 하는 법)


<style>
.a {display: block; width:400px; height:100px; text-align:center; vertical-align: middle; background:yellow;}
.b {display: block; width:400px; height:100px; text-align:center; vertical-align: middle; background:yellow;}
</style>

<span class=a>홈짱닷컴 homzzang.com)</span>
<span class=b>홈짱닷컴 homzzang.com)</span>

결과 보기

 
display 예제 - 요소 안 텍스트 수직 (세로)  중앙 정렬

<style>
.a {width:400px; height:100px; text-align:center; vertical-align: middle; display: table-cell; background:yellow;}
.b {width:400px; height:100px; text-align:center; vertical-align: middle; display: table-cell; background:yellow;}
</style>

 <span class=a>홈짱닷컴 homzzang.com)</span>
 <span class=b>홈짱닷컴 homzzang.com)</span>


결과 보기

  

 

display 예제 - 자식 요소 숨겼다가, 부모 요소 허버시 보이게 하기


<style>

#parent .son {display:none;}

#parent:hover .son {display:block;}
</style>

 

<div id='parent'>

  홈짱닷컴 주소? 

  <span class='son'>Homzzang.com</span>

</div>

 

결과보기

 

 

display 예제 - 부모요소전체영역에 링크걸기

 

a 태그 스타일에 아래 속성 추가

display:block;

 


[예제]


<style>
div {width:200px; line-height:100px; border:1px; solid; gray; background:yellow;}
a {display:block; text-decoration:none; text-align:center;}
a:hover {color:red; font-weight:bold;}
</style>

<div><a href='http://www.homzzang.com'>홈짱닷컴 바로가기</a></div>

결과보기

 

 

display 예제 - li 개수에 상관 없이 자동 균분 너비 설정 (= 동일 너비)

 

ul (ol) 태그엔 display:table 적용하고,
li 태그엔 display:table-cell 적용.

 

예제보기

 

 

 

 

엘리 님 (display + position) 강의

https://youtu.be/jWh3IbgMUPI

 

mdn display 강의

https://developer.mozilla.org/en-US/docs/Web/CSS/display (영어)

https://developer.mozilla.org/ko/docs/Web/CSS/display (한국어)

 

PS. position 속성 : https://homzzang.com/b/css-108

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012