효과에 대한 중요한 토대를 닦는 작업
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
h1 {
text-align:center ;
font-size: 80px;
color: black;
margin:10px;
}
.saw {
color : gray;
}
.active{
text-decoration:underline;
}
</style>
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html">검색</a></li>
<li><a class="saw active" href="캘린더.html">캘린더</a></li>
</ol>
<h2>캘린더</h2>
<img src="festival.jpg" width="100%">
</body>
. saw active로 class로 묶은 경우 띄어쓰기로 나눠서 여러개의 클래스의 묶음으로 사용가능하고 하나의 테그에는 여러개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 테그를 공동으로 제어할 수 있다.
=> 별로 좋은 방법이 아님.
위의 코드에는 없지만 .saw .active 클래스가 각각 색을 서로 줬을 때
나중에 입력된 클래스의 값을 반영하기 때문에 매우 좋지 않아서
ID 선택자를 사용하는 것을 추천
ID선택자 vs class 선택자 vs 테그 선택자
id > class > tag
이유는?
id 선택자의 경우엔 같은 이름의 id는 한 번만 사용할 수 있기 때문에 개발자들은
포괄적인 테그보다 구체적인 id선택자를 더 우선순위를 높게 만들었다.
'WEB > HTML+CSS(Front-end)' 카테고리의 다른 글
| HTML+CSS - 웹페이지 폰트 적용하기 (0) | 2021.05.17 |
|---|---|
| CSS - 그리드 (부제: div/span 테그를 알아보자) (0) | 2021.05.12 |
| CSS - CSS의 기본문법(부제: CSS의 기본적 문법과 CSS 적용 방법을 알아보자) (0) | 2021.05.10 |
| CSS - CSS의 시작 (부제: HTML과 CSS의 사용 차이법을 알아보자) (0) | 2021.05.10 |
| HTML - 태그의 제왕(부제: 링크를 알아보자 <a>) (0) | 2021.05.05 |