- z-index 값에 따라 겹쳐진 대상이 맨 위 ~ 맨 아래에 위치하게 된다. (숫자가 클 수록 위에 위치하게 된다.)
// HTML
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
// CSS
section {
margin-top:500px;
width:200px;
height:200px;
border:10px solid red;
}
section > div {
width:50%;
height:25%;
background-color:blue;
position:absolute;
/* 4등 : z-index 도 없고 맨 처음 등장한 유령이다. */
}
section > div:nth-child(1) {
top:0;
left:0;
}
section > div:nth-child(2) {
background-color:gold;
top:10%;
left:10%;
z-index:2; /* 경쟁자 중에서 2가 가장 큰 수 이기 때문에 맨 위(1등)에 위치한다. */
}
section > div:nth-child(3) {
background-color:pink;
top:20%;
left:20%;
z-index:1; /* 경쟁자 중에서 2 다음으로 높은 수(1) 이기 때문에 2등이 된다. */
}
section > div:nth-child(4) {
background-color:green;
top:30%;
left:30%;
/* z-index가 없으면 기본적으로 경쟁에서 밀린다. 그래서 3등이다. */
}
*white-space:nowrap;
- 절대 줄바꿈 금지
// HTML
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate veniam cum, corrupti praesentium sit, atque ad optio inventore omnis quod nostrum amet eveniet? Assumenda labore accusamus soluta adipisci, aliquam veniam?
</div>
// CSS
div {
padding:10px;
font-size:2rem;
width:1000px;
margin:0 auto;
background-color:red;
/* 절대 줄바꿈 금지 */
white-space:nowrap;
}
- 중복되는 항목에 대해 CSS 작업 시 작업을 용이하게 하기 위해 태그에 클래스를 부여하여 CSS 작업 시 부여된 이름을 통해 작업이 진행될 수 이도록 한 것.
- <div class="a"></div> 인 경우 / CSS에서 해당 항목 호출하여 작업 시 .a { } 로 진행.
- 엘리먼트의 별명이 2개인 경우 / CSS에서 해당 항목 호출하여 작업 시 .a.aa { } 식으로 진행.
// HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.d, .black) -->
<div class="d black"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.b, .black) -->
<div class="b black"></div>
<div class="f"></div>
// CSS
body {
text-align:center;
}
div {
width:30%;
display:inline-block;
height:100px;
background-color:red;
margin:10px;
}
/* div 이면서 동시에 a 클래스를 가지고 있는 */
div.a {
background-color:green;
}
/* 클래스 b 인 엘리먼트 */
.b {
background-color:blue;
}
.black {
background-color:black;
}
/* d 라는 클래스를 가진 동시에 black 이라는 클래스도 가진 엘리먼트 */
.d.black {
background-color:#565656;
}
2. ul, ol, li
- ul (unordered list) : 목록을 의미. (목록을 만들 때 무조건 사용, li와 함께 사용)
- ol (ordered list) : 목록을 의미. (순서가 중요한 리스트인 경우 사용, li와 함께 사용)
