기본 콘텐츠로 건너뛰기

방송대 HTML5웹프로그래밍 5강: CSS 선택자 우선순위와 색상 표현

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

방송대 HTML5웹프로그래밍 5강: CSS 선택자 우선순위와 색상 표현

CSS를 작성했는데 색이 바뀌지 않는다면 속성부터 고칠 일이 아닐 수 있습니다. 먼저 원하는 요소가 선택되었는지, 여러 선언 중 무엇이 이겼는지, 투명도가 어느 범위에 적용되었는지를 추적해야 합니다. 이 글은 선택자와 캐스케이드, 색상을 하나의 디버깅 순서로 연결합니다.

색이 바뀌지 않는 문제는 네 질문으로 좁힌다

CSS(Cascading Style Sheets)는 HTML 문서의 색상·글꼴·레이아웃 같은 표현을 담당합니다. HTML 구조를 유지한 채 CSS만 바꿀 수 있으므로 여러 페이지의 디자인을 일관되게 관리하고, 상황에 맞는 표현을 재사용하기 쉽습니다.

하지만 규칙이 많아지면 “선언했는데 왜 적용되지 않는가?”라는 문제가 생깁니다. 이때 다음 네 질문을 차례로 사용합니다.

  1. 문법이 유효한가? 선택자와 중괄호, 속성·값과 세미콜론을 확인합니다.
  2. 선택자가 목표 요소와 일치하는가? 클래스명, 상태, 속성, DOM 관계를 확인합니다.
  3. 경쟁 규칙 중 무엇이 이겼는가? 중요도와 명시도, 선언 순서를 비교합니다.
  4. 값의 적용 범위가 맞는가? 글자·배경·테두리·요소 전체 중 어디를 바꾸는지 확인합니다.

판단 핵심: CSS 오류는 “값이 틀린 문제”와 “대상을 잘못 고른 문제”, “경쟁에서 진 문제”를 먼저 구분해야 빠르게 해결할 수 있습니다.

규칙 하나는 대상·항목·값으로 읽는다

CSS 규칙의 기본 형식은 선택자 { 속성: 값; }입니다. 선택자(selector)는 적용 대상을 고르고, 속성(property)은 바꿀 항목을, 값(value)은 구체적인 결과를 정합니다.

.error-message {
  font-size: 1rem;
  color: #ff0000;
}

여기서 .error-message는 클래스를 가진 요소를 고르고, 두 선언은 글자 크기와 색을 지정합니다. 주석은 /* 설명 */으로 씁니다. 마지막 선언에도 세미콜론을 붙이면 선언을 추가하거나 순서를 바꿀 때 실수를 줄일 수 있습니다.

전역 요소 선택자보다 역할이 드러나는 클래스명을 우선하면 영향 범위를 파악하기 쉽습니다. .red-text처럼 현재 모양만 적기보다 .error-message처럼 의미와 용도를 나타내는 이름이 변경에도 견고합니다.

외부·내부·인라인은 관리 범위가 다르다

방식쓰는 위치적합한 상황주의점
외부 스타일시트별도 .css 파일을 link로 연결여러 페이지의 공통 디자인연결 경로와 로딩 순서를 확인한다
내부 스타일문서의 style 요소한 페이지의 학습·시험 또는 제한된 규칙다른 페이지에서 재사용하기 어렵다
인라인 스타일요소의 style 속성간단한 시험이나 제한된 동적 처리재사용과 일괄 수정이 어려워 상시 사용을 피한다

실무의 기본은 외부 파일입니다. @import는 스타일시트 안에서 다른 CSS를 불러올 수 있지만, 강의에서는 성능과 관리 측면에서 기본 연결 방식으로 권장하지 않습니다.

오개념 교정: “내부 스타일은 외부 파일보다 언제나 강하다”는 설명은 틀립니다. 같은 중요도와 같은 명시도라면 문서에서 나중에 적용되는 선언이 이기므로, style 요소와 link 요소의 순서도 결과에 영향을 줄 수 있습니다.

캐스케이드는 명시도만 계산하는 규칙이 아니다

