[HTML, CSS] pseudo-class 로 클릭 시 스타일 바꾸기

📌 pseudo-class를 붙이는 요소들

- 사용자가 클릭할 수 있는 요소들

• button
• a
• input

---

📌<button>에 pseudo-class 적용하기

- 인터렉티브 버튼 만들기

 

• cursor: pointer 하면 커서가 누를 수 있는 모양으로 바뀜.
  • pointer모양 말고도 cell 등 모양 많다.

.button {
    color: white;
    background-color:  rgb(0, 80, 91);
    border-radius: 10px;
    font-size: 10px;
    padding: 10px;

    /* 커서 모양 바꾸기 */
    cursor: pointer;
}

 

 

✅ 마우스 올렸을 때 스타일

:hover

 

✅ 커서 찍혀 있을 스타일 (클릭 후 유지할 스타일)

- 다른 곳을 누르면 다시 focus를 잃는다.

:focus

 

✅ 클링 중 스타일 (마우스 누르고 있을 때)

:active

 

✨✨pseudo-class는 순서가 중요!!!!! (hover->focus->active순으로 써야 한다.)✨✨

 

/* pseudo-class로 인터렉티브 버튼 만들기
    순서 중요! hover->focus->active */

/* 마우스 올렸을 때 유지할 스타일 */
.button:hover {
    background-color: chocolate;
}

/* 버튼 클릭 후 유지할 스타일 */
.button:focus {
    background-color: gray;
}

/* 버튼 클릭 중 유지할 스타일 */
.button:active {
    background-color: yellow;
    border: 1px solid black;
}

 

 

[초기 버튼]

 

[버튼에 마우스 올렸을 때 - :hover]

 

[버튼 클릭 중 - :active]

 

[버튼 클릭 후 - :focus]

 

---

 

📌 <input>에 pseudo-class 적용하기

.input-test {
    font-size: 10px;
}

/* input에도 pseudo-class 사용 */
.input-test:hover {
    border: 2px solid yellow;
}

.input-test:focus {
    border-bottom: 5px solid red;
}

 

[초기 인풋]

 

[인풋에 마우스 올렸을 때]

 

[인풋 클릭 후]

 

---

 

📌 <a>에 pseudi-class 적용하기

• :link
  • 방문 전 링크
• :visited
  • 방문 후 링크

[css]

.custom-link {
    /* 링크에 밑줄 없애기 */
    text-decoration: none;
}

/* <a> link에 pseudo-class 사용 */

/* 방문 전 스타일링 :link */
.custom-link:link {
    color: yellow;
}

/* 방문 후 스타일링 :visited */
.custom-link:visited {
    color: black;
}

.custom-link:hover {
    color: yellow;
}

 

[html]

            <input class="input-class">
            <a href="#" class="custom-link">LINK</a>

 

[링크 방문 전]

 

[링크에 마우스 올렸을 때]

 

[링크 방문 후]