[position] CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속성 = 디스플레이속성) ※ 균분너비 ※ 요소숨기기 ※ 요소나란히 정렬/배치

1. display 예제 - 요소 유형 지정 (= 노출 방식 설정)
2. block 요소 vs. inline 요소
3. display 정의
4. display 구문
5. display 예제 - (블럭요소 → 인라인요소) 변경
6. display 예제 - (인라인요소 → 블럭요소) 변경
7. display 예제 - 요소 안 텍스트 수직 정렬 (= 세로 정렬)
8. display 예제 - 자식요소 숨겼다 부모요소에 허버 시 노출
9. display 예제 - 부모요소 전체 영역에 링크 걸기
10. display 예제 - <li> 개수 무관하게 너비 균등 설정 (= 동일 너비)
11. display 예제 - <div> 태그로 테이블 짜기 ★
12. divplay 예제 - (inline/inline-block) 속성값 효과 차이
13. display 관련 주소

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 구문

 

selector {display:속성값;}

 

---

[속성값]

 

none  ★
해당 요소가 생성 안됨. 즉, 안보이면서 공간도 안 차지.

주의: 소스는 노출됨. 소스보기하면 다 보임.

         

cf. 참고

• 선택자 {display:none; } - 보이지 않으면서 공간도 안차지
• 선택자 {visibility:hidden; } - 보이지 않지만, 공간은 차지
• 관련글 https://sir.kr/qa/312509

 

block  ★
상하 줄바꿈이 되는 블럭 요소 지정  
인라인 요소의 블럭 전체에 링크 걸 때 아주 유용. (맨 하단 예제 참고)

 

inline  ★
상하 줄바꿈이 없는 인라인 요소 지정  (기본값)

inline-block  ★
기본 인라인 요소이나, 블럭 요소의 특징 지님. 

• (즉, width, height, margin, padding 속성을 갖을 수 있음)
• [주의] 요소 간 기본 4px 정도의 간격 벌어짐. 폰트 영향 받음.
• cf. float:left 경우 요소간 간격 안 벌어짐.

 

---

※ 아래 속성값은 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> 태그처럼 표현.
※ 앞뒤 줄바꿈 일어나는 테이블 요소 특징 지님.

table-caption
요소를 <caption> 요소처럼 표현.
※ 기본 인라인 요소이나, 테이블 요소의 특징 지님.

 

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 예제 - <div> 태그로 테이블 짜기 ★

 

<style>

div {border: 1px solid silver; border-collapse:collapse;}

.table {display: table; width: 100%;}

.table-row {display: table-row;}

.table-cell {display: table-cell; padding: 5px; 20px; height: 100px;}

.top {vertical-align: top;}

.middle {vertical-align: middle;}

.bottom {vertical-align: bottom;}

</style>

 

<div class="table">

    <div class="table-row">

        <div class="table-cell top">홈짱닷컴</div>

        <div class="table-cell middile">Homzzang.com</div>

        <div class="table-cell bottom">웹 코딩 매뉴얼</div>

    </div>

</div>

결과보기

divplay 예제 - (inline/inline-block) 속성값 효과 차이

 

<style>

div {width:250px; border:1px solid gray; margin-bottom:50px; }

span {display:inline-block; width:100px; background:yellow; text-align:center;}

#hz1 a{display:inline; margin-left:20px;}

#hz2 a{display:inline-block; margin-left:20px;}

#hz3 {display:flex; }

#hz3 span {display:flex; align-items: center;  justify-content: center; }

#hz3 a {margin-left:20px;}

</style>

 

<div id="a"><span>코딩강의</span><a href="https://homzzang.com" target="_blank">홈짱닷컴 Homzzang.com</a></div>

<div id="b"><span>코딩강의</span><a href="https://homzzang.com" target="_blank">홈짱닷컴 Homzzang.com</a></div>

<div id="c"><span>코딩강의</span><a href="https://homzzang.com" target="_blank">홈짱닷컴 Homzzang.com</a></div>

 

결과보기

---

PS1. inline/lnline-block 속성값 정렬 효과 차이

• display:inline - 해당 요소가 범위 넘쳐도 무조건 옆에서부터 출력.
• display:inline-block - 해당 요소가 범위 넘치면 아래 라인부터 출력.

 

---

PS2. display:flex 속성값 적용된 요소 경우 text-align:center 속성이 안 먹히므로, 아래 속성들 이용해야 함. 

• justify-content: center; /* 수평 가운데 정렬 */ 
• align-items: center; /* 수직 가운데 정렬 */

 

관련글: 블랙캣77, 배르만 님 (240320) https://sir.kr/qa/529074 

display 관련 주소

 

엘리 님 (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