기본 콘텐츠로 건너뛰기

방송대 방통대 HTML5웹프로그래밍 5강 - CSS 개요, 선택자, 색상 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 5강 - CSS 개요, 선택자, 색상

HTML5웹프로그래밍 5강 - CSS 개요, 선택자, 색상

CSS의 역할과 기본 문법, 문서에 스타일을 적용하는 세 가지 방법과 캐스케이드·명시도 규칙을 이해한다. 전체·요소·클래스·아이디·속성·가상 선택자와 결합자를 구분하고, HEX·RGB·HSL 색상 및 투명도와 CSS 변수를 실무적으로 사용하는 방법을 학습한다.

1. CSS의 개념과 필요성

Cascading Style Sheets

CSS(Cascading Style Sheets)는 HTML 웹 문서에 색상, 글꼴, 여백, 레이아웃 등 디자인을 적용하는 표준 스타일 언어이다. HTML이 문서의 구조와 의미를 담당하고 CSS가 표현을 담당하도록 분리하면 유지보수성과 재사용성, 접근성, 협업 효율을 높일 수 있다. 이를 관심사의 분리라고 한다.

Cascading은 여러 스타일 규칙이 충돌할 때 우선순위를 해결하는 과정을, Style은 표현을, Sheets는 규칙의 묶음을 뜻한다. 모던 CSS는 외양만 꾸미는 도구를 넘어 Flexbox와 Grid 레이아웃, 애니메이션, 반응형 웹까지 담당한다.

구조와 표현을 분리하는 가치

<p class="notice">공지: 수업 일정 확인</p>

.notice {
  font-weight: 700;
  color: red;
}

HTML 구조는 그대로 유지하면서 CSS 규칙만 바꾸면 같은 내용을 다양한 디자인과 디바이스 환경에 맞출 수 있다. 공통 스타일을 한곳에서 관리하면 여러 문서의 디자인 일관성을 확보하고 수정 비용도 줄일 수 있다.

HTML은 구조, CSS는 표현을 담당한다. 두 역할을 분리하는 것이 CSS를 사용하는 가장 중요한 이유이다.

2. CSS 기본 문법과 작성 관례

CSS 규칙의 기본 형식은 선택자 { 속성: 값; }이다. 선택자는 스타일을 적용할 대상을 고르고, 속성은 바꿀 항목을, 값은 구체적으로 적용할 내용을 나타낸다. 하나의 선언 블록 안에는 여러 개의 속성-값 쌍을 작성할 수 있다.

p {
  font-size: 16px;
  color: red;
}

.error-message {
  font-size: 1rem;
  color: #ff0000;
}
구성요소역할예
선택자스타일 적용 대상 지정.error-message
속성변경하려는 스타일 항목color
값속성에 적용할 구체적인 설정#ff0000
주석코드에 설명 추가/* 설명 */

줄바꿈과 들여쓰기를 일관되게 사용하고, 마지막 선언에도 세미콜론을 붙이는 습관이 안전하다. 클래스명은 style1처럼 외양만 드러내기보다 역할과 의미를 나타내야 한다. 선언 순서를 레이아웃 관련 속성, 글꼴, 색상 순으로 정리하면 읽기 쉽다.

3. CSS 적용 방법

외부 스타일시트

외부 CSS 파일을 HTML의 link 요소로 연결하는 방식은 여러 문서에서 같은 스타일을 재사용하고 한곳에서 관리할 수 있어 실무의 기본이자 표준이다.

<head>
  <link rel="stylesheet" href="style.css">
</head>

@import url("style.css");로 CSS 파일 안에서 다른 파일을 불러올 수도 있다. 이 규칙은 CSS의 첫 부분에 단독으로 사용해야 하며 유지보수에는 편리할 수 있지만 성능상 권장되지 않는다.

내부 스타일과 인라인 스타일

내부 스타일은 HTML 문서의 head 안에 style 요소를 두어 페이지 단위로 스타일을 지정하는 방식이다. 강의나 테스트, 한정된 페이지의 임시 스타일에 사용할 수 있다.

<style>
body {
  font-size: 1rem;
  line-height: 1.5;
}
</style>

인라인 스타일은 요소의 style 속성에 직접 작성한다. 재사용이 어렵고 유지보수 비용이 매우 크므로 자바스크립트의 동적 제어나 간단한 테스트 외에는 사용을 자제한다.

