티스토리 뷰

CSS

📢 CSS Selector

baegofda_ 2020. 11. 19. 14:57

Selector

    - type(tag), class, id 등을 선택하여 css, js 작업등을 할 수 있습니다.

Type(tag) Selector

    - 원하는 tag를 선택하는 방법

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <h1>Selector</h1>
        <p>Type, Class, ID Selector</p>
    </body>
</html>
h1 {
    color:red;
}

h1 tag에만 color : red; 를 적용

Class Selector

    - class는 복수의 명을 지정할 수 있습니다.

    - class 선언시에는 띄어쓰기로 구분합니다.

    - Selector 사용시 .name 형식으로 선택합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <h1 class="Dale red">Selector</h1>
        <p class="red">Type, Class, ID Selector</p>
    </body>
</html>
h1 {
    color: brown;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

h1 tag에 color : brown; 을 적용했으나 이후에 선언된 color : red; 에 의해 red가 적용되었다.

ID Selector

    - 한가지의 ID만을 쓸 수 있으며 다른 요소와 중복이 불가능합니다.

    - 선택시 #name의 형식으로 선택됩니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <h1 id="DaleLee" class="Dale red">Selector</h1>
        <p class="red">Type, Class, ID Selector</p>
    </body>
</html>
#DaleLee {
    background-color: cadetblue;
}

h1 {
    color: brown;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

🥰 Sass(SCSS)  (0) 2021.08.18
🔦 Visibility  (1) 2020.11.15
📐 Transform  (1) 2020.11.15
🍟 Opacity  (0) 2020.11.11
🍔 Box Shadow  (2) 2020.11.11
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함