css 기초 정리(2)

2020-01-01

해당 Post는 Psuedo selector에 대한 내용임

css의 기초 정리(2)

Psuedo selector

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Selectors and pseudo Selectors</title>
  </head>
  <style> 
    .class{ 
      background-color:red;
    }
  </style>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box">
        <input type="password">
        <input type="submit" class="submit"> //class사용
      </div>
    </div>
  </body>
</html>

이렇게 해도 아무런 문제는 없으나,
팀으로 일할 때 문제가 발생할 수 있다.
그럴 때, class가 아닌 pseudo selector를 사용할 수 있다.

Psuedo selector는 selector이지만 element가 아닌 것을 뜻함.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Selectors and pseudo Selectors</title>
  </head>
  <style>
    input[type="submit"]{//다른 점 확인
      background-color:red;
    }
  </style>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box">
        <input type="password">
        <input type="submit">//다른 점 확인
      </div>
    </div>
  </body>
</html>

위와 아래의 차이를 직접 해보는 것이
이해하는데 더 빠른 이해를 줄 수 있음.

« css 기초 정리 css 기초 정리(3) »