[HTML&CSS] 2. CSS 선택자

편준민

Mar 07, 2025

❗

선택자의 종류

클래스 선택자.클래스명 {}: 여러 곳에 사용할 수 있다.

클래스 선택자가 있다면 우선으로 클래스를 선택 그 후 태그 선택자가 선택된다.

ID 선택자 #ID명 {}: 한 곳에만 사용 가능하다. (unique)

태그 선택자 태그명 {} : 해당 태그 전체의 적용된다.


<!DOCTYPE html>
<html lang="en">

<head> 
   
    <style>
        
        .red-box {
            background-color: red;
        }
        /* 클래스 선택자 */
        .box {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            border-radius: 10px
        }
        /* ID 선택자(한 곳에만 사용가능 (DB=unique)) */
        #box {
            display: block
        }
        /* 태그 선택자 */
        div {
            background-color: #69f3f3e1;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간박스</div>
</body>
</html>

See more posts

[HTML&CSS] 2. CSS 선택자

More articles

[코딩테스트] 3. 성분으로 구분한 아이스크림 총 주문량

[HTML&CSS] 3. CSS Display

[HTML&CSS] 1. HTML 태그들

[환경세팅] 8. Cursor 기본세팅