5. 그룹 선택자
- 여러개의 요소를 나열하고 , 로 구분해 스타일을 적용 / 여러 선택자를 동시에 선택해 올 때 사용
EX)
선택지1, 선택지2{
css 문법
}
- 코드 입력 -
<!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>그룹 선택자</title>
<style>
h2, p{
text-align: center;}
h2, p#bigText{
font-size: 30px;}
h2{
color: red;}
p{
color: blue;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 ,(쉼표)로 구분해 스타일을 적용</p>
<p id="bigText">선택자는 다양하게 사용이 가능</p>
</body>
</html>
- 그룹 선택자 코드 설명-
< style> 태그 안
h2, 의 p 태그 안 텍스트 정렬 : 가운데 에다 하겠음.
h2, 의 p태그 안 bigText 태그의 폰트에 사이즈 값을 주었음.
h2 태그에 컬러 값 레드.
p 태그에 컬러 값 블루 .
이렇게 여러개의 요소를 , (쉼표) 로 나누어 구분해 스타일을 적용한다.
- 출력 결과-
6. 자손 선택자
- 부모 요소 하위의 모든 요소에 스타일을 적용 / 자손에는 자식, 손자, 후손을 모두 포함
EX)
조상요소 선택자 자손요소 선택자 {
css 문법
}
- 코드 입력-
<title>자손선택자</title>
<style>
ul a{
color: hotpink;
text-decoration: none;}
ul li{
color: coral;}
ul p{
color: darkcyan;}
</style></head>
<body>
<h2>자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.daum.net">다음</a>
</li>
<li>
<p>
<a href="https://google.com">구글</a>
페이지 이동
</p>
</li>
</ul>
</body>
</html>- 자손 선택자 코드 설명 -
자손에는 자식, 손자, 후손을 모두 포함 한다고 한다.
<style> 태그 안
ul ( 부모요소) 하위 태그에 있는 a 전체 컬러값 핫핑크
ul 태그에 있는 li 태그 전체 컬러값 코랄
ul 태그에 있는 p 태그 전체 컬러값 다크칸
- 줄력 결과 -
7. 자식 선택자
- 부모의 요소 하위 자식의 요소에만 스타일을 적용
EX)
<부모>
<자식>
<손자>
.......후손들....
</손자>
</자식>
<부모>
부모선택자 > 자식 선택자 {
CSS 문법
}
- 입력코드-
> 저번 시간 배운 내용을 응용해서 클릭하면 해당 주소 페이지로 가게 되는 코드를 작성해 본다 .
<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>자식 선택자</title>
</head>
<body>
<h2>자식선택자 </h2>
<ul>
<a href="https://wwww.naver.com">네이버 </a>
<li>
<a href="https://wwww.daum.net">다음</a>
</li>
<li>
<p>
<a href="https://google.com">구글</a>
</p>
</li>
</ul>
</body>
</html> <style>
ul a{
text-decoration: none;}
ul > a{
color: deeppink;}
ul > li > a{
color: cornflowerblue;}
ul> li > p > a {
color: darkviolet;}
</style>
- 자식 선택자 코드 설명 -
> ul 에 있는 a 태그 = 링크의 밑줄이 안보이게 decoration: none 의 값을 넣어주었다.
> ul 안에 있는 a태그 = 컬러를 deeppinl 로 한다.
> ul 안에 li 태그 안에 있는 a 태그 = 컬러를 conflowerblue 로 한다.
> ul안에 li안에 p안에 있는 a 태그 = 컬러를 darkviolet 으로 한다.
- 출력결과 -
# 헷갈릴수 있는 것
1. ul a {
}
2. ul>a {
}
- 이 두개의 차이점은 . ul a = ul 안에 있는 a 의 모든 요소가 해당
ul>a = ul 의 바로 아래에 있는 a 의 요소가 해당 .
> 하나 차이로 전체 요소 해당 인지/ 부분 요소만 해당인지 알수 있다.
8. 인접 형제 선택자
동일한 부모 요소를 갖는 자식 요소들의 관계 - 형제
선후 관계를 따진다면 형- 동생 관계 <ul> <a></a> 형 <li></li>동생 </ul>
EX)
형 선택자 +동생선택자 {
CSS문법
}
ex) a + li {
( 앞에 a 태그가 있는 가장 가까운 li 태그만 선택)
CSS 문법
}
- 코드 입력 -
<!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>인접 형제 선택자</title>
<style>
h3 + p {
color: white;
background-color: black;
font-size: 30px;}
h3 + p + p{
color: blue}
</style>
</head>
<body>
<h2>인접 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<p>셋째</p>
<p>넷째</p>
<h4>다섯째</h4>
</div>
</body>
</html>
- 인접 형제 선택자 코드 설명-
h3 의 형제인 p 컬러 > 화이트에 , 배경색 > 검정
h3의 형제인 p 첫째 옆에있는 p 둘때의 컬러> 블루
- 출력 결과-
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 <모든> 동생 요소를 선택해 스타일을 적용
형선택자 ~ 동생선택자{
css 문법
}
ex) a ~ li{
(앞에 a 태그가 있는 모든 li 태그 선택)
css 문법
}
<style>
h3 + p{
font-weight: bold;
}
h3 ~ p{
color: blue;
font-size: 30px;
}
h3 + p ~ p{
background-color: gold;
}
</style>
- 형제 선택자 코드 설명 -
h3 의 바로 옆에 있는 p
h3 ~p > h3 형제에 있는 모든 p
h3 + p ~ p > h3 형제옆에 있는 p 의 그 다음 p
10. 속성 선택자
- html 요소에도 src, herf , type, name....과 같은 속성을 선택지로 지정해서 스타일 적용
1) 속성을 가지고 있는 요소를 선택
[속성명]{
css 문법
}
2) 특정 속성값을 가지고 있는 요소를 선택
[속성명 = '속성값'] {
css 문법
}
<style>
h2[title]{
text-align: center;
}
[href]{
text-decoration: none;
}
.attr{
background-color: brown;
}
[class="attr"]{
color: white;
}
</style>
- 속성 선택자 코드 설명 -
<style>코드 안에 속성 코드들을 다 넣을수 있다.
- 출력 결과 -
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY04-1] (0) | 2022.04.27 |
|---|---|
| [프론트 엔드 DAY04] (1) | 2022.04.26 |
| [프론트 엔드 DAY03-1 ] (0) | 2022.04.19 |
| [프론트 엔드 DAY03] (0) | 2022.04.17 |
| [프론트엔드 day02] (0) | 2022.04.16 |
댓글