[HTML/CSS] 그라데이션부터 가상 클래스까지 – 스타일링 기초 총정리

웹 페이지를 더 풍부하고 유연하게 꾸미기 위한 CSS 속성 중에서 그라데이션 효과, 선택자 응용, 그리고 가상 클래스에 대해 정리하였습니다. 실습 예제와 함께 개념을 익히면 HTML/CSS의 스타일링에 한층 더 익숙해질 수 있습니다.

 

1. 그라데이션 효과 주기

1) 그라데이션(Gradient)

그라데이션은 두 가지 이상의 색상을 부드럽게 연결하여 배경에 색상 변화를 주는 시각 효과입니다.

.grad3 {
  background: linear-gradient(to left top, rgb(247, 0, 255), rgb(26, 171, 255));
}

.grad4 {
  background: linear-gradient(38deg, rgb(47, 68, 255), rgb(0, 255, 115));
}

• to left top : 왼쪽 위 방향으로 그라데이션 설정
• 38deg : 38도 각도로 방향 지정
• rgb() : 색상 표현 방식

 

2. 연결 선택자 이해하기

1) 연결 선택자(Combinator)

선택자를 조합해 특정 요소에만 스타일을 적용합니다. 일반적으로 컴비네이션 선택자라고도 부릅니다.

선택자 예시	설명
section p	section 내의 모든 p 태그에 적용
section > p	section 바로 아래에 있는 p만 적용
h1 + p	h1 다음에 오는 형제 p 하나에 적용
h1 ~ p	h1 다음에 오는 모든 형제 p에 적용

 

3. 속성 선택자 사용하기

1) 속성 선택자(Attribute Selector)

요소에 특정 속성이 있거나, 특정 속성 값이 포함되어 있을 때 스타일을 적용합니다.

a[href] {
  background-color: yellow;
}

a[target="_blank"] {
  padding-right: 30px;
  background: url('image/apple-bg.jpg') no-repeat center right;
}

선택자	설명
[속성]	해당 속성이 있는 요소
[속성=값]	속성값이 정확히 일치
[속성~=값]	여러 값 중 하나와 일치
[속성^=값]	값으로 시작하는 경우
[속성$=값]	값으로 끝나는 경우
[속성*=값]	값이 포함된 경우

 

4. 가상 클래스(Pseudo Class)

1) 가상 클래스란?

HTML 요소의 특정 상태에 따라 스타일을 다르게 적용하는 방법입니다.

가상 클래스	설명
:link	방문하지 않은 링크
:visited	방문한 링크
:hover	마우스를 올렸을 때
:active	클릭한 순간
:focus	요소에 포커스가 맞춰졌을 때
:target	앵커 ID로 포커스 된 요소

.navi a:link, .navi a:visited {
  color: #000;
  text-decoration: none;
}

.navi a:hover, .navi a:focus {
  background-color: #222;
  color: #fff;
}

.navi a:active {
  background-color: #0069e0;
}

#intro:target {
  background-color: #0069e0;
  color: #fff;
}

 

2) 예시 구성

• .navi : 메뉴 영역
• .contents : 콘텐츠 박스
• :target : 특정 ID를 갖는 콘텐츠 영역에 앵커 클릭 시 스타일 적용

 

5. 정리

• 그라데이션은 시각적으로 부드러운 색상 전환을 주는 효과입니다.
• 연결 선택자는 요소 간 관계에 따라 스타일 범위를 제한할 수 있습니다.
• 속성 선택자는 특정 속성이나 값에 따라 세부 스타일을 지정할 수 있습니다.
• 가상 클래스는 요소의 상태에 따른 동적 스타일링을 제공합니다.