<div style="border: 1px solid red;">내용</div>
방식위치주요 용도와 평가
외부 파일별도의 .css 파일재사용과 유지보수에 유리한 실무 표준
내부 스타일주로 head 안의 style 요소페이지 단위의 임시·한정 스타일
인라인 스타일요소의 style 속성재사용 불가, 동적 제어나 테스트 외에는 자제

4. 캐스케이드와 명시도

같은 요소에 서로 충돌하는 스타일 규칙이 적용되면 브라우저는 캐스케이드와 명시도(specificity)를 이용해 최종 스타일을 정한다. 명시도는 파일이 내부인지 외부인지가 아니라 선택자의 모양을 기준으로 계산한다. 명시도가 같으면 나중에 선언된 규칙이 이긴다.

우선순위종류점수예
최고!important강제 우선color: red !important;
1인라인 스타일1,000style="color: yellow"
2아이디 선택자100#header
3클래스·가상 클래스·속성 선택자10.btn, :hover, [type="text"]
4요소·가상 요소 선택자1p, ::before
5전체 선택자0*

예를 들어 .container p는 클래스 10점과 요소 1점을 합쳐 11점이고, #box p는 아이디 100점과 요소 1점을 합쳐 101점이다. 따라서 후자가 우선한다. 같은 10점인 .btn과 .primary가 충돌하면 뒤에 선언된 규칙이 적용된다.

!important는 일반 우선순위를 강제로 뒤집는 최후의 수단이다. 잦은 사용은 선택자 설계가 복잡해졌다는 신호일 수 있으므로 기본적으로 사용하지 않는다.

내부 스타일이 외부 파일보다 무조건 강한 것은 아니다. 선택자의 명시도를 먼저 비교하고, 명시도까지 같을 때 선언 순서를 확인해야 한다.

5. 기본 선택자

전체 선택자와 요소 선택자

전체 선택자 *는 모든 요소를 선택한다. 초기화나 리셋에 유용하지만 남용하면 범위가 너무 넓고 렌더링에 영향을 줄 수 있다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

요소 선택자는 태그명을 직접 사용한다. p { color: red; }처럼 간단하지만 적용 범위가 넓으므로 기본 스타일이나 리셋에 제한적으로 사용한다.

클래스 선택자

클래스 선택자는 .클래스명 형식이며 CSS 스타일링의 중심이다. 클래스명은 .section-title, .error, .success처럼 역할과 의도가 드러나게 정한다. 한 요소에는 공백으로 구분하여 여러 클래스를 함께 지정할 수 있다.

<button class="btn btn--primary">확인</button>
<button class="btn btn--danger">삭제</button>

다중 클래스는 공통 스타일과 세부 스타일을 조합하는 모듈화 방식이다. BEM에서는 독립적인 덩어리를 Block(.card), 내부 부품을 Element(.card__img), 변형을 Modifier(.btn--primary)로 표현하며 일반 단어 연결에는 하이픈을 사용한다.

아이디 선택자

아이디 선택자는 #아이디명 형식이며 페이지에서 하나뿐인 고유 요소를 선택한다. 명시도가 100점으로 높아 스타일을 덮어쓰기 어려우므로 CSS에서는 클래스 중심 설계가 유지보수에 유리하다.

아이디는 페이지 내부 앵커 이동, label과 폼 요소의 접근성 연결, 자바스크립트의 특정 요소 제어에 주로 사용한다. 같은 아이디는 한 페이지에서 한 번만 등장해야 한다.

스타일은 의미 있는 클래스 중심으로 설계한다. 아이디는 요소의 고유 식별이 필요한 경우에 사용하고, CSS 스타일링 의존성은 가급적 낮춘다.

6. 속성 선택자

속성 선택자는 HTML의 속성 또는 속성값을 기준으로 요소를 고른다. 폼 요소를 공통 스타일링하거나 링크 확장자와 이미지 파일명의 패턴을 구분할 때 유용하다.

문법의미예
[attr]해당 속성이 존재함input[required]
[attr="값"]속성값이 정확히 일치input[type="text"]
[attr*="값"]속성값에 문자열 포함img[src*="thumb"]
[attr^="값"]속성값이 문자열로 시작a[href^="https://"]
[attr$="값"]속성값이 문자열로 끝남a[href$=".pdf"]
input[type="text"] {
  border: 1px solid gray;
  padding: 10px;
}

a[href$=".pdf" i]::after {
  content: " (PDF 문서)";
}

