1. 선택자(Selector)란?
선택자는 HTML의 어떤 요소에 스타일을 적용할지를 선택하는 이름표입니다.
쉽게 말해, "누구에게 스타일을 줄까?" 를 지정하는 부분입니다.
예시:
p {
color: blue;
}
위 코드에서 p는 선택자입니다.
즉, 모든 <p> 문단 태그에 글자색을 파란색으로 설정하겠다는 의미입니다.
2. 속성(Property)이란?
속성은 어떤 스타일을 적용할지 결정하는 항목입니다.
즉, "어떤 스타일을 바꿀까?" 를 의미합니다.
예시:
color: blue;
font-size: 18px;
- color는 "글자 색"
- font-size는 "글자 크기"를 나타내는 속성입니다.
속성은 항상 속성명: 값; 형식으로 사용합니다.
종합 예시:
h1 {
color: red;
font-size: 32px;
}
- h1 → 선택자 (누구에게)
- color, font-size → 속성 (무엇을)
- red, 32px → 값 (어떻게)
이 코드는 "모든 h1 제목 글자색을 빨간색, 크기를 32픽셀로 설정하겠다"는 의미입니다.
반응형
'웹제작 강의' 카테고리의 다른 글
[웹개발강의] JS(자바스크립트) 기초 학습자료(변수 선언 등) (0) | 2025.04.15 |
---|---|
[웹개발강의] 버튼 클릭 시 알림 띄우기 (자바스크립트 기초) (0) | 2025.04.14 |
[웹개발강의] CSS 초보자 필수 기법 30선 – 정말 쉬운 설명 (0) | 2025.04.10 |
[웹개발강의] HTML에서 CSS를 적용하는 3가지 방법 (0) | 2025.04.10 |
[웹개발강의] HTML 대표 태그 30선 – 초보자용 설명과 예시 (0) | 2025.04.09 |