웹 css - 선택

웹에서 css란 빠질 수 없는 존재이다.

 

물론 없어도 우리가 필요한 일을 하기위한 기능들은 html에서 모두 얻을 수 있지만,

 

거의 검은색과 흰색만있는 페이지가 우리 눈에 잘 들어올까?

 

그래서 css가 생겼다. 

 

css는 Cascading Style Sheets의 약자로 기능을 간략히 말하자면 웹의 디자인을 맏고 있다.

 

오늘은 css에서 꼭 필요한 선택자에 대해 알아보도록 하자.

---

먼저 css의 구조를 살펴 보자.

 

 p {background-color=='red';}

 

-p는 선택자 이다.

 

-중활호 {} 는 p선택자에 대한 명령어를 적는 칸을 만든다. 이를 선언블록이라고 한다.

 

-background-color=='red';는 명령어, 즉 선언이다.

 

-background-color는 속성, 'red'는 속성 값이다.

---

이제 본격적으로 알아보도록 하자.

1. 전체 선택자 - *

 

* {backgound-color='red';}

 

html body 태그 안의 모든 태그에 적용된다.

 

2. 태그 선택자 - 적용하고 싶은 태그 이름 ex)p

 

예시로 든 p태그에 적용됩니다.

 

3. 아이디 선택자 - #id

 

ex)

<p id='id'>선택자</p>

 

id선택자를 사용하려면 #을 쓰고 그 뒤에 id값을 쓴다.

예시에서는 id가 id이므로 #id를 사용하여 적용한다.

 

4.클래스 선택자

 

위의 아이디 선택자와 마찬가지이지만 id='' 대신 class=''로 바뀐다.

 

ex)

<p class='class'>선택자</p>

 

class선택자를 사용하려면 .을 쓰고 그 귀에 class의 이름을 쓴다.

예시에서는 class가 class이므로 .class를 사용하여 적용한다.

 

5.자식 선택자

 

 

<div>

    <p>선택됨</p>

</div>



<p>선택 안됨</p>

 

이와같이 사용하는데 p태그로 적용한다면 div안의 p와 밖의 p까지 적용할 수 있지만

 

div안의 p만 적용하고 싶다면 부등호를 사용하여

 

div > p 와 같이 사용한다.

 

ex) div > p{background-color='red';}

 

6.자손 선택자

 

위의 자식 선택자와 비슷하지만 부등호가 빠진 형태이다.

 

<div>

    <p>선택됨</p>

    <span>

       <p>자손 선택자</p>

    </span>

</div>



<p>선택 안됨</p>

 

ex) div p{background-color='red';}

이렇게 하면 div안의 p태그만 적용된다. 물론 span 태그안의 p태그까지 적용한다.

 

자식 선택자는 div > p 를 하면 span 태그는 적용하지 못한다.

 

7.가상 클래스 선택자

 

요소:link 방문하지 않은 링크 요소를 선택                                ex) p:link {color='red';}

요소:visited 방문한 링크 요소를 선택                                     ex) p:visited {color='red';}

요소:hover 요소에 마우스가 올라가 있는 동안 해당 요소를 선택   ex) p:hover {color='red';}        <- 사용빈도가 높다.

요소:focus 요소에 포커스가 맞춰진 동안 해당 요소를 선택 ex)     ex) p:focus {color='red';}