반응형
css 전체 셀렉터에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 전체 셀렉터에 대해 알아보도록 하겠습니다.
우리가 웹 페이지를 작성을 하다 보면 페이지 전역적으로 무언가를 적용시켜야 하는 경우가 있습니다.
그럴 때 우리는 전체 셀렉터를 사용합니다.
그래서 이번 포스팅에서는 전체 셀렉터를 어떤 식으로 사용을 하는지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 전체 셀렉터
전체 셀렉터는 html 페이지 전역적으로 적용되는 셀렉터를 말합니다.
때로는 우리가 css를 전체적으로 균일하게 적용을 시켜야 하는 경우가 생기는데,
그럴 경우에 전체 셀렉터를 이용합니다.
전체 셀렉터를 쓸 때는 에스터리스크(*)를 사용하며,
이때 쓰는 '*'을 와일드카드 문자라고 합니다.
이런 식으로 사용합니다.
* { color : green; }이렇게 '*'을 주게 되면 어떤 html 태그이든 그냥 전체가 다 이걸로 적용이 되는 겁니다.
그리고 여담인데, 이 와일드카드 문자는 여러 프로그래밍 언어에서 전체 선택 또는 출력에 관한 부분을 담당합니다.
그래서 와일드카드 문자는 기능적으로 아주 중요합니다.
그럼 이제 이를 이용해서 한 번 코드를 작성해 보도록 하겠습니다.
<!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>
* { color : green; }
</style>
</head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul id="list">
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>
반응형
이제 결과를 보도록 하겠습니다.
이렇게 페이지 전역적으로 글자 색이 다 초록색으로 바뀌어 있는 것을 볼 수 있습니다.
하지만 전체 셀렉터는 아주 많이 쓰지는 않기 때문에 알아만 두셔도 좋습니다.
여기까지 전체 셀렉터에 대하여 알아보았습니다.
다음 포스팅에서는 속성 셀렉터에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 가상 클래스 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
|---|---|
| css 속성 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css id 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 클래스 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
| css 태그 이름 셀렉터에 대하여 알아보기 (0) | 2023.03.13 |
댓글