본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
부모 자식 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>코드가 다음과 같이 li태그 선택자일때, ul과 ol에 모두 영향을 준다.
이중 ul태그에 리스트에만 영향을 주고 싶을 경우 띄어쓰기를 해서 ul li 로 사용하면 된다.
이렇게 사용하면 ul태그 내에 자식태그인 li꼴만 영향을 받는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
<ol >
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>다음과 같이 ol태그에 리스트안에 또 ol태그가 있을경우, 먼저 사용된 ol태그에만 영향을 주고 싶을때는 어떻게 해야할까.
만약 위에 방식처럼 ol li로 띄어쓰기를 통해 사용을 할경우 먼전 선언된 ol태그와 CSS안에 ol태그 둘다 영향을 받기 때문에 적절한 방법이 아니다.
이럴 경우에는 영향을 주고 싶은 ol태그에 id를 지정하여 사용하면 된다.
그리고 사용된 id에 '>'를 사용하여 직계자손임을 나타내야 다른 리스트에 영향을 주지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ID1 > li {
border: 2px solid red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="ID1">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>
부모자식의 관계와는 관련이 없지만
ol과 ul태그 모두에게 영향을 주고 싶은 경우 ','를 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,ol {
background-color: powderblue;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol id="ID1">
<li>HTML</li>
<li>CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>JavaScript</li>
</ol>
</body>
</html>
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 상속 (0) | 2022.07.28 |
|---|---|
| CSS 기본부터 활용까지 - 가상클래스 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - ID선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 선택자와 선언 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 준비단계 (0) | 2022.07.25 |