⛏️/HTML | CSS
[CSS] 6. display
defyuil
2023. 10. 24. 15:18
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<link href="style.css" rel="stylesheet">
<link href="display.css" rel="stylesheet">
</head>
<body>
<nav>
<ul id="mn">
<li><a href="#sec01">section01</a></li><li><a href="#sec02">section02</a></li>
<li><a href="#sec03">section03</a></li>
<li><a href="#sec04">section04</a></li>
</ul>
</nav>
<h1>display - 요소가 화면에 나타나는 방식 지정</h1>
<ul>
<li>display:inline; inline성격으로 지정</li>
<li>display:block; block성격으로 지정</li>
<li>display:inline-block;
inline과 block을 합친 성격으로 지정</li>
<li>display:none; 화면에서 사라짐</li>
</ul>
<section id="sec01">
<h2>1.display:inline;</h2>
<div class="bl">block-div</div>
<p class="bl">block-p</p>
<aside class="bl">block-aside</aside>
</section>
<section id="sec02">
<h2>2. display:block;</h2>
<span class="in">inline-span</span>
<a class="in">inline-a</a>
<b class="in">inline-b</b>
</section>
<section id="sec03">
<h2>3.display:inline-block;</h2>
<div>block-div</div>
<p>block-p</p>
<aside>block-aside</aside>
<span>inline-span</span>
<a>inline-a</a>
<b>inline-b</b>
</section>
<section id="sec04">
<h2>4. display:none;</h2>
<div>block-div</div>
<p>block-p</p>
<aside>block-aside</aside>
<span>inline-span</span>
<b>inline-b</b>
<i>inline-i</i>
</section>
<section id="sec05">
<h2>5. visibility:hidden;</h2>
<div>block-div</div>
<p>block-p</p>
<aside>block-aside</aside>
<span>inline-span</span>
<b>inline-b</b>
<i>inline-i</i>
</section>
<div id="dv">
display:none;은 영역과 요소가 같이 사라짐.
(레이아웃의 변화 있음)
visibility:hidden;은 영역 남기고 요소만 사라짐.
(레이아웃의 변화 없음)
</div>
<p id="op">opacity:n; 요소의 불투명도 지정.
0~1사이의 값으로 변경하며
0일 때 완전 투명, 1일 때 불투명
</p>
<div id="top">
<a href="#">top</a>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/*
전체선택자 *로 불러와 css초기화(기본 여백을 모두 0으로)
* {margin: 0; padding: 0;}
*/
/* nav */
nav { /* border: 1px solid #00f; */
margin: 50px 0 80px 100px;}
#mn { /* border: 1px solid #f00; */
padding-left: 0;}
#mn>li {/* border: 1px solid #f00; */
display: inline-block /* 메뉴들을 가로로 배치 */;
margin-right: 20px;}
#mn>li>a {
width: 150px; height: 40px;
display: block /* 크기 적용 위해 바꿈 */;
/* = padding: 10px 50px; 내부여백으로도
요소 크기 키울 수 있음 */
text-decoration: none;
text-transform: capitalize;
text-align: center;
line-height: 40px /* 행간(줄간격)=높이값으로
한 줄 글자를 수직 중앙정렬 */;
}
#mn>li>a:link, #mn>li>a:visited {
/*
1. 메뉴 링크의 평상시 상태지정
a:link, a:visited (초기링크와 방문한링크) */
background-color:#5bf;
color: #333;}
/*
2. 메뉴 링크의 확인시 상태지정
a:hover, a:active (마우스오버와 활성화링크)
[주의] 순서는 1.평상시 다음에 2.상태가 와야하며
반드시 1.평상시가 있어야 함.
*/
#mn>li>a:hover, #mn>li>a:active {
background-color: #333;
color: #5bf;}
/* 1.display:inline; */
/* #sec01>div, #sec01>p, #sec01>aside */
#sec01>.bl {border: 1px solid #f00;
width: 150px;
display: inline;}
/* 2. display:block; */
#sec02>.in {border: 1px solid #00f;
width: 200px; height: 50px;
margin: 20px;
display:block; }
/* 3.display:inline-block; */
#sec03>*:not(h2) {
/* 부정선택자 A:not(B)는 B이외의 A를 지정 */
border: 1px solid #0a0;
width: 150px; height: 50px;
margin: 20px;
display: inline-block; }
#sec04, #sec05 {
display: inline-block;
width:45%;
vertical-align:top/* inline요소들끼리의
수직정렬 */; }
/* 4.display:none; */
#sec04>*:not(h2) {border: 1px solid;}
#sec04>p {background-color: #afc;
height: 50px;
display: none;}
#sec04:hover>p {display: block;}
#sec04>span {background-color: #fce;
padding: 10px;
display: none;}
#sec04:hover>span {
display:inline; }
#sec04>b:hover {
background-color: #000;
color: #ff0; }
#sec04>b:hover+i {/*
인접형제관계선택자 A+B는 A의 바로 뒤에 오는 형제관계인 B만 지정.
형제관계선택자 A~B는 A의 뒤에 오는 모든 형제관계의 B를 지정. */
display: none;}
/* 5. visibility:hidden; */
#sec05>*:not(h2) {border: 1px solid;}
#sec05>p {background-color: #acf;
height: 50px;
visibility: hidden; }
#sec05:hover>p {
visibility: visible;}
#sec05>span {background-color: #aff;
visibility: hidden; }
#sec05:hover>span {visibility: visible;}
#dv {border:6px double #ccf;
background-color: #ccc;
width:60%;
margin: 2em auto;
padding: 1em;
white-space: pre/* pre태그처럼
공백을 소스 그대로 살려줌 */;
opacity: 1; }
#dv:hover {
opacity: 0 /* 요소 완전 투명 */;
transition:1s; }
#top {border-radius:50%;
background-color: #000;
margin:2em auto 1em;
width: 50px; height: 50px;
text-align: center;
line-height: 50px;
text-transform: uppercase;}
#top:hover {background-color: #0ac;
margin:2em auto 0.7em;
transition:0.7s;}
#top>a {text-decoration: none;
font-weight: bold;}
#top>a:link, #top>a:visited {
color: #fff;
}
#top>a:hover, #top>a:active {
color: #ff0;
}
