4. **선택자 Selector** (웹 크롤링할때 필요함)

--- HTML 네이밍 해줄 수 있는 속성---
태그명
name 속성 : form안에 input태그에 기술해서 데이터 넘길때 많이 사용.
이름 붙히는 느낌 (css에서 다른 속성을 더 많이 사용)
class 속성 : 다른 태그들과 값이 같아도 된다 -> 그루핑 역할 해줄때 사용
id 속성 : 문서내에서 유일한 값을 가져야함. 태그에 아이디 부여(사람= 주민번호)

1) 전체 선택자 : * 
     모든 요소에 스타일 적용
    * { 속성명 : 값;...} 

 

2) 태그 선택자 : 태그명
       해당 태그에 모두 적용
       태그명 { 속성명 : 값;...}


3) *class 선택자*  : .class속성값 
         특정 부분에 스타일 적용. class 속성값이 동일한 태그들에 적용 
         그룹처럼 지정해서 적용할때 사용. 
         <h1 class="hello">...
         .hello { 속성명: 값; ...}  


4) id 선택자 : #아이디속성값
        특정 태그에(요소)에 스타일 적용.
        id 값은 문서내에서 유일해야하므로 유일한 특정 한개의 요소에만 적용 할 때 사용.
        <h2 id="test">...
         #test { 속성명 : 값;....}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>    
       * {margin: 10; padding: 0}     /* 1) 전체선택자 */
        h1 {color: red;}	/* 2) 태그 선택자 */
        p{color: blue}
        .lorem{color: grey; font-size: 30px} /* 3) 클래스 선택자 */
        #container{			 /* 4) ID 선택자 */
            background-color: turquoise;
            width: 300px;
            height : 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
   <h1> Hello HTML   </h1>
    <h1> Hello CSS </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
</body>
</html>


5) 여러 선택자 동시 적용
: 쉼표를 구분자로 나열하여 적용

선택자, 선택자 {...}

6) 스타일 적용 우선순위
          1) 인라인 스타일 > id스타일 > class 스타일> 태그 스타일
          2) 코드 순서 : 나중에 기술한것이 적용
         *스타일 상속 : 부모 태그에 적용된것은 자식 태그도 적용됨.
          ex) body 태그에 폰트적용하면 그 안에 있는 태그들도 모두 적용

7) 연결 선택자
      - 하위 선택자 : 띄어쓰기 구분자로 선택자 나열
        상위 선택자 하위선택자 {...}

