반응형
안녕하세요. HTML강사 코딩하는 고양이입니다.
오늘은 CSS 선택자를 배워볼 거예요.
시작하기 전에 초기 설정을 해주세요.
<!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>
</style>
</head>
<body>
</body>
</html>이것을 복사하세요.
1. 아이디 선택자와 클래스 선택자
아이디 속성을 가지고 있는 태그를 선택합니다.
아이디란, 만약 같은 태그 두 개에 다른 속성을 정의하고 싶다면 아이디를 이용하세요.
형태는 <태그 id="이름">입니다.
아이디 속성의 형태는
<style>
#아이디{
속성들
}
</style>입니다.
클래스 속성을 가지고 있는 태그를 선택합니다.
클래스도 아이디랑 똑같은 기능을 합니다.
형태는 <태그 class="이름">입니다.
클래스 속성의 형태는
<style>
.클래스{
속성들
}
</style>입니다.
예)
<!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>
#id1{
background-color: orange;
}
#id2{
background-color: red;
}
.class1{
background-color: green;
}
.class2{
background-color: skyblue;
}
</style>
</head>
<body>
<div id="id1">하이</div>
<div id="id2">하이</div>
<div class="class1">하이</div>
<div class="class2">하이</div>
</body>
</html>결과
2. 후손 선택자와 자손 선택자
후손이란, 태그 안의 태그입니다.
예를 들어
<p> 부모
<p> 후손
</p>
</p>입니다.
후손 선택자는 모든 부모의 태그 안에 있는 모든 특정 태그를 선택하는 것이고
자손 선택자는 그 부모 태그 안에 있는 바로 아래 후손의 모든 특정 태그를 선택하는 것이다.
형태는
부모 후손 {
}
부모> 자손 {
}
입니다.
예)
<!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>
div span {
background-color: yellow;
}
div>span {
border: 4px solid blue;
}
</style>
</head>
<body>
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<div>
<ul>
<li>리스트</li>
<li>리스트</li>
<li><span>리스트</span></li>
</ul>
</div>
<h2>제목2</h2>
<span>span</span>
</div>
</body>
</html>결과
3. 속성 선택자
그 태그의 속성이 대괄호 안이랑 같은 것을 선택한다.
형태는
태그[속성] {
}
입니다.
예)
<!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>
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
</style>
</head>
<body>
<input type="text" />
<input type="password" />
</body>
</html>결과
4. 반응 선택자
마우스를 클릭하거나 올렸을 때 반응하는 선택자도 있습니다.
| 형태 | 설명 |
| :active | 사용자가 마우스로 클릭한 태그를 선택 |
| :hover | 사용자가 마우스포인터가 올려진 태그를 선택 |
형태는
태그:active 또는 :hover {
}
입니다.
예)
<!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>
p{
background-color: red;
}
.a:active{
background-color: orange;
}
.h:hover{
background-color: orange;
}
</style>
</head>
<body>
<p class="a">하이</p>
<p class="h">하이</p>
</body>
</html>결과
실제로 만든 후 위에 것을 클릭하면 배경색이 주황으로 바뀌는 것을 보실 수 있습니다.
5. 그 외의 선택자
| 선택자 구분 | 형태 | 설명 |
| 구조 선택자 | 선택자:first-child | 선택자의 처음 자손을 선택 |
| 선택자:last-child | 선택자의 마지막 자손을 선택 | |
| 링크 선택자 | :link | 방문하지 않은 링크 선택 |
| :visited | 방문한 링크 선택 | |
| 문자 선택자 | ::first-letter | 첫글자 선택 |
| ::first-line | 첫줄 선택 | |
| 상태 선택자 | :checked | 체크박스가 체크된 input 태그 선택 |
오늘의 문제!
1번 문제
div태그 안의 첫 번째 자손만 빨간색으로 하고 나머지는 연노랑색으로 한다.
(단, div태그 안에 있는 자손은 span태그로 하고 4개만 추가한다)
2번 문제 (심화)
100x100의 주황색 상자를 클릭하면 200x100 크기로 변하게 하시요.
(단, 태그는 div로 한다)
`1번 답
<!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>
div>span{
background-color: lightyellow;
}
span:first-child{
background-color: red;
}
</style>
</head>
<body>
<div>
<span>하이</span>
<span>하이</span>
<span>하이</span>
<span>하이</span>
</div>
</body>
</html>2번 답
<!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>
div{
width: 100px;
height: 100px;
background-color: orange;
}
div:active{
width: 200px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
오늘은 여기까지 ㅂㅂ
반응형
'HTML, CSS > 이론' 카테고리의 다른 글
| [HTML/CSS] 9. input 태그 (0) | 2023.03.27 |
|---|---|
| [HTML/CSS] 7. 기타 CSS 속성 (0) | 2023.03.25 |
| [HTML/CSS] 6. CSS의 필수 속성 (1) | 2023.03.24 |
| [HTML/CSS] 5. 표 태그 (0) | 2023.03.23 |
| [HTML/CSS] 4. CSS의 기초 (1) | 2023.03.22 |