○전체선택자(*)
모든요소
<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>
*{
color:rgb(0, 140, 255);
}
</style>
</head>
<body>
<h1>이시원</h1>
</body>○타입선택자(요소이름)
해당요소
<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>
h1{
color:greenyellow;
}
</style>
</head>
<body>
<h1>이시원</h1>
</body>
○Id(#),Class선택자(.)
<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{
color :deeppink;
}
a{
color :rgb(0, 255, 170)
}
/* 아이디, 클래스 : 요소에 별명 짓기 */
/* class선택자(.) : 여러번 사용가능 */
/* Java수업을 들어온 선생님들만 배경색을 검정색으로 주세요 */
.java{
background-color: rgb(0, 0, 0);
}
/* id선택자(#) : 1번만 사용가능 */
/* DB수업을 들어온 선생님은 배경색을 파란색으로 주세요 */
#db{
background-color: darkcyan;
}
#python{
background-color: gold;
}
</style>
</head>
<body>
<ul>
<li class="java">임승환 </li>
<li class="java">김미희</li>
<li id ="db">김동원</li>
<li class="java">박수현</li>
<li id = "python">정세연</li>
</ul>
<a href="https://www.youtube.com">유튜브</a>
</body>
○계층선택자
직계 : 자식
내밑의 모든 직계 : 자손
후행 형제(나보다 코드가 밑에있는 태그들) : 내 뒤에 있는 형제
근접 후행 형제(내 바로 밑에 있는 태그) : 내 바로뒤에 있는 형제들만 말걸 수 있음
자식은 꺽쇠로 표현
부모 > 자식
자손은 공백
근접후행 +
후행 ~
형식 : 기준선택자 계층선택자 변경할 선택자
<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>
/* 계층선택자(자손, 자식, 근접후행형제, 후행형제)
기준요소 계층선택자 변경할 요소 */
/* body를 기준으로 해서 li요소의 글자크기를 50px로 변경(자손선택자) */
body li{
font-size: 50px;
}
/* ul를 기준으로해서 자식선택자를 활용하여 클래스가 java인 요소의
글자색을 파란색으로 변경 */
/* ul의 자식중에서 li인데 클래스이름이 java인 친구만 색 변경 */
ul > li.java{
color: blue;
}
/* li뒤에 바로 li가 오는 요소 */
/* p태그 뒤에있는 li는 안바뀜 */
/* 그룹선택자 : ,를 사용해서 여러선택자의 css를 변경가능 */
li+li, p{
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>이시원</h1>
<ul>
<li class="java">임승환 </li>
<li class="java">김미희</li>
<li id ="db">김동원</li>
<p class="java"> java</p>
<li class="java">박수현</li>
<li id = "python">정세연</li>
</ul>
<a href="https://www.youtube.com">유튜브</a>
</body>
○반응선택자
사용자의 반응으로 생성되는 특정한 상태를 선택
:active - 마우스로 클릭할 때 선택
:hover - 마우스를 올린 태그를 선택
<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>
/* 기준 계층 변경 */
#active:active{
background-color: aqua;
}
#hover:hover{
background-color: darkmagenta;
}
/* CSS 우선순위 hover > active */
/* 뒤에 선언 > 먼저 선언 */
div:hover{
color: yellow;
}
div:active{
color: red;
}
</style>
</head>
<body>
<h1 id="active">이시원(마우스로 클릭할 때)</h1>
<h1 id="hover">이시원(마우스로 올렸을 때)</h1>
<div>이시원</div>
</body>
코딩공부