캐스케이드는 여러 후보 선언을 한 개의 최종 값으로 좁히는 과정입니다. 이 강의 범위에서는 먼저 !important 등 중요도 차이를 확인하고, 같은 층에서 선택자의 명시도(specificity)를 비교하며, 그래도 같으면 나중에 선언된 규칙을 고른다고 이해하면 됩니다.

강의의 100점·10점·1점 표는 비교를 돕는 기억법입니다. 실제 판단은 자릿수를 분리한 묶음으로 하는 편이 안전합니다.

선택자 부분명시도 자리예
ID 선택자첫째 자리#panel
클래스·속성·가상 클래스둘째 자리.notice, [required], :hover
요소·가상 요소셋째 자리p, button, ::before
전체 선택자증가 없음*

예를 들어 .container p는 (0,1,1), #box p는 (1,0,1)이므로 뒤의 규칙이 이깁니다. .btn과 .primary는 둘 다 (0,1,0)이므로 같은 요소에 적용된다면 나중 선언이 승리합니다.

판단 핵심: !important는 명시도 점수를 더하는 선택자가 아니라 선언의 중요도를 바꿉니다. 덮어쓰기를 어렵게 만들므로 정상적인 선택자 설계로 해결할 수 없을 때만 최후의 수단으로 검토합니다.

기본 선택자는 의도의 크기에 맞춰 고른다

전체 선택자 *는 모든 요소와 일치하므로 박스 모델 초기화처럼 분명한 전역 목적에 사용합니다. 타입 선택자 p나 h2는 해당 요소 전체에 영향을 주므로 기본값 설정에는 편리하지만 특정 부품을 꾸미기에는 범위가 넓습니다.

클래스는 여러 요소에 반복할 수 있고 한 요소에 여러 개를 조합할 수도 있어 CSS 스타일링의 중심이 됩니다. 다음 학습용 예는 공통 버튼 규칙과 역할별 변형을 분리합니다.

<button class="btn btn--primary">확인</button>
<button class="btn btn--danger">삭제</button>
.btn {
  padding: 0.5rem 1rem;
}

.btn--primary {
  background-color: #2457c5;
}

.btn--danger {
  background-color: #b42318;
}

id는 페이지에서 하나뿐인 요소의 식별, 내부 링크, label 연결, JavaScript 제어에 유용합니다. 그러나 ID 선택자는 명시도가 높아 스타일을 나중에 바꾸기 어려우므로 스타일링은 대체로 클래스 중심으로 설계합니다.

속성 선택자는 값의 패턴으로 대상을 찾는다

속성 선택자는 폼 상태나 링크 종류처럼 HTML 속성 자체가 의미 있는 조건일 때 유용합니다.

문법일치 조건적용 예
[required]속성이 존재함필수 입력 요소
[type="text"]값이 정확히 같음텍스트 입력창
[href^="https://"]값이 해당 문자열로 시작HTTPS 링크
[href$=".pdf" i]대소문자를 무시하고 해당 문자열로 끝남PDF 링크
[src*="thumb"]값에 문자열이 포함됨파일명에 thumb이 든 이미지
 
input[type="text"] {
  border: 1px solid gray;
}

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

img[alt=""] {
  border: 3px solid red;
}

마지막 규칙은 빈 alt가 잘못되었다고 단정하는 완성 규칙이 아니라 검토 후보를 눈에 띄게 하는 디버깅 장치입니다. 장식 이미지는 빈 대체 텍스트가 올바를 수도 있으므로 이미지의 목적을 함께 판단해야 합니다.

가상 클래스는 상태를, 가상 요소는 부분을 고른다

콜론 한 개를 쓰는 가상 클래스는 요소의 상태나 구조적 위치를 선택합니다. :hover는 포인터가 올라간 상태, :active는 활성화되는 순간, :focus는 입력 초점을 가진 상태, :checked는 선택된 폼 상태를 나타냅니다.

:focus-visible은 브라우저가 초점 표시가 필요하다고 판단한 경우와 일치하며, 특히 키보드 탐색에서 초점 위치를 보존하는 데 유용합니다. 마우스 클릭 때 테두리가 보기 싫다는 이유로 모든 outline을 제거하면 키보드 사용자가 현재 위치를 잃을 수 있습니다.

