[CSS] 2 - 선택자 :: Contents Creator

[CSS] 2 - 선택자

2022. 5. 31. 17:03

728x90

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>

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 : 내용 맨 뒤

728x90

'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

Contents Creator 데이터 시대를 넘어 콘텐츠를 만끽하라 이미지 + 서버 + 네트워크를 활용한 콘텐츠 메이킹

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Contents Creator

[CSS] 2 - 선택자

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

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역