CodeGym/행동/Frontend SELF KO/디자인과 UX 개선

디자인과 UX 개선

사용 가능

9.1 가상 클래스와 가상 요소를 사용한 인터랙티브성 개선

CSS의 가상 클래스와 가상 요소는 웹 페이지에서 디자인과 사용자 경험(UX)을 개선하는 강력한 도구야. 이걸로 인터랙티브하고 동적인 요소를 만들고, 시각적인 인식을 개선하고 접근성을 높일 수 있어.

이런 목표를 달성하기 위해 가상 클래스와 가상 요소를 어떻게 사용할 수 있는지 몇 가지 예를 살펴보자.

1. 커서 올리기

가상 클래스 :hover는 사용자가 커서를 요소 위에 올릴 때 그 요소의 스타일을 변경할 수 있게 해줘. 특히 버튼과 링크에 유용하지.

예시: 버튼에 커서 올렸을 때 색상 변경

이 예에서는 버튼의 배경색이 커서를 올렸을 때 변경되어, 시각적 피드백을 개선하고 인터페이스를 더 인터랙티브하게 만들어 줘:

CSS
button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}
HTML
<button>Click Me</button>

2. 포커스 있는 요소

가상 클래스 :focus는 폼 요소가 포커스가 있는 동안 스타일을 적용할 때 사용돼. 이걸로 사용자가 현재 입력 중인 폼 요소를 쉽게 볼 수 있지.

예시: 포커스 시 입력 필드 스타일링

이 예제에서는 입력 필드에 포커스가 있을 때 파란색 테두리와 그림자가 적용되어, 활성화된 폼 요소를 더 잘 보이게 해 줘:

CSS
input[type="text"] {
  border: 1px solid #ccc;
  padding: 10px;
}

input[type="text"]:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
HTML
<input type="text">

3. 활성화된 요소의 상태

가상 클래스 :active는 요소가 활성화 상태(예: 마우스 클릭 시)에 있을 때 적용돼.

예시: 버튼 클릭 시 스타일링

이 예에서는 버튼이 약간 축소되고 색상이 변경되어 클릭 효과를 만들어 줘:

CSS
button:active {
  background-color: #2c3e50;
  transform: scale(0.98);
}
HTML
<button>Click Me</button>

9.2 가상 요소를 사용한 시각적 인식 개선

4. 컨텐츠 추가: ::before 및 ::after

가상 요소 ::before::after는 HTML 코드를 변경하지 않고 요소 이전과 이후에 컨텐츠를 추가할 수 있게 해줘.

예시: 링크 앞에 아이콘 추가

이 예에서는 링크 텍스트 앞에 아이콘을 추가하여 시각적 인식을 개선하고 사용자에게 이게 링크라는 걸 알려줘:

CSS
a::before {
  content: "🔗";
  margin-right: 5px;
}
HTML
<a href="#">Here</a>

예시: 문단 뒤에 장식 요소 추가

이 예에서는 문단 뒤에 장식 요소를 추가하여 페이지의 시각적 분위기를 개선해 줘:

CSS
p::after {
  content: "❦";
  display: block;
  text-align: right;
  color: #e74c3c;
}
HTML
<p>Content</p>

5. 첫 글자와 첫 줄 스타일링: ::first-letter 및 ::first-line

가상 요소 ::first-letter::first-line은 텍스트의 첫 글자와 첫 줄을 스타일링하여 타이포그래피 효과를 만들어.

예시: 문단 첫 글자 스타일링

이 예에서는 문단의 첫 글자를 크게 하고 파란색으로 칠해서 "들여 쓴" 느낌을 만들어 줘. 이건 종종 잡지 디자인에서 사용돼:

CSS
p::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  color: #3498db;
  float: left;
  margin-right: 0.1em;
}
HTML
<p>Content</p>

예시: 첫 줄 스타일링

이 예에서는 문단의 첫 줄을 볼드체와 초록색으로 강조하여 가독성을 높여줘:

CSS
p::first-line {
  font-weight: bold;
  color: #2ecc71;
}
HTML
<p>Content</p>

9.3 가상 클래스와 가상 요소를 통한 접근성 개선

6. 폼 요소 상태

폼 가상 클래스는 그 상태에 따라 요소를 스타일링하여 접근성과 사용자 인터페이스를 개선할 수 있게 해줘.

예시: 선택된 체크박스 스타일링

이 예에서는 선택된 체크박스가 초록색으로 칠해져서, 시각적 피드백을 개선해줘:

CSS
input[type="checkbox"]:checked {
  background-color: #2ecc71;
}
HTML
<input type="checkbox" checked>

예시: 비활성화된 입력 필드 스타일링

이 예에서는 비활성화된 입력 필드가 밝은 회색 배경과 텍스트를 가져서, 그 비활성화를 시각적으로 보여줘:

CSS
input:disabled {
  background-color: #f0f0f0;
  color: #999;
}
HTML
<input type="text" disabled>

예시: 잘못된 입력 필드 스타일링

이 예에서는 잘못된 입력 필드가 빨간 테두리를 가져, 사용자가 데이터 입력 시 오류를 식별할 수 있게 해줘:

CSS
input:invalid {
  border-color: #e74c3c;
}
HTML
<input type="text">

9.4 전체 구현 예제

CSS
/* 링크 앞에 아이콘 추가 */

a::before {
  content: "🔗";
  margin-right: 5px;
}

/* 커서를 올리면 문단 첫 글자 스타일링 */

p:hover::first-letter {
  font-size: 2.5em;
  font-weight: bold;
  color: #3498db;
}

/* 버튼 스타일링 */

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}

button:active {
  background-color: #2c3e50;
  transform: scale(0.98);
}

/* 입력 필드에 포커스 시 스타일링 */

input[type="text"]:focus,
input[type="email"]:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* 선택된 체크박스 스타일링 */

input[type="checkbox"]:checked {
  background-color: #2ecc71;
}

/* 비활성화된 입력 필드 스타일링 */

input:disabled {
  background-color: #f0f0f0;
  color: #999;
}

/* 잘못된 입력 필드 스타일링 */

input:invalid {
  border-color: #e74c3c;
}
HTML
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상 클래스와 가상 요소 사용 예제</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <a href="#">아이콘 있는 링크</a>
    <p>첫 글자에 효과 보려면 문단에 마우스를 올려봐.</p>
    <button>버튼</button>
    <form>
      <label>
        텍스트 입력:
        <input type="text" required>
      </label>
      <br>
      <label>
        이메일 입력:
        <input type="email" required>
      </label>
      <br>
      <label>
        <input type="checkbox" checked> 체크박스
      </label>
      <br>
      <button type="submit">제출</button>
      <button type="button" disabled>비활성 버튼</button>
    </form>
  </body>
</html>

가상 클래스와 가상 요소는 웹 페이지에서 디자인과 사용자 경험을 개선하기 위한 강력한 수단을 제공해. 이걸 사용하면 인터랙티브하고 동적인 요소를 만들고 시각적인 인식을 개선하며, 접근성을 높이고 사용자들에게 더 편리하고 즐거운 인터페이스를 제공할 수 있어.

이런 도구들에 대한 이해와 적절한 사용은 현대적이고 효과적인 웹 디자인을 만드는 많은 가능성을 열어줘.

1
과제
Frontend SELF KO,  레벨 30레슨 4
잠금
링크 앞에 아이콘 추가하기
링크 앞에 아이콘 추가하기
1
과제
Frontend SELF KO,  레벨 30레슨 4
잠금
입력 필드 포커스 시
입력 필드 포커스 시
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다