CSS 선택자(selector)에 대하여

 

 

• 선택자 selector와 선언(declaration)

이런 식의 문법으로 선택자와 선언을 적용하여 구현할 수 있다.

 

실제 구현된 CSS 선택자와 선언

 

 

 

 

 

• CSS의 id 활용

 

html 텍스트에 CSS을 적용할 때 여러개의 공통된 selector 중 특정 하나만 하고 싶다면 id 기능을 적용하면 id을 적용한 html 텍스트만이 효과가 적용된 것을 확인할 수 있다.

 

html의 문법 id을 사용하면 특정 부분만 효과적용 가능하다. 

 

• html의 <li>태그에id="select"가 적용된 것이 보인다.
• CSS에는id="select"의 select에다 '#'을 앞에다가 붙여줘야 CSS부분에서 id을 받아준다.

 

 

id가 적용된 <li>부분만 텍스트의 크기가 변해있다.

 

 

 

 

 

• 부모 자식 선택자

 

id만으로 특정 텍스트에 효과를 주는 것에는 하나 하나 씩 해줘야하는 한계가 있어 미리 CSS 부분에서 해주는 선택자 설정이 있다. 

부모 자식 선택자 수식들을 사용한다면 더욱 빨리 일을 처리해 나갈 수 있다.

 

ul 밑에있는 모든 태그에 빨간색 글씨체 효과를 적용한다.

 

#id설정 바로 밑에만 있는 모든 li만 빨간색 경계선 박스효과를 적용한다.

 

모든 ul와 ol 동시에 선택하여 파란색 배경화면 색 효과를 적용한다.

 

html에 위에 언급한 css들을 적용한 모습.

 

실제 구현한 모습. 설정된 범위 대로 효과들이 적용된 모습을 확인 할 수 있다.

 

 

 

• 가상 클래스 선택자

 

가상 클래스 선택자는 body안의 요소에 별도의 id나 클래스를 지정하지 않아도 지정할 수 있는 특정 요소들을 선택해주는 역할을 한다.

 

예를 들자면 밑에와 같은 것들이 존재한다.

 

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때 
• :active - 마우스를 클릭했을 때 

즉 body안에 지정하지 않아도 기본적으로 웹안에서 실행되는 마우스 클릭에 관한 특정 요소들을 선택해주는 역할을 하는 것이다.

 

이렇게 마우스 클릭에 관한 선택자들을 모두 적어주었다.

 

visited 선택자 특성상 제한이 있어 방문을 했음에도 불구하고 윈도우 익스플로러에서는 기능을 하지 않았다. 그래서 크롬에서 실행하였더니 visited 효과가 적용되었다. 다른 효과들은 문제 없이 해결되었다.