css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 셀렉터를 조합하는 방법에 대하여 알아보도록 하겠습니다.
우리가 셀렉터를 사용할 때는 한 가지만 한 시트에 쓰는 것이 아니라,
여러 가지 셀렉터를 써서 서로 상호 유기적인 연결이 되어 하나의 매끄러운 프로그램을 만듭니다.
그래서 이번 시간에는 그러한 방법에 대하여 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 셀렉터 조합하기
우리는 css를 정말 많이 쓰기 때문에 사실상 셀렉터가 한 개만 있을 수가 없습니다.
그리고 같은 태그가 여러 개인데,
이들이 어디에 속해 있느냐에 따라서 css를 다르게 적용을 해줘야 할 때가 필연적으로 생깁니다.
그래서 그럴 경우에 셀렉터를 조합을 하곤 합니다.
이를테면 html은 태그로 감싸진 형태의 코드이기 때문에 자식과 부모, 자손 형태의 태그가 생기게 됩니다.
그래서 전에 말씀드렸다시피 상속이 됩니다.
그래서 이러한 셀렉터를 연속으로 조합을 할 수가 있는데,
이런 방법을 주로 쓰곤 합니다.
1 - 1. 부모 - 자식 셀렉터인 경우
부모 - 자식 관계의 경우는 두 셀렉터를 '>'를 사용하여 엮어줍니다.
그렇게 하게 되면 한 개의 css가 두 개의 태그에 엮이게 됩니다.
1 - 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>셀렉터 만들기</title>
<style>
div > div > strong { /* 자식 셀렉터 */
background : yellow;
}
ul strong { /* 자손 셀렉터 */
color : dodgerblue ;
}
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
여기서 부모 - 자식 관계의 경우를 살펴보면 div 태그 안에 감싸진 div 태그,
그리고 그 안에 있는 strong 태그가 자식 태그로 있습니다.
그래서 각각을 '>'로 이어줬습니다.
그리고 자손 관계에 있는 ul 태그와 storng 태그의 경우는 '>'를 사용하지 않고 그냥 공백을 주고 이어줬습니다.
여기에서 부모 - 자식 관계와 자손 관계가 되게 애매모호하다는 분들이 많으실 거라 생각을 합니다.
이 부분은 이렇게 정리를 하시면 좀 더 깔끔하게 이해를 하실 수 있을 겁니다.
- 블록 태그(div, span, .. etc) 안에 있어서 하나의 집단을 이루는 태그 - 자식 태그
- 블록 태그 안에 있으면서 부가적인 기능을 수행하는 태그 - 자손 태그
이런 식으로 하나의 블록 그룹에 종속이 되어있는 태그이면 자식 태그가 되고,
그 자식 태그가 인라인 태그 처럼 어떤 특정 기능을 수행하는 기능을 가지고 있다면 자식 태그가 됩니다.
그래서 자식과 자손 태그는 그룹을 이루는 규모가 크냐, 작으냐에 따라서 가르곤 합니다.
그럼 결과 화면도 같이 보겠습니다.
이렇게 부모 태그 안에 있는 strong 태그에는 노란색으로 글자 배경색이 생겼고,
li 태그 안에 있는 strong 태그에 있던 css는 파랗게 강조가 되어있음을 보실 수가 있습니다.
여기까지 셀렉터를 조합하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 css로 색을 꾸미는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 색 프로퍼티에 대하여 알아보기 (0) | 2023.03.13 |
|---|---|
| css로 색 꾸미는 방법에 대하여 알아보기 (0) | 2023.03.13 |
| css 이벤트 속성에 대하여 알아보기 (0) | 2023.03.13 |
| css 가상 클래스 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 속성 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
댓글