CSS에서 어떠한 효과를 의미하는 용어가 속성, 프로퍼티(Property)라는 것을 알았기 때문에
우리는 이제 스스로 검색할 수 있는 능력을 지니게 되었다.
예) 'css text size property'
예) 'css text center property'
...생략...
h1{
font-size: 45px;
text-align: center;
}
...생략...
검색한 것을 활용한 코드
CSS를 지배하는 두 가지 중요한 토대 중 두번째, 선택자에 대해서도 생각해보자.
글쓴이는 모든 링크는 기본적으로 검은색이며, 사용자가 방문했던 각 글들의 링크 색은 회색, 현재 페이지의 링크는 빨간색으로 보이도록 하고 싶다.
일단 모든 a 태그에 대해서 기본 작업을 해준다.
...생략...
<style>
a{
color:black;
text-decoration: none;
}
</style>
...생략...
이제 해당하는 태그에 대해 class 라는 HTML 속성을 지정해보자.
속성의 값으로 보았다는 뜻인 'saw'로 지정하겠다.
...생략...
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...생략...
여기에 있는 class="" 는 HTML이다.
즉, "saw"라는 class 값을 가지고 있는 태그 2개를 만들었는데, 우리가 하고자 하는 것은 이 웹 페이지 내의 모든 태그 중 "saw"라는 class 값을 갖고 있는 모든 태그에 대해 폰트 색상을 'gray'로 지정하는 것이다.
<style>
...생략...
.saw{
color:gray;
}
...생략...
</style>
saw 앞에 .을 붙이는 순간 이 선택자는 웹 페이지에서 class가 "saw"인 모든 태그를 가리키는 선택자가 된다.
다음으로,
현재 머물고 있는 페이지의 링크를 빨간색으로 표시하고 싶다면 다음과 같이 active 클래스를 추가하고 색을 정의해주면 된다.
<style>
...생략...
.active{
color:red;
}
.saw{
color:gray;
}
...생략...
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...생략...
이를 통해, class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분한다는 것과 하나의 태그에는 여러 가지 속성이 들어갈 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다는 사실을 알게 되었다.
하지만, 이는 좋은 방법이 아니다.
예시의 <a>태그는 두 개의 클래스에 영향을 받고 있기 때문이다.
그것은 순서 때문이다.
CSS코드 안에서 .active가 .saw보다 앞에 온다면 CSS글자가 빨간색이 아닌 회색으로 보일 것이다.
즉, 태그에 좀 더 가까이 있는 명령이 더 큰 영향력을 갖는다는 것이다.
그러므로 좀 더 우선순위가 높은 것을 사용할 필요가 있다.
그것은 ID 선택자이다.
...생략...
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...생략...
...생략...
#active{
color:red;
}
.saw{
color:gray;
}
h1{
font-size: 45px;
text-align: center;
}
...생략...
앞에 #을 붙이면 .saw가 #active보다 뒤에 등장했음에도 페이지를 새로고침할 경우 "CSS"의 글자 색이 빨간색이 되는 것을 볼 수 있다.
즉, ID 선택자 > class 선택자 > 태그 선택자 순으로 우선순위를 가진다는 것을 알 수 있다.
그리고 모두 똑같은 형태의 선택자라면 맨 마지막에 등장하는 선택자가 우선순위가 높다.
id값은 대한민국의 주민등록번호와 같다. 즉, id 값은 단 한 번만 등장해야 한다. 따라서 우선순위가 가장 높다고 생각해도 좋다.
선택자 검색은
예) 'css selector' 로 해보는 것을 추천한다.
위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.
'WEB > CSS' 카테고리의 다른 글
| 미디어 쿼리 (0) | 2020.11.04 |
|---|---|
| 그리드(grid) (0) | 2020.11.04 |
| 박스 모델 (0) | 2020.11.04 |
| CSS의 기본 문법 (0) | 2020.11.04 |
| CSS의 등장 배경 (0) | 2020.11.04 |