- 자식 선택자 : >를 구분자로 하위 요소 전체가 아니라 바로 아래 자식요소만 적용
부모선택자 > 자식선택자 {...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
       #container > ul{border: 1px solid red;}  /*  > 를 사용하여 바로 아래자식인 ui에게 만 사용 */
    </style>
        
</head>
<body>
   <div id="container">
       <h1>Hello CSS in container</h1>
       <ul>						<!-- 여기에만 적용됨 -->
           <li> list1
               <ul>					<!-- 여기는 적용 안됨 -->
                   <li>list1-1</li>
                   <li>list1-2</li>    
                   
               </ul>
           </li>
           <li>      list2
               <ul>					<!-- 여기도 적용 안됨 -->
                   <li>list2-1</li>
                   <li>list2-2</li>
                   <li>list2-3</li>
                   <li>list2-4</li>

               </ul>
           </li>
       </ul>
       
   </div>
</body>
</html>


- 인접 형제 선택자 : +를 구분자로 기술. 가장 가까운 형제 요소. 
선택자 + 선택자 {...}
(형)  (아랫동생)
- 형제 선택자 : ~을 구분자로 기술. 인접과 달리 형 다음에 붙은 모든 형제 요소에 적용.
선택자 ~ 선택자 {...}
(형) ~   (동생들) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
      h1+ul{color: blue; font-weight: bold;}    /*  + 를 사용하여 h1 과 가장가까운 형제에게만 적용 */ 
    </style>
        
</head>
<body>
  <ul>
    <li>list1-1</li>
    <li>list1-2</li>
</ul>
<h1>Hello CSS</h1>                         <!--h1이 여기 있으니 그 바로 밑 형제들만 적용됨 -->
    <li>list2-1</li>
    <li>list2-2</li>
    
</ul>
<ul>
    <li>list3-1</li>
    <li>list3-2</li>
    <li>list3-2</li>
    
    
</ul>
</body>
</html>

h1이 2-1 위에 있을때
h1이 1-1 위에 있을때
선택자 ~ 를 사용했을때 h1~ul



8) 속성 선택자
- 속성명 : 지정한 속성을 가진 요소 찾아 적용
선택자[속성]{...}
p[class]
- 속성값 : 속성명에서 나가아 속성의 값이 일치하는 요소를 찾아 적용
선택자[속성 = 값]{...}
p[class=hello]
- 속성^=값 : 특정 값으로 시작하는 속성을 가진 요소
선택자[속성^=값]{...}
p[class^=A]
- 속성$=값 : 특정값으로 끝나는 속성을 가진 요소
선택자[속성$=값]{...}
- 속성*=값 : 특정값을 포함하는 속성을 가진 요소
선택자[속성*=값{...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
 
        ul{list-style: none;}
        li{display: inline; margin: 10px;}
        a{text-decoration: none; font-size: 30px; }
        a[href] {background-color: yellow;}
        a[target= "_blank"]{background-color: turquoise;}   /* target = _blank 인 */   
        a[class^="j"]{background-color: yellow;}			/* j로 시작하는 */
        a[class$="a"]{background-color: yellow;}			/* a로 끝나는 */
        a[class*="s"]{background-color: yellow;}			/* s가 포함된 */
    
    </style>
</head>
<body>
<ul>
    <li> Main menu :</li>
    <li><a href="http://naver.com" class="java">naver</a></li> 
    <li><a href="http://google.com"class="jsp">google</a></li>
    <li><a href="http://daum.net" class="spring">daum</a></li>
</ul>


</body>
</html>



9) 가상클래스 선택자
: 사용자 동작에 반응하는 스타일 적용시 사용
a 태그에서 많이 볼 수 있다.

a:link  : 기본. 방문전 링크 스타일에 적용
a:visited   : 방문한 링크 스타일에 적용
a:hover : 요소가 마우스 커서를 올려놓을때 스타일
a:acitve : 요소가 활성화 했을때 스타일 적용 (a-> 누르고 있을때)
a:foucs : 요소가 초점이 맞추어 져있을때 스타일 적용)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
 
        a:link{color: black;}
        a:visited{color: turquoise;}
        a:hover{background-color: yellow;}
        a:active{color: magenta;}
        a:focus{background-color: lightblue;}
    </style>
</head>
<body>
<ul>
    <li> Main menu :</li>
    <li><a href="http://naver.com" class="java">naver</a></li> 
    <li><a href="http://google.com"class="jsp">google</a></li>
    <li><a href="http://daum.net" class="spring">daum</a></li>
</ul>


</body>
</html>


10) UI 요소 상태에 따른 가상 클래스 선택자
: 웹 요소 상태에 따라 스타일 지정

: enable  : 사용가능상태의 요소 (텍스트 필드)
: disable : 사용불가상태 요소
: checked : 체크된 상태의 요소 (라디오, 체크박스)

11) 구조 가상 클래스 선택자
: 웹 문서 구조를 기준으로 특정 위치에 있는 요소 찾아 스타일 적용

: root : HTML
: nth-child(n)      : 앞에서부터 n번째 자식요소
: nth-last-child(n)  : 뒤에서부터 n번째 자식요소
: nth-child(odd)  : 홀수번째 자식요소
: nth-child(even) : 짝수번째 자식요소
: first-child  : 첫번째 자식
: last-child : 마지막 자식
: not(선택자) : 괄호안에 있는 요소를 제외한 나머지

12) 가상 요소 선택자
가상 클래사 = 여러 태그중 원하는 태그를 선택하기 위한 선택자
가상 요소  = 태그안 내용의 일부분만 선택해 스타일 적용

::first-line : 첫번째 줄
::first-letter : 첫번째 글자
::befor : 내용 맨 앞
::after : 내용 맨 뒤

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 1 - 개념과 적용 방법  (0) 2022.05.31

+ Recent posts

티스토리툴바