초보자들은 흔히 특정태그를 선택하기 위해
태그 하나하나에 다른 클래스를 달아주곤 하는데,
작은 프로젝트에서나 상관없지만 큰 프로젝트일수록 비효율적이다.
특히, 협업을 하는 경우에는 더욱 더 비효율적.
태그 하나하나에 클래스를 두면
1. 만든 클래스 이름을 다 기억하지도 못할뿐더러
2. 이 클래스가 도대체 무슨 효과를 주는지 하나하나 짝지으며 찾아다녀야 한다.
그럼 어떻게 해야 할까?
결합자(combinators)를 활용해 코드를 짜는 것이다.
결합자(Combinator)는 선택자를 여러 개 결합하여 세밀하게 찾을 수 있게 한다.
결합자는 크게 네 가지로 나눌 수 있다.
결합자에 대해서 알려면 HTML의 구조에 대해서 알아야 한다.
HTML의 구조
- "어떤 요소 안에 어떤 요소가 있느냐"를 이해하는 것이 가장 중요하다.
- 가계도 같다고 해서 부모-자식 구조, 뿌리-줄기- 잎 같다고 해서 tree 구조라고 한다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다
* 태그 보충설명의 8번 참고
HTML 태그 보충 설명
1. title 태그 출력 위치 KASSY의 HTML 기초 결과물> 2. meta 태그 사용이유 쓰지 않으면 한글이 제대로 나오지 않는 경우가 있다. 메모장에서 html 문서를 작성할 때는 저장시 인코딩으로 UTF-8을 선택해
jessy-itstudy.tistory.com
다음은 div와 p를 예로
결합자에 대한 사용 방법을 설명한 것이다.
1. 자식 결합자
div의 자식인 p를 선택할 때
div > p
2. 하위 결합자
div의 자손(자식, 손자 등등)인 p
div p
3. 형제 결합자
div 이후의 형제인 p
div ~ p
4. 인접 형제 결합자
div 이후의 형제 중 첫 번째 p
div + p
실제 예시를 보면서 이해하는 것이 훨씬 쉽다.
자식결합자 예>
div의 자식 p 태그에만 빨간색으로 바뀌고, 자식이 아닌 p 태그는 색이 바뀌지 않는다.
<html>
<head>
<meta charset="utf-8">
<title>자식 결합자</title>
<style>
div>p {
color: red;
}
</style>
</head>
<body>
<div>
<p>빨강색</p>
</div>
<p>검정색</p>
</body>
</html>
하위결합자의 예>
하위결합자를 사용 div의 자식뿐만 아니라 손자, 증손자 등등 모두 포함할 수 있다.
<html>
<head>
<meta charset="utf-8">
<title>하위 결합자</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<p>검정색</p>
<div>
<div>
<p>빨강색</p>
<div>
<p>빨강색</p>
</div>
<p>빨간색</p>
</div>
</div>
<p>검정색</p>
</body>
</html>
형제결합자 예>
형제결합자는 앞 선택자 이후의 형제들 중 뒷 선택자인 것들을 뜻한다.
div~p라고 했으니 div하나씩 잡고 아래로 내려가면서 div의 형제인 p를 찾으면 된다.
정렬을 잘했다면 형제를 찾기가 쉬울 것이다.
가운데 <p>파란색</p>는 정렬을 하면 안으로 들어가지만 잘 보면 div와 형제이다.
<html>
<head>
<meta charset="utf-8">
<title>형제 결합자</title>
<style>
div~p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>검정색</p>
<div>
<p>검정색</p>
</div>
<p>파란색</p>
<div>
<p>검정색</p>
</div>
</div>
<p>파란색</p>
</body>
</html>
인접형제결합자 예>
div 이후의 형제 중 첫 번째 p
인접 형제 결합자는 형제 결합자와 같으나 첫 번째에 해당하는 p 태그만 선택한다.
태그가 많아지만 형제결합자와 유사하다고 생각할 수 있으니 개념을 확실히 익히도록 하자!
형제 태그였다면 파란색이 4개, 검은색이 3개로 나온다.
<html>
<head>
<meta charset="utf-8">
<title>인접 형제 결합자</title>
<style>
div+p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>검정색</p>
<div>
<p>검정색</p>
</div>
<p>파란색</p>
<p>검정색</p>
<div>
<div>
<p>검정색</p>
</div>
</div>
</div>
<p>파란색</p>
<p>검정색</p>
</body>
</html>
중요한 한 가지!
정렬을 잘 해놓으면 결합자의 위치를 찾기가 쉬워진다.
정렬을 생활화 하자
'Front-End > CSS' 카테고리의 다른 글
| CSS 색상, 단위 (0) | 2023.03.31 |
|---|---|
| CSS 구문(형식), 주석, 스타일 시트 (0) | 2023.02.24 |
| CSS에 대한 보충 설명 (0) | 2023.02.03 |
| Bootstrap (0) | 2023.01.30 |
| CSS란? (0) | 2023.01.20 |
