본문 바로가기
Coding/Client - CSS

선택자의 종류

by 그냥그렇듯이 2017. 9. 7.
반응형

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.


<선택자의 종류>

Id 선택자, TAg 선택자, Class 선택자

어떤 태그를 디자인하기 위해서는...
1. 디자인하려는 태그를 선택하고 (선택자, Selector) => 주어
2. 선택한 대상에게 원하는 효과를 적용해야한다. (선언, Declaration)



- ID 선택자 -

 예제

   <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style media="screen">

li{ color:red; text-decoration:underline; }

#select{ font-size:50px; }

</style>

</head>

<body>

<ul

 <li>HTML</li>

<li id="select">CSS</li>

<li>JavaSCript</li>

</ul>

</body>

</html>


- 클래스 선택자 -
Class는 Grouping을 위한 도구이다. 클래스를 활용하면 다른 태그도 Grouping해서 활용할 수 있다.
id는 개별 관리를 위한 도구이다. 단 한번만 등장해야한다.

예제

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
 li{ color:red; text-decoration:underline; }

#select{ font-size:50px; }

.deactive{ text-decoration:line-through; }

</style>
</head>
<body>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaSCript</li>
</ul>
</body>
</html>





댓글