05강-선택자, 색상

CSS 개념

• CSS는 HTML 문서에 디자인을 적용하는 표준 스타일 언어
• 구조와 표현을 분리하는 역할
• 유지보수, 재사용, 접근성, 협업 효율 향상에 사용
• 현대 웹에서는 색상과 글꼴뿐 아니라 레이아웃, 애니메이션, 반응형 표현까지 담당

CSS 사용 목적

• 디자인 일관성 유지
• 구조와 표현 분리
• 유지보수 비용 절감
• 다양한 화면 크기와 디바이스 대응
• 재사용 가능한 스타일 관리

CSS 기본 구문

CSS 규칙 구성

• 선택자
• 속성
• 값

기본 형식

• 선택자 { 속성: 값; }

의미

• 선택자: 스타일 적용 대상 지정
• 속성: 무엇을 바꿀지 지정
• 값: 어떻게 바꿀지 지정

CSS 작성 기본 원칙

• 줄바꿈과 들여쓰기 사용
• 필요한 경우 주석 사용
• 의미가 드러나는 이름 사용
• 가능하면 클래스 중심 설계
• 색상은 일관된 방식으로 관리

CSS 적용 방식

• 외부 스타일시트
• 내부 스타일
• 인라인 스타일

외부 스타일시트 방식

• 별도 CSS 파일 작성
• HTML 문서에서 link 요소로 불러와 적용

특징

• 재사용성과 유지보수성 우수
• 여러 페이지에 공통 스타일 적용 가능

import 방식 사용

• CSS 내부에서 다른 CSS 파일 불러오기 가능
• @import 구문 사용

특징

• 가장 위쪽에 작성 필요
• 구조적으로는 가능
• 성능 측면에서는 권장도 낮음

내부 스타일 방식

• HTML 문서의 head 안에서 style 요소 사용
• 한 문서 안에서만 스타일 정의

특징

• 학습용이나 임시 테스트에 적합
• 특정 페이지 전용 스타일 작성에 사용 가능

인라인 스타일 방식

• HTML 요소의 style 속성에 직접 작성

특징

• 빠른 테스트에는 사용 가능
• 재사용성 낮음
• 유지보수 어려움
• 실무에서는 지양 대상

스타일 우선순위 개념

• 동일한 요소에 여러 스타일이 겹치면 우선순위 계산 필요
• 우선순위 판단 기준은 명시도
• 선언 위치보다 선택자 구조가 더 중요

기본 원칙

• 점수 높은 선택자 우선 적용
• 점수 같으면 나중 선언 우선 적용

명시도 점수 기준

점수 기준

• 인라인 스타일: 1000점
• 아이디 선택자: 100점
• 클래스 선택자, 가상 클래스, 속성 선택자: 10점
• 요소 선택자, 가상 요소: 1점
• 전체 선택자: 0점

important 사용

• !important 사용 시 강제 우선 적용
• 명시도 계산보다 우선

주의

• 최후의 수단으로만 사용
• 남용 시 유지보수 난이도 급상승

선택자 분류

• 기본 선택자
• 가상 선택자
• 결합자

기본 선택자 종류

• 전체 선택자
• 타입 선택자
• 클래스 선택자
• 아이디 선택자
• 속성 선택자

전체 선택자 역할

기호

• *

의미

• 문서의 모든 요소 선택

활용

• 기본 여백 초기화
• 기본 박스 모델 통일
• 공통 리셋 스타일 적용

실무 포인트

• box-sizing: border-box; 초기 설정에 자주 사용

타입 선택자 역할

형식

• p
• h1
• div

의미

• 특정 HTML 요소 이름 기준 선택

특징

• 적용 범위가 넓음
• 문서 전체에 영향을 줄 수 있음
• 제한적 사용 권장

클래스 선택자 역할

기호

• .

의미

• 특정 클래스명을 가진 요소 선택

특징

• CSS 설계 중심 선택자
• 재사용성 높음

HTML 적용 방식

• class 속성 사용

클래스 이름 작성 기준

권장 방식

• 소문자 사용
• 단어 사이는 하이픈 사용
• 의미가 드러나는 이름 사용

지양 방식

• class1
• style1
• 역할이 불분명한 이름

다중 클래스 적용

• 하나의 요소에 여러 클래스 동시 부여 가능
• 클래스명은 공백으로 구분

활용

• 공통 스타일
• 세부 스타일
• 상태 스타일 분리

클래스 조합 설계

활용 방식

• 공통 버튼 스타일 정의
• 확인 버튼 전용 스타일 추가
• 삭제 버튼 전용 스타일 추가

효과

