CSS 선택자 - 별표(*)샵(#)점(.)콜롬(:)괄호(>, [])캐럿(^)달러($) 의미와 예제

웹관련프로그래밍(web programming)

CSS 선택자 - 별표(*)샵(#)점(.)콜롬(:)괄호(>, [])캐럿(^)달러($) 의미와 예제

끄적끄적아무거나 2021. 10. 11. 16:34

참조글

글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다.

(https://scribblinganything.tistory.com/298)

CSS 기본 구조

위 예제 구조는 제 티스토리(tistory)의 CSS에서 일부 입니다. 구성은 총 2개로 아래와 같이 구성됩니다.

선택자(Selector) : 녹색 부분으로 CSS를 적용할 부분을 선택 합니다.
선언부(Declarative) : { } 괄호 부분으로 선택자에서 선택한 부분에 괄호안의 CSS 속성을 적용합니다.

선언부는 다시 아래와 같이 2개로 구성됩니다.

속성명(Property) : 위 그림의 빨간색 부분입니다.
속성값(Value) : 위 그림에서 파란색 부분입니다. 기본 값(Default)이 정해져 있고 입력할 수 있는 값들이 정해져 있습니다.

선언부는 ; (세미콜론)을 사용해서 여러개의 속성값을 적용할 수 있습니다.

이번 포스트에서는 선택자에서 사용되는 여러가지 기호에 따른 특성에 대해 알아볼 예정입니다.

CSS 선택자 (1) : 샵(#), 별표(*)

샾(#) 표시는 ID 값을 의미 합니다. 아래 예제 코드에서 id = "sharp" 로 아이디 값을 설정했고 해당 아이디를 CSS Style 구문에서 선정하였습니다.

별표(*) 는 하위/자식 선택자 모두를 선택하겠다는 의미 입니다. 만일 아래 예제와 달리 샵(#)이 없고 별표(*)만 있다면 해당 문서의 모든 선택자를 선택하겠다는 의미입니다.

예제 코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        #sharp * {
          background-color: lightblue;
        }
    </style>    
</head>
<body>
    <div class="container-fluid"  id="sharp">
        <h1>H1 태그입니다</h1>
        <h2>H2 태그입니다</h2>
        <h3>H3 태그입니다</h2>
        <p>p 태그입니다</p>        
    </div>    
</body>
</html>

결과>>

CSS 선택자 (2) : 점(.)

점(.)은 클래스(Class)를 선택합니다. Class에 동일한 CSS 속성을 적용하고 싶을 때 사용하면 됩니다.

예제 코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        .container-fluid {
          background-color : lightblue;
        }
    </style>    
</head>
<body>
    <div>
        <h1>H1 태그입니다</h1>
        <h2 class="container-fluid">H2 태그입니다</h2>
        <h3>H3 태그입니다</h2>
        <p>p 태그입니다</p>        
    </div>    
</body>
</html>

결과>>

CSS 선택자 (3) : 띄워 쓰기/스페이스(Space), 홑화살괄호(>)

아래 코드 예제처럼 CSS 선택자를 띄워 쓰기 방식으로 선언한 것은 순차적으로 선택자를 선택해서 원하는 선택자를 정하는 과정입니다.

홑화살괄호(>)를 사용한 방법은 직계만 CSS를 적용하겠다는 의미 입니다. 아래 코드와 결과를 보시면 쉽게 이해가 가능합니다. 간단하게 말하면 스페이스는 직계가 아닌 손자나 그 후손의 값도 적용되나 홑화살괄호(>)는 직계만 적용 가능합니다.

예제코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        #parent h3 {
          background-color : lightblue;
        }
        #parent > h1 {
          background-color : red;
        }  
        #parent > div > h2 {
          background-color : red;
        }               
    </style>    
</head>
<body>
    <div id=parent>
        <div>
            <h1>H1 태그입니다</h1>
            <h2>H2 태그입니다</h2>
            <h3>H3 태그입니다</h2>
            <p>p 태그입니다</p>        
        </div>
    </div>       
</body>
</html>

결과>>

CSS 선택자 (4) : 콜롬(:)

콜롬(:)은 아래 예제처럼 link와 visited 에 주로 사용됩니다. link는 방문한 적 없는 링크에 적용되는 css이고 visited 는 방문한적이 있는 링크 값에 적용됩니다.

참고로 아래 예제는 이미 링크들은 클릭하고 들어온 상태여서 클릭된 css가 적용되었습니다.

예제코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
       a:link { color: rgb(198, 211, 20); }
       a:visited { color: rgb(35, 177, 82); }
    </style>   
</head>
<body>
    <div>
        <a href="#">a 태그</h1>
        <br>
        <a href="https://scribblinganything.tistory.com/">코딩끄적끄적</h2>    
    </div>     
</body>
</html>

결과>>

CSS 선택자 (5) : 대괄호([ ])

대괄호([ ])는 선택자를 괄호밖에 선택하고 해당 선택자를 가진 값 중에서 대괄호안의 속성을 가진 위치 값만을 선택해서 css값을 적용해 줍니다. 아래 예제를 보면 쉽게 이해 하실 수 있습니다.

예제코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        div[class] {
          background-color : lightblue;
        }
    </style>    
</head>
<body>
    <div class="container-fluid">
        <h1>H1 태그입니다</h1>    
    </div>   
    <div>
        <h1>H1 태그입니다</h1>    
    </div>     
</body>
</html>

결과>>

CSS 선택자 (6) : 캐럿(^)

캐럿(^)은 선택자의 속성 값 중에서 특정 문구로 시작되는 속성에 CSS 값을 적용하고 싶을 때 사용합니다.

아래 예제를 통해 쉽게 이해하실 수 있습니다.

예제코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        a[href^="https://scribblinganything"] {
          color : green;
        }
    </style>    
</head>
<body>
    <div class="container-fluid">
        <a href="https://www.tistory.com/">티스토리</a>    
    </div>   
    <div>
        <a href="https://scribblinganything.tistory.com/">코딩끄적끄적</a>    
    </div>      
</body>
</html>

결과>>

CSS 선택자 (6) : 달러($)

달러($)은 선택자의 속성 값 중에서 특정 문구로 끝나는 속성에 CSS 값을 적용하고 싶을 때 사용합니다.

아래 예제를 통해 쉽게 이해하실 수 있습니다.

예제코드>>

<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
    <style>
        a[href$="ing.tistory.com/"] {
          color : green;
        }
    </style>    
</head>
<body>
    <div class="container-fluid">
        <a href="https://www.tistory.com/">티스토리</a>    
    </div>   
    <div>
        <a href="https://scribblinganything.tistory.com/">코딩끄적끄적</a>    
    </div>      
</body>
</html>

결과>>

저작자표시 비영리 변경금지

'웹관련프로그래밍(web programming)' 카테고리의 다른 글

Visual Studio Code에서 Javascript, HTML, Jquery 결과 확인하기 (실행) (0)	2021.09.25

현재글CSS 선택자 - 별표(*)샵(#)점(.)콜롬(:)괄호(>, [])캐럿(^)달러($) 의미와 예제

파이썬(python), flask, db, coding, 코딩, 주식, IT, 진동, 피로 등 여러가지 공부합니다. 아이와 함께 여행, 맛집 리뷰합니다.

Arduino, flask, HTML, 변경, 그래프, 아두이노, 파이썬, stress, 주식, Python, 함수, 팜테크, VR, 파이선, c언어, 티킨터, 부트스트랩, 플라스크, JavaScript, famtech,

여행하는 코딩끄적끄적