CSS입문
CSS_가상요소선택자hover,active,focus,nth-child,before,after_22.04.07(thur)
양빵빵
2022. 4. 7. 18:17
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* hover : 요소에 마우스를 올렸을 때 */
a:hover {
font-size: 20px;
font-weight: bold;
color: red;
}
.box{
width: 100px;
height: 100px;
background: orange;
/* 애니메이션 속도조절 */
transition: 0.5s;
}
.box:hover{
width: 200px;
background: red;
}
/* active : 요소에 마우스를 누르고 있을때 */
.box:active{
height: 200px;
background: yellowgreen;
}
#common{
width: 100px;
border: 1px solid gray;
outline: none;
padding: 5px 10px;
margin-top: 20px;
transition: 0.6s;
}
/* focus:특정 요서에 포커싱(탭,클릭)했을 때 */
#common:focus{
border-color: red;
width: 200px;
}
</style>
</head>
<body>
<a href="#">Hello!!</a>
<div class="box"></div>
<input type="text" id="common">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#fruits li:first-child{
color: red;
}
#fruits li:last-child{
color: yellowgreen;
}
#fruits li:nth-child(5){
color: yellow;
}
/* 홀수번째 li만 선택 2n+1 or odd */
#fruits li:nth-child(odd){
background: aqua;
}
/* 짝수번째 li만 선택:2n or even */
#fruits li:nth-child(even){
background: violet;
}
/* 1, 4, 7번째 li만 선택 */
#fruits li:nth-child(3n+1){
background: violet;
}
/* li중에 class가 orang인 요소 빼고 전부 */
#fruits li:not(.orang){
font-size: 1.5em;
}
</style>
</head>
<body>
<ul id="fruits">
<li>딸기</li>
<li>사과</li>
<li class="orang">오렌지</li>
<li>망고</li>
<li>바나나</li>
<li>자몽</li>
<li>라임</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li::before {
content: '번호: ';
}
li::after {
/* 주의
1. before, after는 content가 필요없어도
필수로 넣어야 함.
2. 도형을 나타내려면 display속성이 필수
*/
content: '';
width: 10px;
height: 10px;
background: red;
display: inline-block;
margin-left: 5px;
/* 원을 만드려면 border-radius속성을 50%로 설정 */
border-radius: 50%;
}
</style>
</head>
<body>
<!-- ul>li{$}*10 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#list li:nth-child(2n+1){
background: yellow;
}
#list li:nth-child(even){
background: gray;
}
#list li:first-child{
color: red;
}
#list li:last-child{
color: green;
}
#list li:nth-child(2){
font-style: italic;
}
#list li:nth-child(-n + 2){
border: 2px dashed aqua;
}
#list li:nth-child(2) ~ li {
border: 2px dotted violet;
}
</style>
</head>
<body>
<!--
1. id="list"인 요소에 <li> 요소중 홀수번째 요소만 선택후 배경색상 yellow 적용
2. id="list"인 요소에 <li> 요소중 짝수번째 요소만 선택후 배경색상 gray 적용
3. id="list"인 요소에 <li> 요소중 첫번째 <li>요소만 선택후 폰트색상 red 적용
4. id="list"인 요소에 <li> 요소중 마지막번째 <li>요소만 선택후 폰트색상 green 적용
5. id="list"인 요소에 <li> 요소중 두번째 <li>요소만 선택후 font-style: italic 적용
6. id="list"인 요소에 <li> 요소중 3번째 이전 요소만 선택후 border: 2px dotted aqua 적용 (1, 2번째만 선택)
7. id="list"인 요소에 <li> 요소중 3번째 이후요소만 선택후 border: 2px dashed violet 적용 (3번째부터 끝까지 선택)
1.class를 적절하게 부여해서 처리
2.class를 부여하지 않은 상태에서 처리
-->
<!-- #wrap>ul#list>li{리스트$}*7 -->
<div id="wrap">
<ul id="list">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</div>
</body>
</html>