속성값 비교 뒤의 i 플래그는 영문 대소문자를 구분하지 않게 한다. 속성 선택자는 클래스와 같은 10점이며, input[type="text"]는 요소 1점이 더해져 11점이다. 성능과 유지보수 면에서는 단순 클래스가 더 유리할 수 있다.

7. 가상 클래스와 가상 요소

가상 선택자는 HTML 요소를 추가하지 않고 상태나 구조적 위치, 요소의 특정 부분을 선택한다. 가상 클래스는 콜론 한 개(:)로 요소의 상태를, 가상 요소는 콜론 두 개(::)로 요소의 특정 부분을 나타낸다.

구분선택자역할
사용자 동작:hover, :focus, :active마우스 올림, 포커스, 클릭 순간
구조:first-child, :last-child, :nth-child(n)형제 요소 중 위치에 따라 선택
타입 기준 구조:nth-of-type(n)같은 요소 타입만 거른 뒤 순서로 선택
부정:not(X)X에 해당하지 않는 요소 선택
폼 상태:checked, :disabled선택·비활성 상태 선택
가상 요소::before, ::after, ::placeholder앞·뒤 장식 또는 힌트 텍스트 스타일
.btn:hover { background-color: green; }
.btn:active { transform: scale(0.6); }
.input-box:focus { border-color: red; }
li:nth-child(even) { color: blue; }
.menu-item:not(:last-child) { border-right: 2px solid red; }

::before와 ::after는 content 속성과 함께 아이콘이나 장식을 추가하는 데 사용한다. 의미 있는 핵심 텍스트는 CSS 생성 콘텐츠가 아니라 HTML에 작성해야 한다.

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
  color: #ccc;
}

.required::after {
  content: " *";
  color: red;
}

8. 최신 가상 클래스와 접근성

:is(), :where(), :has()

:is()는 여러 선택자를 그룹화해 반복 코드를 줄인다. 명시도는 괄호 안 선택자 가운데 가장 높은 점수를 따른다. :where()도 그룹화하지만 자체 명시도가 항상 0이므로 CSS 리셋이나 라이브러리처럼 쉽게 덮어써야 하는 규칙에 유용하다.

:is(section, article, aside, nav) h2 { color: blue; }
:where(section, article, aside, nav) h2 { color: blue; }

:has()는 특정 자식이나 후손을 가진 부모를 선택한다. .card:has(img)는 이미지를 포함한 카드만 고르고, .input-group:has(input:checked)는 체크된 입력 요소를 가진 부모를 선택한다. 명시도는 괄호 안에서 가장 높은 선택자의 영향을 받는다.

:focus와 :focus-visible

:focus는 마우스 클릭과 키보드 이동 모두에서 포커스 스타일을 표시한다. :focus-visible은 주로 키보드 Tab 이동처럼 포커스 표시가 필요한 상황에서 윤곽선을 보여 주어, 마우스 디자인을 해치지 않으면서 키보드 접근성을 지킬 수 있다.

접근성을 위해 포커스 표시를 단순히 제거해서는 안 된다. 버튼과 링크에는 :focus-visible을 활용해 키보드 사용자가 현재 위치를 알 수 있게 한다.

9. 결합자

결합자는 두 선택자를 연결하여 포함관계나 형제관계 같은 DOM 위치관계를 표현한다. 비슷해 보이는 공백, >, +, ~의 범위를 정확히 구분해야 한다.

기호이름선택 범위예
공백자손 결합자안에 있는 모든 자손.container span
>자식 결합자바로 아래 직계 자식ul > li
+인접 형제 결합자바로 뒤에 오는 형제 하나h1 + p
~일반 형제 결합자뒤에 오는 같은 부모의 형제들h2 ~ p
,그룹 결합자나열한 여러 선택자 모두h2, h3, p

자손 결합자는 자식·손자 등 모든 깊이를 선택하지만 자식 결합자는 바로 한 단계 아래만 선택한다. 내비게이션에서 ul > li를 사용하면 메인 메뉴와 중첩된 서브 메뉴의 스타일이 섞이는 것을 막을 수 있다.

너무 넓은 자손 선택자와 지나치게 긴 결합자 체인은 DOM 구조 의존성을 높이고 유지보수를 어렵게 한다. 범위를 최소화한 짧고 의도적인 선택자를 사용한다.

10. CSS 색상 표현

색상명과 16진수

