정리: HTML, CSS 선택자와 관련 개념
1. Top-down 프로그래밍
- 큰 문제를 먼저 정의한 후, 이를 작은 단위로 나누어 처리하는 프로그래밍 방식입니다.
- CSS와 HTML도 구조적으로 설계해야 유지보수가 쉽고 효율적입니다.
2. ID 속성 (# 사용)
ID 선택자는 #(샵 기호)로 특정 요소에 스타일을 지정합니다.
한 문서 내에서 유일해야 하며, 특정 요소를 선택할 때 사용됩니다.
예제:
#age { color: red; font-size: 40px; } #hobby { color: blue; font-size: 50px; }<p id="age">나이</p> <p id="hobby">취미</p>
3. ID와 클래스의 차이
ID(#): 하나의 요소에 고유한 스타일을 지정할 때 사용합니다.
Class(.): 여러 요소에 동일한 스타일을 적용할 때 사용합니다.
Class는 여러 개의 값을 가질 수 있으며 띄어쓰기로 구분합니다.
예제:
#age { color: red; font-size: 40px; } /* ID 선택자 */ .mytarget { color: yellow; font-size: 40px; background-color: black; } /* 클래스 선택자 */ .yourtarget { color: red; font-size: 40px; background-color: blue; }<label class="mytarget yourtarget">코멘트 :</label> <!-- 두 개의 클래스 적용 -->
4. 선택자의 기호 설명
콤마 (,): 여러 요소를 동시에 선택
- 예:
#age, #hobby { background-color: red; color: green; }#age와#hobby에 동일한 스타일을 적용합니다.
- 예:
스페이스 ( ): 특정 요소의 하위 요소 선택
- 예:
#myform #age { background-color: yellow; color: blue; }#myform내부의#age에만 스타일을 적용합니다.
- 예:
특정 요소와 ID 또는 Class 결합
- ID를 가진 라벨:
label#hobby { background-color: green; color: black; } - 클래스를 가진 라벨:
label.mytarget { font-size: 10px; background-color: orange; color: black; }
- ID를 가진 라벨:
5. 색상 코드
HEX와 RGB: 색상은 HEX(16진수) 또는 RGB로 표현됩니다.
HEX 예:
#FF0000(Red),#00FF00(Green),#0000FF(Blue)- FF는 16진수로 255를 의미합니다.
RGB 예:
rgb(255,0,0)(Red),rgb(0,255,0)(Green)투명도 설정 (RGBA):
RGBA는 색상에 투명도를 추가합니다.background-color: rgba(201, 76, 76, 0.3);a: 투명도 값 (0.0 ~ 1.0)
6. 추가 개념
Property (속성)
- CSS에서 속성(property)는 스타일을 정의하는 항목입니다.
- 예:
color,background-color,font-size등 - 자바에서는 변수를 property라고 부르기도 합니다.
Element (요소)
- HTML 태그(tag)를 의미합니다.
- 예:
<div>,<p>,<label>등이 Element입니다.
실제 활용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* ID 선택자 */
#age { color: red; font-size: 40px; }
#hobby { color: blue; font-size: 50px; }
/* 클래스 선택자 */
.mytarget { color: yellow; font-size: 40px; background-color: black; }
.yourtarget { color: red; font-size: 40px; background-color: blue; }
/* 콤마와 스페이스 활용 */
#age, #hobby { background-color: red; color: green; }
#myform #age { background-color: yellow; color: blue; }
/* 특정 요소 선택 */
label#hobby { background-color: green; color: black; }
label.mytarget { font-size: 10px; background-color: orange; color: black; }
</style>
</head>
<body>
<form id="myform">
<p id="age">나이</p>
<p id="hobby">취미</p>
<label class="mytarget yourtarget">코멘트 :</label>
</form>
</body>
</html>'웹 개발 > 웹 개발 기초' 카테고리의 다른 글
| HTML과 CSS의 구조화 및 스타일링 기본 가이드 (0) | 2025.01.27 |
|---|---|
| JavaScript 기초 또는 jQuery 기본 사용법 (0) | 2025.01.27 |
| 선택자란? (0) | 2025.01.27 |
| 시퀀스란? (0) | 2025.01.27 |
| HTML - 특수문자 (0) | 2025.01.27 |