{CSS 2} class속성과 id속성, 선택자의 우선순위
사용자가 순차적으로 카테고리를 선택했다고 가정할 때, 선택했던 카테고리는 색을 바꿔라.
(=특정한 a태그에만 색을 바꾸고 싶을 때)
class="saw"라는 속성을 태그에 적고,
saw{
color : gray;
}
를 추가한다.
그런데 이렇게 쓰면 적용이 안 된다. 이유는 saw{}라는 뜻은 웹페이지에 있는 모든 saw라는 이름의 태그를 선택하라는 선택자이다. class값이 saw인 태그를 선택하고 싶을 때는 .saw{}를 사용한다.
참고로 saw대신에 다른 값을 넣어도 된다. 말 그대로 지정한 '값'이기 때문에.
<head>
.saw{
color : gray;
}
</head>
<body>
<li><a href="1.html" class="saw">나의 강점</a></li>
</body>.saw{}의 뜻은 웹페이지에 있는 모든 class가 saw인 태그를 가리키는 선택자라는 뜻이다. 그리고 class는 그룹핑, 하나로 묶는다는 뜻을 포함하고 있다.
현재 머물고 있는 a태그에도 다른 색을 입히고 싶다.
<head>
.saw{
color : gray;
}
.active{
color : red;
}
</head>
<body>
<li><a href="1.html" class="saw active">나의 강점</a></li>
</body>class는 여러 속성을 넣을 수 있고, 띄어쓰기로 구분한다. 그리고 여러 속성들을 공동으로 관리할 수 있다. 나중에 쓴 속성이 더 큰 영향력을 가진다. 👉 .saw{} < .active{} 그래서 좋은 코드는 아니다. 그럴 때 사용하는 태그가 id태그이다.
<head>
.saw{
color : gray;
}
#active{
color : red;
}
</head>
<body>
<li><a href="1.html" class="saw" id="active">나의 강점</a></li>
</body>이렇게 작성하면 우선순위 관계없이 id선택자가 더 큰 영향력을 가진다. 큰 영향력을 가진 id값은 중복되어서는 안되기 때문에, 한 번만 등장해야 한다.
id선택자 > class선택자 > 태그선택자
같은 선택자 안에서는 제일 마지막에 등장한 선택자가 우선순위가 높다.
선택자끼리 비교할 때는 포괄적일수록 우선순위가 낮아지는 경향이 있다.
그 외 선택자는 css selector라고 검색하면 구경할 수 있다.
https://cheddar-cheez.github.io/Study-CSS-2/
눈치를 챘을지 모르겠지만 중의적 표현이 있어서 헷갈리는 곳에 보라색 점선 밑줄을 쳤다. 어떻게 style을 넣어야 하나 이것저것 눌러보니까 span태그가 나와서, <span>를 검색했는데, 줄바꿈이 되지 않는 특별한 기능이 없는 태그 라고 나왔다. 그리고 <span>태그에 대해서는 이전에 포스팅했었었다.
2022.02.05 [html 개괄] 맛보기 필수내용 빠르게 훑어보기
[html 개괄] 맛보기 필수내용 빠르게 훑어보기
HTML = Hyper Text Markup Language <태그 속성 ="값">content 👈 "요소" <> : 태그 열림과 닫힘 한 쌍으로 이루어짐 속성이란 HTML요소에게 이름을 지어주는 것 class 속성에 원하는 이름(=값)을 넣고 css에서 cl..
cheddar-cheez.tistory.com
여기에서는 구역분할태그라고 적어놔서 막연하게 저게 뭘까 했는데, 역시 한 번 적용해보니까 이제 알 것 같다!