색상명은 red, green, blue처럼 미리 정의된 단어를 사용한다. 표현 범위가 제한적이므로 테스트와 학습에는 편리하지만 실무 디자인 지정에는 적합하지 않다.

16진수 색상은 #RRGGBB 형식으로 빨강·초록·파랑 성분을 각각 00부터 FF까지 표현한다. #RRGGBBAA는 마지막 AA에 투명도를 추가하며 #ff000080은 약 50% 알파를 가진 빨강이다.

RGB·RGBA

rgb(r, g, b)와 rgba(r, g, b, a)에서 색상 성분은 0~255, 알파는 0.0~1.0 범위이다. 최신 문법은 콤마 없이 공백으로 구분하고 슬래시 뒤에 투명도를 작성한다.

rgb(0 0 255 / 20%)

HSL·HSLA

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현한다. 색상은 0~360도의 색상환 각도이며 0 또는 360은 빨강, 120은 초록, 240은 파랑이다. 채도는 0% 무채색에서 100% 순색, 밝기는 0% 검정에서 100% 흰색 범위이다.

hsl(0 100% 50% / 0.5)

HSL은 밝기와 채도를 직관적으로 조절할 수 있어 디자인 시스템과 다크모드, 색상 테마 구축에 유용하다.

11. 색상 키워드·변수와 투명도

currentColor와 transparent

currentColor는 별도의 색상이 아니라 현재 요소의 글자색 color 값을 그대로 사용하라는 키워드이다. 아이콘이나 테두리를 글자색과 맞추면 글자색 변경에 함께 반응한다.

.btn {
  color: blue;
  border: 1px solid currentColor;
}

transparent는 완전히 투명한 색으로 rgb(0 0 0 / 0)과 같다. border: 1px solid transparent는 테두리를 보이지 않게 하지만 테두리 공간은 유지한다.

CSS 사용자 정의 속성

반복되는 색상은 :root에 CSS 변수로 정의하고 var()로 사용하면 유지보수가 쉬워진다.

:root {
  --main-color: #3498db;
  --text-dark: #333333;
  --bg-light: #f4f4f4;
}

body { color: var(--text-dark); }
.btn-primary { background-color: var(--main-color); }

색상 관련 속성과 opacity

속성대상과 특징
color텍스트와 텍스트 장식, currentColor를 사용하는 부분의 색
background-color테두리 안쪽과 패딩 영역까지 포함한 배경색
border-color테두리 색. 화면에 보이려면 border-style도 필요
opacity요소 전체와 텍스트·배경·자식 요소의 불투명도

opacity: 0.5는 요소와 모든 자식까지 함께 반투명하게 만든다. 배경만 반투명하게 하고 글자는 선명하게 유지하려면 background-color: rgb(0 255 0 / 50%)처럼 색상 자체의 알파 채널을 사용한다.

opacity는 요소 전체에 적용되고, RGBA·HSLA·최신 rgb/hsl의 알파 값은 지정한 색상에만 적용된다.

핵심 개념 정리

  • CSS는 HTML 구조와 표현을 분리하여 디자인 일관성, 유지보수, 재사용성과 접근성을 높인다.
  • CSS 규칙은 선택자, 선언 블록, 속성, 값으로 구성하며 외부 파일 연결이 실무 표준이다.
  • 명시도는 인라인 1,000점, 아이디 100점, 클래스·가상 클래스·속성 10점, 요소·가상 요소 1점, 전체 선택자 0점이다.
  • 명시도가 같으면 뒤에 선언된 규칙이 적용되며 !important는 최후의 수단이다.
  • 스타일은 의미 있는 클래스 중심으로 설계하고 아이디의 높은 명시도 의존을 줄인다.
  • 속성 선택자는 존재·일치·포함·시작·끝 패턴으로 HTML 속성값을 검사한다.
  • 가상 클래스는 상태와 구조를, 가상 요소는 요소의 특정 부분을 선택한다.
  • :is()는 그룹화, :where()는 0점 그룹화, :has()는 조건을 만족하는 자식이 있는 부모 선택에 사용한다.
  • 결합자는 자손·자식·인접 형제·일반 형제·그룹 관계를 표현한다.
  • 색상은 색상명, HEX, RGB/RGBA, HSL/HSLA로 지정하고 반복 값은 CSS 변수로 관리할 수 있다.
  • currentColor는 현재 글자색을 재사용하고 transparent는 완전 투명색을 나타낸다.
  • opacity와 색상 알파 채널의 적용 범위를 구분해야 한다.

