cording/생활코딩

[CSS] 선택자의 기본

효기롭다 2022. 3. 1. 16:18 
<!doctypehtml>
<html>
<head>
 <title>SEVENTEEN - HIPHAP TEAM</title>
 <meta charset="utf-8">
 <style>
   a {
     color:black;
     text-decoration: none;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" style="color:pink">HIPHAP TEAM</a></li>
   <li><a href="2.html" style="color:pink">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>
 <h2>HIPHAP TEAM</h2>
 <strong>S.COUPS</strong><p><img src="s.coups.jpg" width="450"></p>
 <u><p>세븐틴 총괄리더이자 힙합팀 리더</p></u>2020년에 <a href="https://youtu.be/H-WQL-XV8Ak" target="_blank"  title="문명특급 세븐틴편">문명특급</a>을 보다가 아이같이 환하게 웃는 모습을 보고서 덕통사고를 당해 현재까지도 최애가 되버린 나의 그이.
</body>
</html>

 

 <ol>
   <li><a href="1.html" style="color:pink">HIPHAP TEAM</a></li>
   <li><a href="2.html" style="color:pink">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

원하는 TEXT에 일일히 pink로 바꾸어줌 but 일일히 해야하는 번거로움이 있음 이것을 선택자를 활용해 바꾼다.

 

 <style>
   a {
     color:black;
     text-decoration: none;
   }
   .saw {
     color: pink;
   }
   .active {
     color: blue;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

 <style>
   a {
     color:black;
     text-decoration: none;
   }
   .saw {
     color: pink;
   }
   .active {
     color: blue;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

class 값이 saw인 모든 태그에 대해 폰트를 pink로 설정했다. 그리고 active는 blue로 설정했다. 여기서 saw와 구분은 띄어쓰기.* 여기서 . (약속된 기호) 

 <style>
   a {
     color:black;
     text-decoration: none;
   }
   .active {
     color: blue;
   }
   .saw {
     color: pink;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

 <style>
   a {
     color:black;
     text-decoration: none;
   }
   .active {
     color: blue;
   }
   .saw {
     color: pink;
   }
   h1 {
     font-size: 45px;
     text-align: center;

* 여기서 .active가 .saw 보다 앞에 올때엔 blue로 적용되지 않는다. 왜냐하면 a태그와 좀더 가까이에 있는 명령이 더 큰 영향력을 갖기 때문이다.

그래서 좀 더 우선순위가 높은 것을 사용한다.

<style>
   a {
     color:black;
     text-decoration: none;
   }
   .saw {
     color: pink;
   }
   #active {
     color: blue;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw" id="active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

 

<style>
   a {
     color:black;
     text-decoration: none;
   }
   .saw {
     color: pink;
   }
   #active {
     color: blue;
   }
   h1 {
     font-size: 45px;
     text-align: center;
   }
 </style>
</head>
<body>
 <h1><a href="index.html">SEVENTEEN</a></h1>
 <ol>
   <li><a href="1.html" class="saw">HIPHAP TEAM</a></li>
   <li><a href="2.html" class="saw" id="active">VOCAL TEAM</a></li>
   <li><a href="3.html">PERPOMONCE TEAM</a></li>
 </ol>

id값이 active인 태그에 대해 blue로 적용되도록 설정한다. 그러면 .saw 보다 아래에 위치하고 있음에도 불구하고 text가 blue로 적용된다. * 이때 # 을 사용한다. 그리고 id의 값은 단 한번만 등장해야한다 (중복되면안된다)

따라서 선택자의 범위를 알수 있다. id < class < a   a 선택자의 값이 포괄적이고 id 선택자의 값이 더 구체적이다. class 선택자의 값은 중간값. 

저작자표시 비영리 동일조건 (새창열림)