목차

1. CSS 개요와 선택자
2. 기본 선택자
3. 자손 선택자
4. 구조 선택자
5. 기타 선택자

CSS 개요와 선택자

• CSS3(Cascading Style Sheets)는 HTML 태그에 디자인/스타일을 적용하기 위한 웹 표준 언어
• 선택자(selector)는 HTML 문서 내 특정 태그나 요소를 지정하여 스타일을 적용할 수 있게 함

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Selector Basic</title>
  <style>
    h1 { color: red; }
    div {
      width: 60px;
      height: 50px;
      background: blue;
    }
  </style>
</head>
<body>
  <h1> CSS3 Selector Basic </h1>
  <div></div>
</body>
</html>

기본 선택자

• id는 고유한 식별자로 하나의 태그에만 적용
• class는 공통된 스타일을 그룹화하여 여러 태그에 적용 가능

종류 및 설명

예시 코드

/* 전체 선택자 */
* {
  color: blue;
}

/* 태그 선택자 */
h3 {
  color: red;
}
p {
  color: green;
}

/* 클래스 선택자 */
.hello {
  color: orange;
}

/* 아이디 선택자 */
#hello {
  color: yellow;
}

<p class="hello">클래스 적용</p>
<p id="hello">아이디 적용</p>

자손 선택자