[CSS] 수도선택자(Pseudo Selector) : 링크 꾸미기, 마우스 놓으면 바뀌게하기

📌CSS Pseudo Selector (수도선택자)

 

link	방문하지 않은 링크
visited	방문한 링크
hover	클릭하지 않고 마우스 올려놓은 상태
active	사용자가 해당 element를 클릭할 때
focus	input이 입력될 때

 

 

• link&visited&hover

---

열심히 살고싶어 오늘도

---

    <a href="https://summmer-00.tistory.com/"> 열심히 살고싶어 오늘도</a>

    a:link {background-color: pink;}
    a:hover{
        background-color: blueviolet;
        color: white;
        text-decoration: dotted;
    }
    a:visited {
        display: hidden;
    }

 

 

• active

---

 

Lorem ipsum dolor sit amet consectetur.

---

    <div class="click">
        Lorem ipsum dolor sit amet consectetur.
    </div>

   .click {
        background-color: aqua;
        padding: 10px;
        margin: 10px;
        width: auto;
    }
    .click:active {
        background-color: palegreen;
    }

 

 

• focus

---

---

 

    <form>
        <input type="text" name="focus">
        <input type="submit" name="submit">
    </form>

    input:hover {
        background-color: aquamarine;
    }
    input:focus {
        background-color: red;
      
      }