지난 강좌에서 css 선택자로 html 요소를 선택하는 방법에 대해 알아보았습니다.
이어서 이번 강좌에서는 css의 가장 큰 장점 중에 하나인 다중? 복합? 적용에 대해 알려드리려 합니다. html 한 요소에 여러개의 css 속성을 다중으로 적용하는 방법입니다.
@charset "utf-8";
/* CSS Document */
.bg-green { background-color: green; }
.txt-white { color: white; }
.txt-2em { font-size: 2em; }위와 같이 일단 3개의 css에 3개의 class를 작성했습니다.
<!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>css 선택자2</title>
<link rel="stylesheet" type="text/css" href="selector2.css">
</head>
<body>
<h1>이문열 삼국지</h1>
<h2>책 소개</h2>
<p>젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
<p class="bg-green">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
<p class="bg-green txt-white">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
<p class="bg-green txt-white txt-2em">젊은 세대를 위해 내용을 손보고, 한자어 독음을 달아 읽기 쉬운 『삼국지』</p>
</body>
</html>그리고 html 문서에는 다음과 같이 클래스를 적용 했습니다.
14번 줄 p요소 : 배경색 적용
15전 줄 p요소 : 배경색 + 글자색 적용
16번 줄 p요소 : 배경색 + 글자색 + 글자 크기 적용
결과로
위 처럼 확인 할 수 있습니다.
class각 적용된 첫번째 p 요소를 보면 class="bg-green"이 마크업 되었으니 초록색 배경으로 나옵니다.
두번째 p 요소를 보면 bg-green과 이어서 txt-white라는 클래스가 하나 더 나왔습니다. 이렇게 html 요소에서 class는 한칸 띄우고 작성하면 해당 style을 다중으로 적용할 수 있습니다. txt-white는 css에서 글자색을 하얀색으로 정한 style 이었습니다.
마지막 p요소는 두번째 p 요소에 txt-2em이라는 클라스가 마찬가지로 하나 더 추가 되었습니다. 글자를 2배 크게 만드는 스타일입니다.
이렇게 html 요소에서 미리 정한 css를 다중 적용할 수 있습니다. 간단하게 한칸 띄우고 작성하면 되는 것이죠.
여기서 퀴즈 하나 내 보겠습니다. 만약 css에서 .txt-2em 클래스에 color:yellow를 추가 하면 어떻게 될까요?
지난 강좌에 알려드렸듯이 위의 마지막 p 요소는 글자색이 노란색으로 바뀔 것입니다. 기억 나시나요? 같은 순위의 선택자에서 같은 css 속성은 css 파일에서 나중에 작성된 것이 적용됐었죠. 지금도 같은 상황입니다. 같은 순위 클래스 선택자에서는 나중에 작성된 .txt-2em 속성이 적용되는 것입니다.
자 다시 돌아와서 만약 위의 html 요소에서 초록색 배경에 흰색글자 그리고 글자크기가 2배인 요소는 글자의 두께를 두껍게하고 싶다면 어떻게 해야 할까요? 위 요소 중에는 마지막 요소가 되겠네요. 참고로 글자를 두껍헤 하는 속성은
font-weight:bold 입니다.
물론 css에서 클래스를 하나 더 추가하고 html문서의 마지막 p 요소에 한칸 띄우고 추가한 클래스를 입력해도 됩니다.
현재는 하나의 웹문서이지만 웹문서가 수십개, 수백개라면 그렇게 할 경우에는 모든 html문서를 찾아다니면서 class를 추가해야 합니다. 엄청난 작업이 될 것입니다.
이런 경우 css에서는 간단한 해결 방법이 있습니다. css에서 한줄 추가하는 것으로 해결 됩니다.
@charset "utf-8";
/* CSS Document */
.bg-green { background-color: green; }
.txt-white { color: white; }
.txt-2em { font-size: 2em; color:yellow }
.bg-green.txt-white.txt-2em{ font-weight: bold; }제일 아래 줄을 확인해주세요
.bg-green.txt-white.txt-2em으로 선택자를 지정했습니다. 이미 선언한 해당 선택자를 그대로 쭉 이어서 작성하는 것이죠
바로 이 선택자의 의미가 초록색 배경에 흰색글자 그리고 글자크기가 2배인 요소를 선택한 것이 됩니다.
결과를 확인 하시면 위처럼 잘 적용된 것을 확인 하실 수 있습니다.
여기서 중요한 사항이 있습니다. 이렇게 여러개가 같이 적용된 css를 작성할 때는 띄어쓰기를 하시면 안됩니다.
위 그림 처럼 띄어쓰기를 해서 공백을 넣게 되면 전혀 다른 의미가 되어 버립니다. 이 공백문자는 다음강좌에서 어떤 의미 인지 알아 보겠습니다. 의미 그대로의 선택자를 활용하기 위해서는 공백 없이 모두 붙여쓰셔아 된다는 것을 꼭 기억하시기 바랍니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| CSS 선택자 네번째 (그룹 선택자) (1) | 2022.12.09 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 첫번째 (기본 선택자와 우선순위) (0) | 2022.12.04 |
| CSS 적용 방식 (0) | 2022.12.01 |
| CSS 의 이해 및 맛보기 (0) | 2022.11.30 |