콜론 두 개를 쓰는 가상 요소는 ::before, ::after, ::placeholder처럼 요소의 특정 부분을 선택합니다. 장식이나 짧은 보조 기호를 붙일 수 있지만, 핵심 정보는 CSS의 content에만 숨기지 않고 HTML에 둡니다.

.btn:focus-visible {
  outline: 2px solid #2457c5;
}

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

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

구조 가상 클래스는 순서의 기준을 먼저 확인한다

:first-child와 :last-child는 부모의 첫째·마지막 자식을, :nth-child(n)은 부모의 전체 자식 목록에서 n번째를 선택합니다. :nth-of-type(n)은 같은 요소 타입끼리 세고 난 뒤 n번째를 선택합니다.

예를 들어 한 부모 안에 h2, p, p가 순서대로 있을 때 p:nth-child(2)와 p:nth-of-type(1)은 둘 다 첫 번째 p를 가리킵니다. 그러나 앞에 다른 요소가 추가되면 child 기준의 전체 순번은 바뀔 수 있고, type 기준의 p 순번은 유지됩니다.

:not(X)은 X와 일치하지 않는 대상을 고릅니다. 메뉴 항목 사이에만 구분선을 넣으려면 .menu-item:not(:last-child)처럼 마지막 항목을 제외할 수 있습니다.

오개념 교정: :nth-child(2)는 “해당 타입 중 두 번째”가 아니라 “부모의 모든 자식 중 두 번째”입니다. 타입별 순번이 필요하면 :nth-of-type()을 검토합니다.

is·where·has는 짧게 쓰되 명시도 차이를 남긴다

:is()와 :where()는 여러 선택자를 묶어 반복을 줄입니다. 두 문법의 일치 대상이 같을 수 있지만, :where() 자체와 인수는 명시도에 기여하지 않습니다. 반면 :is()는 인수 목록에서 가장 높은 명시도의 영향을 받습니다.

:is(section, article, aside) h2 {
  color: navy;
}

:where(section, article, aside) h2 {
  margin-block-start: 1.5rem;
}

.card:has(img) {
  border-color: #2457c5;
}

:has()는 특정 자식이나 후손 조건을 만족하는 부모를 선택할 수 있습니다. 위 규칙은 이미지가 들어 있는 카드만 고릅니다. :is()와 :has()의 명시도는 괄호 안에서 가장 높은 선택자의 영향을 받으므로, 편의를 위해 ID를 섞었다가 예상보다 강한 규칙이 되는 상황을 주의합니다.

결합자는 DOM 트리에서 이동 방향을 지시한다

기호관계선택 범위
공백자손안쪽의 모든 깊이에서 일치하는 요소
>자식바로 한 단계 아래의 요소
+인접 형제같은 부모 아래에서 바로 다음 요소 하나
~후속 형제같은 부모 아래에서 뒤따르는 일치 요소들
,선택자 목록나열한 여러 선택자의 합집합

다음 구조를 기준으로 결과를 직접 추적해 봅시다.

<div class="panel">
  <h2>알림</h2>
  <p>첫 문장</p>
  <div><p>안쪽 문장</p></div>
  <p>마지막 문장</p>
</div>
  • .panel p는 깊이에 상관없이 p 세 개를 모두 고릅니다.
  • .panel > p는 panel의 직접 자식인 첫 문장과 마지막 문장만 고릅니다.
  • h2 + p는 h2 바로 뒤의 첫 문장 하나만 고릅니다.
  • h2 ~ p는 h2와 같은 부모이며 뒤에 있는 두 p를 고르고, 중첩 div 안의 p는 형제가 아니므로 제외합니다.

너무 긴 결합자 체인은 HTML 구조가 조금만 바뀌어도 깨집니다. 깊은 자손 선택자를 습관적으로 늘리기보다 짧은 클래스와 필요한 관계만 조합합니다.

색상 표기법은 수정 목적에 따라 선택한다

색상 이름은 읽기 쉽지만 선택 폭이 제한적이어서 학습·시험에 편리합니다. 16진수 #RRGGBB는 빨강·초록·파랑을 각각 00부터 FF로 나타냅니다. 뒤에 알파 채널을 붙인 #RRGGBBAA도 사용할 수 있습니다.

