WEB/CSS

[CSS] CSS 선택자, Selector

developer of the night sky 2023. 9. 25. 21:02

CSS 문법

선택자 {
	속성명 : 값;
}

 

 

🔻CSS 선택자, Selector🔻

  • HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 방법을 지정한다.

 

1. 전체 선택자

  • '*' 기호로 모든 태그를 선택한다.
* {}

2. 태그 선택자

  • HTML 요소의 이름을 사용하여 해당 요소를 선택한다. 예를 들어, p는 모든 <p> 요소를 선택한다.
  • 장점
    • 사용이 쉽다.
    • 같은 태그를 일괄 적용한다.
    • 생산성 및 유지보수성이 향상된다.
  • 단점 : 같은 태그를 일괄 적용하기에 내가 원하는 영역을 정하는 것이 복잡하다.
tag {}

3. ID 선택자

  • 태그에 명시된 ID 속성을 검색해서 태그를 선택한다.
  • id 생성 시, 영어+숫자 조합, 숫자로 시작 불가
  • 원하는 태그를 직접 선택할 수 있다.
  • id는 한 페이지 내에서 유일한 값이어야 한다.
  • 태그명#ID
#id{}

4. class 선택자

  • 태그에 명시된 class 속성을 검색해서 태그를 선택한다.
  • 태그명.class
  • 원하는 태그를 직접 선택할 수 있다.
  • 태그명.class
.class{}

5. 그룹 선택자

  • 2개 이상의 선택자를 한번에 선언하는 방법이다.
  • 태그이름을 생략할 수 있다.
선택자, 선택자, 선택자 {
	구현부;
}

6. 자식 선택자

  • 특정 요소의 직계 자식으로 있는 요소를 선택한다. 예를 들어, li > span는 <ul> 안에 있는 직계 자식 <span> 요소를 선택한다.
  • 별도의 식별자 없이 스타일을 적용할 수 있다.
  • 정밀도가 높은 표현이다.
  • HTML 구조 변경에 영향을 받는다.
  • 부모선택자 > 자식 선택자
    <style>
        li>span {
            color: red;
        }
    </style>

7. 자손 선택자

  • 별도의 식별자 없이 스타일을 적용할 수 있다.
  • 중간 선택자가 생략되기 때문에 정밀도가 높으면서 범위가 넓은 표현이다.
  • HTML 구조 변경에 영향을 받는다.
  • 부모선택자 자손선택자
    <style>
        /* 자식 선택자
        ul>li>span {
            color: red;
        }
        */

	/* 자손 선택자 */
        ul span {
            color : blue;
        }


    </style>

8. 인접 형제 선택자

  • 인접한 형제에만 적용된다.
  • 정밀도가 높고, 적용되는 범위가 좁다.
  • 선택자 + 선택자
선택자 + 선택자 {
	구현부;
}

9. 형제 선택자

  • 동일한 부모 요소를 가진 모든 형제 요소를 선택하는 CSS 선택자이다.
  • 정밀도가 낮고, 적용되는 범위가 넓다.
  • 선택자 ~ 선택자
선택자 ~ 선택자 {
	구현부;
}

10. 의사 클래스, Pseudo class

  • 실제 태그에는 class 속성이 없지만, CSS에서 존재하는 클래스처럼 사용되는 클래스
  • 원래는 a태그에만 적용되었지만 현재는 모든 태그에 적용이 된다.
링크 기본 서식
- 밑줄
- 마우스 포인터
- 색상
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* a 태그의 상태에 따라 각각 적용되는 클래스 */

        /* 브라우저 방문 이력이 없는 링크 */
        a:link {color : red;} 

        /* 브라우저가 방문한 이력이 있는 링크 */
        a:visited {color: orange;}

        /* 활성화 상태 */
        a:active {color: greenyellow;}

        /* 마우스 커서를 링크 위에 올린 상태 */
        a:hover {color : yellow;}

    </style>
</head>
<body>
    <h1>링크</h1>

    <a href="https://naver.com">네이버</a>
</body>
</html>

위 기능 중에서 hover 제외하고는 현재 거의 사용하지 않는다.

 

링크의 일반적 서식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 링크의 일반적인 서식 */
        a {
            color : black;
            text-decoration: none;  /*밑줄 제거*/
        }
        a:hover {color:blue; text-decoration: underline;}

    </style>
</head>
<body>
    <h1>링크</h1>

    <a href="https://naver.com">네이버</a>
</body>
</html>

스타일 모듈

  • 미리 클래스에 대한 스타일을 모듈로 작성해놓고 코드에서 조립하듯이 적용을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .one {color: blue;}
        .two {text-decoration: underline;}
        .three {font-style: italic;}

        .red {color : red;}
        .blue {color : blue;}
        .yellow {color : yellow;}

    </style>


</head>
<body>

    <p class="one">문단입니다.</p>
    <p class="two">문단입니다.</p>
    <p class="three red">문단입니다.</p>

    <!-- 밑줄과 파란색 서식 적용 -->
    <p class="one two">문단입니다.</p>

</body>
</html>

 

저작자표시 (새창열림)