1. CSS 기본 문법

박은서

Jan 07, 2026

Contents

1. 셀렉터(Selector)1️⃣ 셀렉터란?2️⃣ 기본 셀렉터 (가장 중요 ⭐)

1. 셀렉터(Selector)

1️⃣ 셀렉터란?

1) 개념

어떤 HTML 요소에 스타일을 적용할지를 지정하는 문법

2) 예시


선택자 {
  스타일: 값;
}


p {
color: red;
}

➡️ p 태그를 선택해서 글자를 빨간색으로 바꾼다

2️⃣ 기본 셀렉터 (가장 중요 ⭐)

1) 태그 선택자 (Type Selector)


p {
	font-size:16px;
}

해당 태그 전부 적용

2) 클래스 선택자 (Class Selector) ⭐주로 사용⭐


.box {
		border: 1px solid black;
}


<div class="box"></div>

. 으로 시작

여러 요소에 재사용 가능

3) 아이디 선택자 (ID Selector)


#header {
	background: gray;
}


<div id="header"></div>

# 으로 시작

한 페이지에 하나만 사용

실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      .a {
        color: red;
        font-size: 20px;
      }
      h1 {
        color: blue;
      }
      #line {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>CSS 기본 문법</h1>
    <hr />
    <div class="a">HelloWorld</div>
    <div id="line">HelloWorld</div>
  </body>
</html>

Contents

1. 셀렉터(Selector)1️⃣ 셀렉터란?2️⃣ 기본 셀렉터 (가장 중요 ⭐)