CSS

[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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 3
웹유틸
회원센터
홈짱 PC버전 로그인