Day 4

mh·2021년 11월 4일

CSS html 멋쟁이사자처럼 프론트엔드

멋쟁이사자 프론트엔드 1기

목록 보기

3/12

CSS 마라톤 🏃🏼‍♀️ 🏃🏼

지난번에 이어서 선택자 정리를 마저 하려고 한다.
지겹지만 해야해!

INDEX

가상 클래스 선택자

1. 가상 클래스 선택자

내가 제일 어려워 하던 부분이였다.🤯
전에 다른 웹페이지를 분석할때도 뭘 했길래 요소가 사라졌다 나타났다 하나 했는데
그게 가상선택자였다.
a:hover { } p:nth-child(1) 와 같이 html로 봤을땐 보이지 않는 클래스다.

요소: after, before, placeholder
클래스: nth-child, active, focus, hover 등

nth-child 예제

<!DOCTYPE html>
<html lang="ko">
<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>가상 클래스 선택자</title>
    <style>
        /* .foo:nth-child(odd) {
            color:red;
        } */


        
        .foo:nth-child(2n+1) {
            color:red;
        }
       


    </style>
</head>
<body>
    <ul>
        <li class="foo">1</li>    <!-- .foo:first-child -->
        <li class="foo">2</li>    
        <li class="foo">3</li>    <!-- .foo:nth-child(3) -->
        <li class="foo">4</li>
        <li class="foo">5</li>    <!-- .foo:last-child -->
        <li class="foo">1</li>
        <li class="foo">2</li>
        <li class="foo">3</li>
        <li class="foo">4</li>
        <li class="foo">5</li>
    </ul>
</body>
</html>

.foo:nth-child(odd) / .foo:nth-child(2n+1) 일 경우 class="foo"인 요소 중 홀수만 선택한다.
.foo:first-child / nth-child(1) 일 경우 class="foo"인 요소 중 첫번째만 선택한다.

.foo:nth-child(3) 일 경우 class="foo"인 요소 중 세번째만 선택한다.
.foo:last-child 일 경우 class="foo"인 요소 중 마지막만 선택한다.

.foo:nth-child(even) / .foo:nth-child(2n) class="foo"인 요소 중 짝수 요소만 선택한다.

.foo:nth-child(3n+1) 일 경우 1이 선택 된 걸 보니 n은 0부터 대입하는 것 같다.

위의 조건에 .foo:nth-child(n) {font-weight=bold;}를 추가했을때 nth-child(n)은 n번째 요소를 선택하지만 숫자대신 n을 쓰니까 모두선택이 되었다.

위의 nth-child(n)에 블루컬러를 추가하면 모두 블루가 된다. (코드의 제일 아래에 있는 css가 적용된다.

focus hover active

<!DOCTYPE html>
<html lang="ko">
  <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" />
    <style>
      input:focus {
        color: red;
      }
      input:hover {
        color: green;
      }
      input:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="id">ID</label><input id="id" name="id" type="text" />
      <label for="pw">PW</label><input id="pw" name="pw" type="text" />
    </form>
  </body>
</html>

아이디에 키보드 커서가 활성화됐을때
아이디에 마우스를 올렸을때

아이디를 클릭(활성화) 시켰을때

아이디에서 포커스아웃되고 패스워드에 포커스인 될때

enabled disabled label+input:cheked

<!DOCTYPE html>
<html lang="ko">
  <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" />
    <style>
      input:enabled {
        color: blue;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="id">ID</label><input id="id" name="id" type="text" />
      <label for="pw">PW</label><input id="pw" name="pw" type="text" />
    </form>
  </body>
</html>

활성화 될때 글자색이 파래진다.

<!DOCTYPE html>
<html lang="ko">
  <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" />
    <style>
      input:enabled + span {
        color: blue;
      }
      input:disabled + span {
        color: red;
      }
      label + input:checked + span {
        color: green;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="이름">이름</label>
      <input id="이름" name="name" type="text" /><span>O</span><br />
      <label for="남">남</label>
      <input id="남" name="성별" type="radio" value="male" /><span>O</span><br />
      <label for="여">여</label>
      <input id="여" name="성별" type="radio" value="female" /><span>O</span><br />
      <label for="우주인">우주인</label>
      <input id="우주인" name="성별" type="radio" value="female" disabled/><span>O</span>
    </form>
  </body>
</html>

가상 요소 선택자는 내일... 컨디션조절해야겠다.
오늘 position도 엄청헷갈리는데.. 그것도 올려야한다.

🤪🤪🤪🤪🤪

이전 포스트

Day3

다음 포스트