선택자
- 태그선택자 태그명
- 아이디선택자 #아이디명
- 클래스선택자 .클래스명
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* * {color : red;} 여백을 없애고 , 기본 스타일을 없애는 용도씁니다 */
b, i {color : red;}
.a{color : green;}
#a {color : pink;}
/* 클래스가 a인 태그랑 아이디가 a인 태그를 동시에 디자인 하려면> */
.a , #a ,.b{ font-weight : bold;}
</style>
</head>
<body id = "" class = "">
<b>태그선택자</b>
<b>태그선택자</b>
<i>태그선택자</i>
<section id="a" >아이디선택자</section>
<p class = "a">클래스선택자</p>
<p>클래스선택자</p>
<strong class = "a"> 클래스선택자</strong>
</body>
</html>
후손 , 자손 ,가상 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .abox p {color:red;} */
.abox p {color:orange;}
.abox > ul p {color : green;}
.bbox input[type=password]{color:red;} /* input 태그에 속성(type) =값(password)인 값을 red로 */
.bbox input[name="aaa"]{color:violet;}
/* .ccbox >ul >li {color : blue;} */
li[class*="item"] {color:aqua;} /* li태그에 class 에 item이 포함된 모든 값(*의미)을 aqua로 */
/*가상선택자 액티브 , 호버 ,포커스 (가장 자주쓰는 가상선택자) +(:after , :before)*/
.cbox .a:active {background-color: brown;} /* 마우스가 클릭을 했을 때 */
.cbox .b:hover {background-color: blanchedalmond;} /*마우스가 닿았을 떄 */
.cbox input:focus {border: 1px solid chartreuse; outline : none;} /* 텍스트 창 안에 포커스가 올라가있을 떄 ,,input 태그에서 사용함(focus,checked 등)*/
/* .cbox .c:after{background-color: black;} /* 내용의 끝에 가상의 요소를 삽입할 때 사용*/
.cbox .d:before{background-color: burlywood;} */
</style>
</head>
<body>
<div class ="abox">
<p>하위선택자</p>
<p>하위선택자</p>
<ul>
<li>하위선택자</li>
<li><p>하위선택자</p></li>
<li><p>하위선택자</p></li>
</ul>
<p>하위선택자</p>
<ul>
하위선택자
</ul>
</div>
<p>여기는?</p>
<hr>
<div class = "bbox">
아이디:<input type="text" name="aaa"><br>
이름 :<input type ="text" name ="bbb"><br>
비밀번호:<input type="password" name = "ccc">
</div>
<div class="ccbox">
<ul><li class = "item-1">아이템</li></ul>
<ul><li class = "item-2">아이템</li></ul>
<ul><li class = "item-3">아이템</li></ul>
<ul><li class = "item-4">아이템</li></ul>
<ul><li class = "item-5">아이템</li></ul>
<ul><li class = "item-6">아이템</li></ul>
</div>
<hr>
<!-- 가상선택자 액티브 , 호버 ,포커스 -->
<div class = "cbox">
<div class = "a">액티브</div>
<div class = "b">호버</div>
포커스<input type = "text" name = "aaa">
<!-- <div class = "c">애프터</div>
<div class = "d">비포</div> -->
</div>
</body>
</html>
액티브 : 누를 때
호버 : 마우스를 올렸을 때
포커스 : 그 안에 있는 상태일 때
'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글
| 03백그라운드 (0) | 2024.01.26 |
|---|---|
| 02-2 디스플레이 (1) | 2024.01.26 |
| 02-1 폰트,오버플로우 (0) | 2024.01.26 |
| 블럭-인라인 ,스타일시트 (1) | 2024.01.24 |
| CSS 세팅하기 (0) | 2024.01.24 |
