프로그래밍/CSS

생활코딩 css 정리 - 3. 선택자의 종류

가카리 2017. 9. 18. 20:27
반응형
3. 선택자의 종류

선택자의 타입들

이번 수업에서는 다양한 형태의 선택자를 알아봅니다.

  • 태그 선택자
  • 클래스 선택자
  • 아이디 선택자

3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 배우면 됩니다

1) 태그 선택자

태그를 선택합니다. 아래 코드는 문서의 모든 li 태그라는 뜻입니다

li{color:red}

2) 아이디 선택자

아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이  select인 태그라는 뜻입니다. 

#select{font-color:50px;}


selector_1.html

<!DOCTYPE html>

<html>

<head>

<style>

      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>


실행 화면

다음과 같이 id select 값만 font-size 적용됨을 있다.


3) 클래스 선택자

 클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다


클래스 속성을 선택하려면 .클래스명 으로 합니다.


<!DOCTYPE html>

<html>

<head>

<style>

      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>


실행 화면

클래스가 deactive 요소들은 취소선이 지정되었음을 있다.

 


반응형