목차
display 예제 - 요소 유형 지정 (= 노출 방식 설정) block 요소 vs. inline 요소 display 정의 display 구문 display 예제 - (블럭요소 → 인라인요소) 변경 display 예제 - (인라인요소 → 블럭요소) 변경 display 예제 - 요소 안 텍스트 수직 정렬 (= 세로 정렬) display 예제 - 자식요소 숨겼다 부모요소에 허버 시 노출 display 예제 - 부모요소 전체 영역에 링크 걸기 display 예제 - <li> 개수 무관하게 너비 균등 설정 (= 동일 너비) display 예제 - <div> 태그로 테이블 짜기 ★ divplay 예제 - (inline/inline-block) 속성값 효과 차이 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. 연속 나열 시 상하 줄 바꿈 현상 없음. 즉, 가로가 텍스트 만큼만 차지,
display 정의
요소표시동작 (렌더링 상자 유형) 지정. (요소를 어떻게 보이게 할지 지정 .)
주로, 해당 요소를 block (블럭요소)나 inline (인라인요소)로 지정할 때 사용.
1.
HTML: 기본표시 속성값은 HTML 스펙 또는 브라우저/사용자기본 스타일시트에서 가져옴.
XML의 기본값은 SVG 요소를 포함하여 인라인임.
2.
기본값 : 각 요소의 기본 성질 상태.
상속여부 :
애니효과 :
CSS버전 :
JS 구문 : object .style.display ="none";
3.
IE8 이상 모든 브라우저 지원.
참고 : "flex"및 "inline-flex"값은 Safari에서 -webkit- 접두사 사용해야 작동.
참고 : "display: contents" 경우, Edge / Internet Explorer에서 작동 안 함.
display 구문
selector { display:속성값 ;}
[속성값]
none ★
주의: 소스는 노출됨. 소스보기하면 다 보임.
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> 요소처럼 작동케 함. 예제보기 run-in 해당 문맥에 의존해 블럭 또는 인라인 요소 만듦.
table ★ 요소를 <table> 태그처럼 표현. table-caption 요소를 <caption> 요소처럼 표현.
table-column 요소를 <col> 요소처럼 표현.
table-column-group
table-header-group
table-footer-group
table-row
table-row-group
요소를 <tbody> 요소처럼 표현.
initial
이 속성의 기본값으로 설정.
inherit 부모 요소 속성을 상속
display 예제 - (블럭요소 → 인라인요소) 변경
[= 줄바꿈 되는 요소를 옆으로 나란히 배열.]
.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 예제 - (인라인요소 → 블럭요소) 변경
[= 옆으로 나란히 배열되는 요소를 줄바꿈시켜 수직으로 배열] .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;}<span class=a>홈짱닷컴 homzzang.com)</span> <span class=b>홈짱닷컴 homzzang.com)</span> 결과 보기
display 예제 - 요소 안 텍스트 수직 정렬 (= 세로 정렬)
vertical-align: middle; display: table-cell;vertical-align: middle; display: table-cell;결과 보기
display 예제 - 자식요소 숨겼다 부모요소에 허버 시 노출
#parent .son {display:none;}
#parent:hover .son {display:block;}
<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
