[CSS] 4. CSS 선택자

Mar 10, 2025

Contents

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/css/default.asp

1. CSS

html에 디자인적 요소 더한

선택자와 선언부로 구성


선택자{속성1:값1;(선언1) 속성2:값;(선언2)}

p {color:red; pading: 5px;}

선택자(selector) : 스타일을 지정할 html 요소를 가리킴
선언부(declaration) :

속성 이름 및 값을 포함
콜론(:)) - 항목 구분
세미콜론(;) - 선언 끝내기
중괄호({}) - 선언 블록

2. CSS 선택자 & 속성

1. 선택자 지정방식

* : 전체 태그에 적용

태그명 : 지정한 이름의 태그에만 적용

예) div → div 태그에만 속성 부여

.클래스명 : 지정한 클래스 속성을 갖는 태그에만 적용

예) .box → box 클래스 태그에만 속성 부여

#아이디명 : 지정한 아이디 속성을 갖는 태그에만 적용

예) #box → 아이디가 box인 태그에만 속성 부여 (여러 개 변경은 불가능)

계층 선택자

상태 선택자

2. 속성

background - color : 배경색

red, black …
rbg(255, 208, 232)

border : 테두리

크기 : px / n%
테두리 선 : solid / dotted / …
테두리 색

padding : 테두리 내부 여백(px)

margin : 테두리 외부 여백(px)

border-radius : 둥근 모서리(px)

display : 표시 상태

inline, block …

font-size : 폰트 크기

font-weight : 폰트 굵기


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*class가 red-box인 태그에 속성 적용*/
        .red-box{
            background-color: red;
        }
        /*class가 box인 태그에 속성 적용*/
        .box{
            border: 1px solid black;
            padding: 100px;
            margin: 100px;
            border-radius: 100px;
        }
        /*id가 box인 태그에 속성 적용*/
        #box{
            display: block;
        }
        /*div 태그에 속성 적용*/
        div{
            background-color: rgb(255, 208, 232);
            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>

css 설정 전

css 설정 후

<!DOCTYPE html> <html lang="en"> <head> <style> /*class가 red-box인 태그에 속성 적용*/ .red-box{ background-color: red; } /*class가 box인 태그에 속성 적용*/ .box{ border: 1px solid black; padding: 100px; margin: 100px; border-radius: 100px; } /*id가 box인 태그에 속성 적용*/ #box{ display: block; } /*div 태그에 속성 적용*/ div{ background-color: rgb(255, 208, 232); 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>