카테고리 없음

[CSS] Class 속성을 사용한 링크 색깔 변경

정보통신 고심이 2023. 1. 25. 23:37

오늘은 Class에 대해서 배웠다. 엄밀하게 말하면 HTML에 해당되는 부분이다.

Class란 같은 의도에 따라 묶여진 학생들을 하나로 그루핑할 때 사용하는 말이다. 즉, '하나로 묶는다'는 뜻이다. 

 

이전까지는 sytle 속성을 인라인으로 적용해서 글씨 색깔을 변경 했었다.

이 방법보다는 Class 속성을 사용 하는 것이 더욱 편리하다. 

 

사용 방법은 간단하다

 

1. 태그에 class 속성 지정

            <li><a href="1.html" class="saw">HTML</a></li>
            <li><a href="2.html" class="saw">CSS</a></li>

 

2. class 값을 가진 태그의 글자색 변경

            .saw{
                color: gray;
            }

주의할 점은 태그 앞에 .를 붙여줘서 표기해야 한다.  

 

 

Class의 속성을 이용해서 링크 색깔을 조금 더 구체적으로 바꿔 보려고 한다. 

 

웹 사이트의 모든 링크 -> black (완료)

사용자가 방문했던 링크 -> gray

현재 머물고 있는 페이지의 링크 -> red

 

 

 

1. 사용자가 방문했던 링크 색깔 변경 

 

 

<!DOCTYPE HTML>
<html>
    <head>
        <title>WEB - CSS</title>
        <meta charset="utf-8">
        <style>
            a{
                color:black;
                text-decoration:none;
            }
            .saw{
                color: gray;
            }
            h1{
                font-size: 60px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html" class="saw">HTML</a></li>
            <li><a href="2.html" class="saw">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>

saw class를 추가하였음

 

 

 

2. 현재 머물고 있는 페이지의 링크 색깔 변경 

 

       <style>
            a{
                color:black;
                text-decoration:none;
            }
            .active{
                color:red;
            }
            .saw{
                color: gray;
            }
            h1{
                font-size: 60px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html" class="saw">HTML</a></li>
            <li><a href="2.html" class="saw active">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>

active 그룹을 추가하였다. 

 

 

만약, class 간 순서가 바뀔 경우 효과가 적용  안될 수 있다. 

이를 해결하기 위해서는 우선 순위가 더 높은 선택자를 사용하는 방법이 있다.

id 선택자를 사용했다. 

 

       <style>
            a{
                color:black;
                text-decoration:none;
            }
            #active{
                color:red;
            }
            .saw{
                color: gray;
            }
        </style>
    </head>
    <body>
        <ol>
            <li><a href="1.html" class="saw">HTML</a></li>
            <li><a href="2.html" class="saw" id="active">CSS</a></li>

id 선택자 사용시 id="class" #class를하면 된다. 

하지만 id 선택자 값인 태그가 이 웹 페이지에서는 단 한 번만 등장해야 한다.  동작은 하지만 여러 번 사용하는 것을 권장하진 않는다. 

 

 

 

선택자 우선순위를 정리

ID 선택자 > 클래스 선택자 > 태그 선택자