직접 계산해 보면 #3366cc는 16진수 33=51, 66=102, cc=204이므로 rgb(51 102 204)와 같은 RGB 성분을 가집니다. #ff000080의 알파 80은 10진수 128이고, 128 ÷ 255 ≈ 0.502이므로 약 50% 불투명한 빨강입니다.

표기강점판단 기준
#RRGGBB 또는 #RRGGBBAA디자인 도구의 값을 옮기기 쉽다고정된 색상 코드 공유
rgb(r g b / a)채널 계산과 알파 지정이 직접적이다RGB 값 계산·조작
hsl(h s l / a)색상·채도·밝기를 나누어 조정한다색상 변형과 테마 설계

HSL에서 H는 색상환 각도, S는 채도, L은 밝기입니다. 예를 들어 hsl(0 100% 50% / 0.5)는 50% 불투명한 선명한 빨강입니다. 슬래시 뒤 20%는 “20% 투명”이 아니라 알파 20%, 즉 20% 불투명임을 구분해야 합니다.

currentColor·transparent·변수는 연결 관계를 만든다

currentColor는 현재 요소의 color 값을 다른 색상 속성에 사용합니다. 글자색과 아이콘·테두리를 함께 바꾸고 싶을 때 중복 값을 줄일 수 있습니다. transparent는 완전히 투명한 색이므로 테두리를 보이지 않게 하면서도 그 공간은 유지하는 데 사용할 수 있습니다.

:root {
  --brand-color: #2457c5;
  --surface-color: #f5f7fb;
}

.action {
  color: var(--brand-color);
  border: 1px solid currentColor;
  background-color: var(--surface-color);
}

:root에 CSS 사용자 정의 속성을 두면 여러 규칙이 같은 값을 참조할 수 있습니다. 색상을 바꿀 때 변수 하나를 수정하면 연결된 규칙이 함께 바뀌므로 테마와 유지보수에 유리합니다.

opacity와 알파 색상은 흐려지는 범위가 다르다

opacity는 요소 전체를 하나의 결과로 합성한 뒤 투명하게 만듭니다. 따라서 배경뿐 아니라 글자·테두리·자식 요소도 함께 흐려집니다. 반면 background-color: rgb(0 128 0 / 50%)처럼 배경색에 알파를 넣으면 배경만 반투명해지고 글자는 원래 불투명도를 유지합니다.

/* 카드 전체가 흐려짐 */
.card-disabled {
  opacity: 0.5;
}

/* 배경만 반투명, 글자는 유지 */
.card-overlay {
  background-color: rgb(0 128 0 / 50%);
}

판단 핵심: “무엇을 반투명하게 할 것인가?”를 먼저 묻습니다. 컴포넌트 전체 상태를 흐리면 opacity, 배경색만 조정하면 알파가 포함된 색상 값을 선택합니다.

한 번의 디버깅으로 선택자와 색상을 함께 검증한다

학습용 상황을 가정해 봅시다. 버튼의 글자색을 파랑으로 바꾸었는데 회색으로 보이고, 배경만 반투명하게 하려 했는데 글자까지 흐려졌습니다.

  1. 개발자 도구에서 버튼이 목표 클래스와 실제로 일치하는지 확인합니다.
  2. 취소선 처리된 선언과 최종 선언을 보고 !important, 인라인 선언, 선택자의 명시도를 비교합니다.
  3. 명시도가 같다면 스타일시트 연결 순서와 규칙의 선언 순서를 봅니다.
  4. 지나치게 강한 ID·긴 결합자 대신 의도가 드러나는 클래스로 범위를 조정합니다.
  5. 배경만 투명해야 한다면 요소 전체의 opacity를 제거하고 배경색의 알파 채널을 사용합니다.

이 순서는 결과를 억지로 덮는 대신 원인을 찾게 합니다. 곧바로 !important를 추가하면 당장은 보일 수 있지만 다음 수정에서 더 강한 충돌을 만들 수 있습니다.