• 중복 감소
• 역할별 조합 가능
• 유지보수 편리

클래스 네이밍 패턴

실무에서 많이 쓰는 방식

• 블록
• 요소
• 변형

대표 패턴

• card
• card__image
• button--primary

의미

• __: 구성 요소
• --: 상태 또는 변형

아이디 선택자 역할

기호

• #

의미

• 페이지 안에서 유일한 요소 선택

HTML 적용 방식

• id 속성 사용

특징

• 명시도 높음
• 한 페이지에서 중복 사용 지양
• 스타일용보다 식별용 활용 비중 큼

아이디 속성 활용 위치

• 페이지 내부 이동 앵커
• label과 입력 요소 연결
• 자바스크립트 요소 제어

실무 포인트

• 스타일은 클래스 중심 설계 권장
• 아이디는 고유 식별 목적 사용 권장

속성 선택자 역할

의미

• HTML 속성이나 속성값 기준 선택

대표 형태

• [속성]
• [속성="값"]
• [속성*="값"]
• [속성^="값"]
• [속성$="값"]

예

• input[required]

속성 선택자 활용 예시

활용 대상

• 특정 타입의 입력창 선택
• required 요소만 선택
• alt 비어 있는 이미지 선택
• 특정 링크 형식 선택
• 특정 확장자 파일 링크 선택

특징

• 선택 정확도 높음
• 클래스보다 성능과 유지보수 측면에서 불리할 수 있음

가상 선택자 개념

• HTML 요소 추가 없이 상태나 위치에 따라 선택 가능
• 구조와 상태를 기준으로 스타일 적용 가능

구분

• 가상 클래스
• 가상 요소

가상 클래스 역할

기호

• :

의미

• 요소의 상태나 순서 기준 선택

대표 예

• :hover
• :focus
• :active
• :first-child
• :last-child
• :nth-child()
• :not()
• :checked
• :disabled

가상 요소 역할

기호

• ::

의미

• 요소의 특정 부분 선택

대표 예

• ::before
• ::after
• ::placeholder

hover 상태 선택

의미

• 마우스를 요소 위에 올린 상태 선택

활용

• 버튼 색상 변경
• 링크 강조
• 카드 강조 효과

active 상태 선택

의미

• 사용자가 클릭하는 순간의 상태 선택

활용

• 버튼 눌림 효과
• 클릭 피드백 표현

focus 상태 선택

의미

• 입력창이나 버튼이 선택된 상태

활용

• 입력창 테두리 강조
• 현재 입력 위치 표시

focus-visible 사용

의미

• 키보드 탐색 시 필요한 포커스 표시만 노출

효과

• 마우스 클릭 시 불필요한 포커스 테두리 최소화
• 키보드 사용자 접근성 유지

실무 포인트

• 버튼과 링크에 자주 활용

first-child와 last-child 사용

의미

• 첫 번째 자식 선택
• 마지막 자식 선택

활용

• 첫 항목 강조
• 마지막 항목 테두리 제거
• 메뉴 끝 처리

nth-child 활용

의미

• 특정 순서의 자식 선택
• 짝수, 홀수, 특정 번호 선택 가능

활용

• 줄무늬 패턴
• 리스트 교차 배경색
• 표 행 스타일

not 활용

의미

• 특정 조건에 해당하지 않는 요소 선택

활용

• 마지막 항목 제외 스타일
• 특정 타입 제외 처리
• 반복 스타일 축약

checked 상태 활용

의미

• 체크박스나 라디오 버튼이 선택된 상태 선택

활용

• 체크 상태에 따라 텍스트 스타일 변경
• 커스텀 체크 UI 구성

placeholder 스타일 적용

대상

• 입력 힌트 텍스트

조정 가능 항목 예

• 글자 색
• 글자 크기
• 글꼴
• 기울임

주의

• 모든 속성 적용 가능하지 않음

before와 after 활용

의미

• 요소 내용 앞이나 뒤에 장식용 콘텐츠 추가

필수 사항

• content 속성 함께 사용

활용

• 필수 입력 표시
• 아이콘 표시
• 보조 문구 추가

is와 where 활용

의미

• 여러 선택자를 묶어 반복 코드를 줄이는 방식

차이

• :is()는 내부 선택자 명시도 반영
• :where()는 명시도 0점 처리

활용

• 공통 스타일 묶음
• 리셋 계열 스타일 작성
• 긴 선택자 축약

has 활용

의미

• 특정 자식을 가진 부모 선택

활용

• 이미지 포함 카드만 별도 스타일 적용
• 체크된 입력을 가진 부모 강조

특징

• 부모 선택 가능
• 구조 기반 스타일링에 유용

