[CSS] #2-2 고급 선별자 사용해보기

1. CSS의 고급 선별자 사용해보기

 

 1) 특정 선별자에 스타일 주기

 ① ' > '  ' , '

 이전 게시글에서 배웠듯 다양한 선별자의 관계를 활용해 CSS를 적용하는 기호가 있다.

 

 > : 부모>자식 요소로 선별자를 특정하여 스타일을 적용시킨다.

 , : '그리고(and)'라는 뜻이다. 예를 들어 h1, div 로 해두면 <h1>의 모든 요소와 <div> 의 모든 요소에 스타일을 적용하겠다는 뜻이다.

 

② 가상 클래스(태그의 상세 속성 접근)

 말이 어렵다.

 우리가 왜 선별자를 사용할까?

 CSS의 스타일을 적용할 때 특정 요소에만 손쉽게 적용하기 위해서일 것이다.

 그래서 CSS는 굵직 굵직한 선별자들에 대한 접근도 가능하지만 상세적인 접근도 가능할 수 있게 하기 위한 선택자가 있다.

 

 - nth-child( )

 이 명령어는 몇 번째 자식 요소를 선택하라는 선택자이다.

 아래의 코드를 살펴보자.

<div id="nav">
	<ol>
            <li>손흥민</li>
            <li>김연아</li>
            <li>박지성</li>
            <li><a href="https://www.itwill.co.kr/">아이티윌</a></li>
        </ol>

 

 위의 코드에서 "nav"라는 부모 요소의 자식 요소는 총 4가지다.

 손흥민, 김연아, 박지성, 아이티윌(이건 학원 홍보인 것인가).

 그리고 나는 .css 파일에서 아래와 같은 스타일을 주었다.

#nav>ol>li:nth-child(2){
    font-weight: bold;
}

 

 2번째 자식 요소의 폰트를 굵게 만들었다.

 어떤 요소가 변할까?

 김연아라는 글자가 굵어졌다.

 

 

 2) 링크에 스타일 주기

 웹사이트에서 뉴스같은 게시글들에 마우스를 올렸을 때, 눌렀을 때, 다시 돌아와서 눌렀었던 게시글 제목을 살펴볼 때 글씨들이 변하는 것을 확인할 수 있다.

 아래와 같은 코드를 사용하여 CSS로 이런 것들을 표현할 수 있다.

 여기서는 크게 4가지의 코드를 살펴보자.

 

 a:link        - 일반적 링크 및 방문하지 않은 링크

 a:visited   - 방문했던 링크

 a:hover     - 마우스를 올렸을 때 링크

 a:active     - 마우스를 누르는 순간의 링크

 

 각 코드에 주고 싶은 요소들을 주면 링크에 대한 여러가지 스타일을 적용할 수 있게 된다.

 

 나는 아래와 같은 기본적인 사항을 주었다.

a:link      {color: black; text-decoration: none;}
a:visited   {color: crimpson; text-decoration: none;}
a:hover     {color: black; text-decoration: underline;}
a:active    {color: black; text-decoration: none;}

마우스를 올려놓은 모습

색이 변한 모습

 

 

 더 자세한 내용은 아래의 사이트를 참조하면 된다.

https://www.w3schools.com/cssref/sel_active.asp

CSS :active Selector