유지보수하기 좋은 CSS는 의미 있는 클래스와 짧고 명확한 선택자로 범위를 제한하고, 명시도 경쟁과 인라인 스타일·아이디·!important 의존을 줄인다. 색상은 재사용 가능한 변수로 관리하고 접근성을 위해 포커스 표시와 충분한 상태 구분을 유지해야 한다.

예상문제 20선

1. CSS에서 관심사의 분리가 의미하는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
구조와 표현을 분리하면 같은 HTML을 유지하면서 CSS만 교체할 수 있어 재사용과 유지보수가 쉬워진다.

2. CSS 규칙의 올바른 기본 형식은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
선택자 뒤 중괄호 안에 속성과 값을 콜론으로 연결하고 각 선언 끝에 세미콜론을 붙인다.

3. 여러 HTML 문서에서 같은 스타일을 재사용하기에 가장 적합한 방식은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
외부 스타일시트는 여러 문서가 하나의 파일을 공유하므로 디자인 일관성과 유지보수성이 높다.

4. 인라인 스타일에 대한 설명으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
요소마다 직접 작성하는 인라인 스타일은 중복을 만들고 한꺼번에 수정하기 어려우므로 제한적으로 사용한다.

5. CSS 명시도가 가장 높은 선택자는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
보기 중 아이디는 100점, 클래스는 10점, 요소는 1점, 전체 선택자는 0점이다.

6. .container p 선택자의 명시도 점수는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
클래스 선택자 10점과 요소 선택자 1점을 합쳐 11점이다.

7. 명시도가 같은 두 규칙이 충돌할 때 적용되는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
명시도까지 같으면 캐스케이드의 선언 순서에 따라 뒤쪽 규칙이 앞 규칙을 덮어쓴다.

8. 실무 CSS 스타일링의 중심으로 권장되는 선택자는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
클래스는 재사용과 조합이 쉽고 명시도도 관리하기 좋아 역할 중심 스타일 설계에 적합하다.

9. [href^="https://"]가 선택하는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
속성 선택자의 ^= 연산자는 지정한 문자열로 시작하는 속성값을 찾는다.

10. 가상 클래스와 가상 요소의 구분으로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
:hover는 상태를, ::before는 요소의 앞쪽 가상 부분을 나타낸다.

11. 짝수 번째 형제 요소를 선택하는 가상 클래스는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
:nth-child(even)은 형제 순서가 짝수인 요소를 선택하여 줄무늬 패턴 등에 사용한다.

12. :where()의 명시도 특징은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
:where()는 쉽게 덮어쓸 수 있도록 괄호 안 선택자와 관계없이 자체 점수를 0으로 취급한다.

13. 특정 자식을 가진 부모를 선택할 때 사용하는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
.card:has(img)처럼 조건에 맞는 자식이나 후손을 포함한 부모 요소를 선택한다.

14. 키보드 접근성을 유지하면서 주로 Tab 이동 시 포커스 윤곽선을 표시하는 선택자는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
:focus-visible은 키보드 사용자가 현재 포커스 위치를 확인하도록 하면서 마우스 클릭의 불필요한 윤곽선을 줄인다.

15. h1 + p가 선택하는 요소는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
플러스 기호는 인접 형제 결합자로 같은 부모 아래에서 기준 요소 바로 다음 형제 하나를 선택한다.

16. 자손 결합자와 자식 결합자의 차이로 옳은 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
공백은 자식·손자 등 내부의 모든 깊이를, >는 직계 자식만 선택한다.

17. HSL에서 L이 의미하는 것은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
L은 0% 검정에서 100% 흰색까지 색의 밝기를 나타낸다.

18. currentColor의 의미는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
currentColor를 테두리나 아이콘에 사용하면 글자색이 바뀔 때 함께 바뀐다.

19. CSS 변수를 전역에서 선언할 때 주로 사용하는 선택자는?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
:root에 --main-color 같은 사용자 정의 속성을 선언하면 문서 전체에서 var()로 재사용할 수 있다.

20. 배경만 반투명하게 하고 내부 글자는 선명하게 유지하는 방법은?

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
opacity는 자식과 텍스트를 포함한 요소 전체에 영향을 주지만 배경색의 알파 값은 배경에만 적용된다.

댓글

댓글 쓰기