결합자 개념

• 선택자와 선택자를 연결해 관계 기반 선택 수행
• 포함 관계, 자식 관계, 형제 관계 표현 가능

대표 종류

• 자손 결합자
• 자식 결합자
• 인접 형제 결합자
• 일반 형제 결합자
• 그룹 선택자

자손 결합자 사용

형식

• A B

의미

• A 안에 포함된 모든 B 선택
• 자식, 손자, 그 이하 모두 포함

자식 결합자 사용

형식

• A > B

의미

• A의 바로 아래 자식 B만 선택

활용

• 메뉴 구조 제어
• 중첩 목록 제어
• 직계 자식 한정 스타일 적용

인접 형제 결합자 사용

형식

• A + B

의미

• A 바로 다음에 오는 형제 B 하나 선택

활용

• 체크박스 다음 텍스트 제어
• 제목 바로 아래 문단 제어

일반 형제 결합자 사용

형식

• A ~ B

의미

• A 뒤에 오는 모든 형제 B 선택

활용

• 특정 요소 이후 항목 전체 스타일 변경
• 형제 범위 선택

그룹 선택자 사용

형식

• A, B, C

의미

• 여러 선택자에 동일 스타일 동시 적용

효과

• 중복 코드 감소
• 공통 규칙 정리

CSS 색상 표현 방식

대표 방식

• 색상 이름
• 16진수
• RGB
• HSL

색상 이름 사용

예

• red
• green
• blue

특징

• 이해 쉬움
• 학습과 테스트에 적합

16진수 색상 사용

형식

• #RRGGBB

특징

• 디자인 도구와 연동 쉬움
• 각 색상 채널을 16진수로 표현

확장 형식

• #RRGGBBAA

의미

• 마지막 두 자리는 투명도 표현

RGB 색상 사용

형식

• rgb(값, 값, 값)

의미

• 빨강, 초록, 파랑 값을 0에서 255 사이 숫자로 지정

확장 형식

• rgba(값, 값, 값, 투명도)

의미

• 투명도까지 함께 지정

최근 표기

• 공백 구분 형식 사용 가능
• 투명도는 슬래시 뒤에 표기 가능

HSL 색상 사용

형식

• hsl(색상, 채도, 밝기)

의미

• 색상 각도
• 채도
• 밝기

확장 형식

• hsla(...)
• 최근에는 슬래시 기반 투명도 표기도 사용

특징

• 색상 보정 직관적
• 테마 조정에 유리
• 디자인 시스템 구성에 적합

currentColor 키워드

의미

• 현재 요소의 글자 색상 값을 그대로 사용

활용

• 아이콘 색상 동기화
• 테두리 색상 동기화
• 텍스트 색과 동일한 색상 유지

transparent 키워드

의미

• 완전 투명한 색상

활용

• 보이지 않는 테두리 유지
• 공간은 유지하고 시각적 노출만 제거

색상 변수 사용

실무 방식

• CSS 변수로 색상값 정의
• 필요한 곳에서 변수 호출

장점

• 색상 일괄 변경 가능
• 테마 관리 편리
• 유지보수 용이

color 속성 역할

적용 대상

• 글자 색상
• 텍스트 장식 색상
• currentColor 기준 색상

background-color 속성 역할

적용 대상

• 요소 배경색 지정

특징

• 요소의 배경 영역 색상 제어

border-color 속성 역할

적용 대상

• 테두리 색상 지정

실무 포인트

• 굵기와 선 종류와 함께 사용 필요
• 보통 단축 속성으로 함께 작성

opacity 속성 역할

의미

• 요소 전체의 불투명도 제어

범위

• 0: 완전 투명
• 1: 완전 불투명

주의

• 배경만이 아니라 텍스트와 자식 요소까지 함께 투명해짐

배경만 반투명 처리

주의 사항

• opacity 사용 시 요소 전체가 함께 흐려짐
• 배경만 반투명 처리하려면 rgba() 또는 hsla() 사용 필요

정리

• CSS는 HTML 구조 위에 디자인과 표현을 적용하는 스타일 언어
• 외부 스타일시트 방식이 실무 기본
• 스타일 충돌 시 명시도 계산으로 우선순위 결정
• 기본 선택자는 전체, 타입, 클래스, 아이디, 속성 선택자로 구성
• 클래스 선택자가 실무 중심 선택자
• 가상 클래스와 가상 요소는 상태와 부분 선택에 사용
• 결합자는 요소 관계 기반 선택에 사용
• 색상은 16진수, RGB, HSL 중심 사용
• 색상 변수와 currentColor 활용 시 유지보수 효율 향상