티스토리 뷰

CSS

[CSS] Pseudo-class

Dongi 2021. 12. 21. 09:27

안녕하세요 동기 여러분! 오늘은 pseudo-class 가짜 클래스에 대해 알아보도록 합시다!

 

Pseudo-class

<input type="text">

HTML에 input 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다.

네모 박스 안에 텍스트를 넣기 위해 클릭을 하면 아래와 같이 네모 박스가 짙게 변합니다.

 

<a href="">뭬야?</a>

HTML에 a 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다.

처름 링크 걸었을 때

이를 클릭할 때도 색이 변하고 

클릭할 때

 

돌아와도 링크의 색이 변합니다.

클릭하고 돌아와서 봤을 때

 

<form>
  <label for="watusay">뭔가 적어보시오!</label>
  <br>
  <textarea id="watyousay" name="watyousay" rows="10" cols="40"></textarea>
  <br>
  <input type="submit" value="제출">
</form>

또한 HTML에 submit form을 만들어 실행하면 아래와 같은 화면이 나옵니다.

이때 제출에 마우스를 올려두어도 색이 변하고

살짝 짙게 변했음

제출을 누르면 색도 변하고 네모 박스도 짙어집니다.

 

위와 같은 활성화 된 상태도 CSS에서 꾸미거나 조절할 수 있는데 그것이 바로 오늘 알아볼 가짜 클래스(Pseudo-class)입니다.

 

이 가짜 클래스(Pseudo-class)를 속성 선택자(Attribute selector) 옆에 추가하면 이를 활용할 수 있습니다.

p:hover {
  background-color: purple;
}

위 코드에서 :hover가 가짜 클래스(Pseudo-class)입니다.

 

 

자주 쓰이는 가짜 클래스(Pseudo-class)

가짜 클래스 Pseudo-class 설명 (괄호 안의 예는 예시 일뿐 더욱 많은 설정들이 있습니다.)
:hover 요소에 사용자가 마우스를 올렸을 때의 설정 (링크에 마우스을 올렸을 때 색이 변하거나 하는 설정)
:active 요소에 사용자가 마우스로 클릭을 했을 때의 설정 (클릭하면 색이 글자색이 변한다거나 배경색이 변하는 설정)
:link 사용자가 아무것도 하지않은 상태의 요소의 설정 (링크에 손을 대지 않았을 때의 초기 설정)
:focus 요소에 포커싱을 맞췄을 때의 설정 (인풋 칸을 클릭하면 인풋 칸의 색이 변한다던지 사용자가 입력하는 글자 색이 변한다던지의 설정임 - 다른 곳을 클릭하면 다시 원래대로 돌아감)
:visited 사용자가 이미 클릭하여 방문한 링크나 버튼을 표시 할 때의 설정 (위의 예시에 "뭬야?" 세 번째 사진과 같은 것을 설정하는 것)
:disabled 사용자가 입력하지 않아도 되는 칸을 막아두는 설정 (보통 쇼핑 사이트에서 주소를 입력할 때 배송지 주소와 카드 정보의 주소가 일치 할 때 하나만 적기 위해 버튼이나 체크박스로 이를 막을 수 있는 설정)

 

 

 

한번 해볼까요?

<!-- HTML 코드입니다. -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <a class="btn btn-primary" href="#" role="button"><b>변신버튼!</b></a>
  </body>
</html>
/* CSS 코드입니다. */
.btn.btn-primary {
  border-radius: 30px;
  border: none;
  color: #00fbe6;
  text-shadow: none;
  background-color: #ff7637;
  font-size: 15px;
  padding: 10px 20px;
  width: fit-content;
  margin: auto;
}

.btn.btn-primary:hover {
  color: #ff7637;
  background-color: #00fbe6;
}

a {
  text-decoration-line: none;
}

이 코드들을 실행 하면 아래와 같이 실행됩니다.

 

 

번쩍 번쩍ㅋㅋㅋ

 

 

 

오늘의 느낌

요즘 참깨 라면을 메인으로 먹고 있는데 참으로 맛있습니다. 한 2년 전에 진라면 매운맛을 처음 먹어보고 면발과 국물이 너무 맛있어서 넘버원 라면이 되었는데 언제부터인가 어찌 된 영문인지 캐나다에선 갑자기 한팩에 4개를 팔고 면발이 변한 것을 알아차린 뒤론 조금 실망했었습니다. 하지만 참깨 라면은 한팩에 5개나 들어있고 면발이 예전에 먹었던 진라면 매운맛과 같아 너무 맛있게 먹고 있습니다.ㅎㅎ 

 

오늘 저녁은 참깨라면 먹을까

'CSS' 카테고리의 다른 글

[CSS] Chaining  (0) 2021.12.22
[CSS] Specificity  (0) 2021.12.21
[CSS] Attribute  (0) 2021.12.20
[CSS] ID  (0) 2021.12.19
[CSS] Class  (0) 2021.12.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함