[CSS] 01 Property & Selector
Published:
In this post, 01 CSS lecture is introuduced.
style tag for CSS
HTML에 CSS를 적용하기 위해서는 style tag를 사용한다.
<style>
a {
color:black;
text-decoration:none;
}
</style>
이렇게 웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가 지정하는 것 (a 부분) 을 선택자 (selector)라 한다. 그리고 저 선택자에게 지정될 효과 (color:black; 부분)을 효과 (declaration) 이라고 한다. 효과를 지정한 뒤에는 반드시 ; 를 붙여야 한다. 코드에서 color 부분을 property (속성), red 부분을 value (값) 이라고 한다.
HTML의 특정 tag에 직접 효과를 주고 싶다면, style attribute을 사용한다. declaratioin은 style attribute을 사용한다면 해당 속성이 위치하는 tag에게 직접 효과를 줄 것이기 때문에 선택자가 필요 없다.
<ol>
<li><a href="1.html" style="color:red">HTML</a></li>
</ol>
class attribute
HTML에 class 속성을 이용해 tag 들에 클래스 이름을 부여할 수 있다. 이때 하나의 tag는 띄어쓰기로 구분된 여러개의 클래스를 동시에 가질 수 있다. 이 때, 선택자는 .class이름의 형식으로 작성하여 해당하는 class 이름을 class 속성으로 가지는 모든 tag 들을 선택하게 한다.
<style>
a {
color: black;
text-decoration:none;
}
h1 {
font-size: 45px;
text-align: center;
}
.saw{
color: gray;
}
.active{
color: red;
}
</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>
</body>
- 이 때, ‘2.html’ 은 색상은 gray와 red 중 red가 된다. 즉, 클래스 선택자 중 더 나중에 있는 것이 우선순위를 갖게 된다. 하지만 이는 좋은 표현 방식이 아니다. 이를 해결하기 위해 id 속성과 선택자를 이용한다. id 선택자는 class 선택자보다 우선순위를 가지며 #id명의 형식으로 선택자를 작성한다.
- 요약하면, id > class > tag 선택자 순으로 우선순위를 가지며 같은 등위의 선택자에 대해선 나중에 나오는 선택자가 우선순위를 가진다.
<style>
a {
color: black;
text-decoration:none;
}
h1 {
font-size: 45px;
text-align: center;
}
.saw{
color: gray;
}
#active{
color: red;
}
</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" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
</body>
Leave a Comment