핵심 개념 정리

  • 문법: 선택자가 대상을, 속성과 값이 바꿀 표현을 정합니다.
  • 캐스케이드: 중요도, 명시도, 선언 순서를 구분해야 충돌의 승자를 설명할 수 있습니다.
  • 선택 범위: 클래스는 재사용, 속성·가상 클래스는 조건과 상태, 결합자는 DOM 관계를 표현합니다.
  • 고급 선택: :where()는 명시도를 늘리지 않고, :is()와 :has()는 인수의 가장 높은 명시도 영향을 받습니다.
  • 색상: HEX·RGB·HSL은 같은 색을 다른 관점으로 표현하며 알파는 불투명도를 나타냅니다.
  • 투명 범위: opacity는 요소 전체, 색상의 알파는 해당 색상에만 적용됩니다.

스타일 문제를 만나면 “어떤 값이 예쁜가”보다 “어느 요소가 일치했고, 경쟁 선언은 어떤 기준으로 정리되었으며, 최종 값은 어느 범위에 그려지는가”를 순서대로 추적합니다. 이 세 질문을 설명할 수 있으면 선택자를 짧게 유지하면서도 색상과 상태를 예측 가능하게 제어할 수 있습니다.

예상문제 10선

1. 같은 p 요소에 .panel p와 #notice p가 모두 일치하고 두 선언의 중요도가 같을 때, 명시도만으로 우선하는 선택자는?

정답입니다.

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

정답 및 해설 보기

정답: ④

  • ① 오답: p 부분은 같지만 ID와 클래스가 서로 다른 명시도 자리에 기여합니다.
  • ② 오답: 문자 수가 아니라 ID·클래스·요소 선택자의 종류와 개수를 비교합니다.
  • ③ 오답: 선언 순서는 명시도까지 같을 때 판단하며 먼저 쓴 규칙이 이기는 것도 아닙니다.
  • ④ 정답: (1,0,1)은 (0,1,1)보다 ID 자리에서 앞서므로 #notice p가 우선합니다.

2. 내부 style 요소의 .title과 외부 CSS의 .title이 같은 중요도로 같은 속성을 선언했다. 올바른 설명은?

정답입니다.

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

정답 및 해설 보기

정답: ②

  • ① 오답: 내부·외부라는 저장 위치 자체가 같은 명시도의 승자를 고정하지 않습니다.
  • ② 정답: 같은 중요도와 명시도라면 문서에 적용되는 소스 순서에서 뒤의 선언이 우선합니다.
  • ③ 오답: 외부 파일이라는 이유만으로 더 강해지는 규칙도 없습니다.
  • ④ 오답: 캐스케이드는 선언 순서까지 사용하므로 결과가 임의적이지 않습니다.

3. 반복 사용하는 버튼 스타일을 만들고, 한 버튼은 JavaScript에서도 찾아야 한다. 가장 유지보수하기 좋은 구성은?

정답입니다.

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

정답 및 해설 보기

정답: ③

  • ① 오답: id는 페이지에서 고유해야 하므로 여러 버튼에 반복할 수 없습니다.
  • ② 오답: 인라인 복사는 일괄 수정과 재사용을 어렵게 합니다.
  • ③ 정답: 반복 표현은 클래스가 맡고 고유 식별이 필요한 요소만 id로 찾으면 역할이 분리됩니다.
  • ④ 오답: 전역 button 규칙과 !important는 변형을 덮어쓰기 어렵게 만듭니다.

4. 대소문자와 무관하게 주소가 .pdf로 끝나는 링크를 선택할 규칙은?

정답입니다.

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

정답 및 해설 보기

정답: ①

  • ① 정답: $=는 끝 일치이고 i 플래그는 ASCII 대소문자를 구분하지 않습니다.
  • ② 오답: ^=는 시작 일치이므로 파일 확장자가 끝에 있는 조건과 반대입니다.
  • ③ 오답: *=는 포함 조건이며 PDF 확장자를 검사하지도 않습니다.
  • ④ 오답: =는 전체 값의 정확한 일치이고 s는 대소문자를 구분하는 방향입니다.

5. 부모의 전체 자식 순서와 같은 타입끼리의 순서를 올바르게 구분한 것은?

정답입니다.

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

정답 및 해설 보기

정답: ④

  • ① 오답: 형제 사이에 다른 타입이 섞이면 두 선택자의 순번 기준이 달라집니다.
  • ② 오답: 두 문법 모두 클래스나 id 개수를 세는 선택자가 아닙니다.
  • ③ 오답: 두 선택자의 기준을 서로 반대로 설명했습니다.
  • ④ 정답: child는 부모 아래 전체 위치, of-type은 같은 태그명 형제 중 위치를 기준으로 합니다.

6. :where(section, article) h2의 명시도에 대한 설명으로 알맞은 것은?

정답입니다.

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

정답 및 해설 보기

정답: ①

  • ① 정답: :where()는 그룹화 조건을 제공하면서 자체와 인수의 명시도 기여를 0으로 만듭니다.
  • ② 오답: 인수 개수로 클래스 자리를 계산하지 않습니다.
  • ③ 오답: 인수의 높은 명시도를 따르는 쪽은 :is()와 :has()이며 임의로 100을 더하지 않습니다.
  • ④ 오답: 규칙은 정상적으로 일치하고 적용되며 명시도 기여 방식만 다릅니다.

7. 본문의 panel 예제에서 h2 ~ p가 선택하는 요소는?

정답입니다.

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

정답 및 해설 보기

정답: ③

  • ① 오답: 바로 다음 하나만 고르는 기호는 인접 형제 결합자 +입니다.
  • ② 오답: 깊이에 관계없이 모든 후손을 고르는 것은 공백 결합자입니다.
  • ③ 정답: ~는 같은 부모를 공유하면서 기준 요소 뒤에 나오는 일치 형제들을 선택합니다.
  • ④ 오답: 중첩 div 안의 p는 h2와 같은 부모가 아니므로 형제 관계가 아닙니다.

8. 8자리 HEX 색상 #3366cc80의 알파 값을 백분율로 해석한 것에 가장 가까운 것은?

정답입니다.

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

정답 및 해설 보기

정답: ②

  • ① 오답: 16진수 80을 첫 자리 8만으로 해석하면 안 됩니다.
  • ② 정답: 0x80은 128이고 알파 최댓값 255와 비교하면 약 0.502입니다.
  • ③ 오답: 80은 10진수 백분율 표기가 아니라 16진수 두 자리입니다.
  • ④ 오답: cc는 파랑 채널이고 마지막 두 자리 80이 알파 채널입니다.

9. 카드의 배경만 40% 불투명하게 만들고 글자와 자식 버튼은 선명하게 유지하려면?

정답입니다.

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

정답 및 해설 보기

정답: ③

  • ① 오답: opacity는 카드의 합성 결과 전체에 적용되어 글자와 자식도 함께 흐려집니다.
  • ② 오답: color는 주로 글자와 연결된 색을 바꾸므로 배경 투명도 요구와 다릅니다.
  • ③ 정답: 배경색 자체의 알파만 낮추면 해당 색상만 반투명해지고 내용은 유지됩니다.
  • ④ 오답: currentColor는 현재 글자색을 재사용하는 값이며 투명도 범위를 제한하지 않습니다.

10. 기대한 글자색이 적용되지 않을 때 가장 적절한 진단 순서는?

정답입니다.

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

정답 및 해설 보기

정답: ④

  • ① 오답: 원인을 찾지 않고 !important를 늘리면 다음 충돌을 더 해결하기 어렵습니다.
  • ② 오답: 색상 표기법과 파일 위치를 바꾸는 것만으로 선택·경쟁 문제는 해결되지 않습니다.
  • ③ 오답: opacity와 DOM 중첩은 글자색 충돌의 우선 진단 항목이 아니며 구조 의존성만 키웁니다.
  • ④ 정답: 유효성, 선택 대상, 캐스케이드 승자, 값의 적용 범위를 순서대로 분리해 원인을 좁힙니다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료를 바탕으로 학습 목적에 맞게 재구성한 비공식 학습자료입니다. 강의의 선택자와 색상 규칙을 단순 나열하지 않고, 스타일 충돌을 원인별로 추적하는 문제 해결 절차와 직접 계산한 예제로 구성했습니다.

댓글

댓글 쓰기