CSS User Interface

CSS User Interface (UI): 사용자 상호작용 요소 스타일링

CSS User Interface (UI) 속성은 웹 페이지에서 상호작용과 사용자 경험을 개선하는 데 중요한 역할을 합니다. 커서 모양 변경, 텍스트 선택 제어, 스크롤바 스타일링과 같은 UI 관련 기능을 제공하여 웹 페이지가 사용자 친화적으로 보이도록 만듭니다. 이 자료에서는 CSS UI 속성을 다루며, 웹 인터페이스를 더욱 직관적이고 반응성 있게 만드는 방법을 배워보겠습니다.

1. `cursor`: 커서 모양 변경

cursor 속성은 사용자가 마우스를 특정 요소 위에 올렸을 때 커서의 모양을 제어합니다. 버튼, 링크, 이미지 등에 맞는 커서 스타일을 설정하여 사용자가 현재 어떤 동작을 할 수 있는지 직관적으로 알 수 있습니다.

주요 값

default: 기본 커서 모양.
pointer: 손가락 모양, 주로 클릭 가능한 요소에 사용됩니다.
text: 텍스트 선택 커서, 입력 가능한 영역에서 사용됩니다.
move: 네 방향 화살표, 요소를 드래그할 때 사용됩니다.
not-allowed: 금지 표시, 클릭할 수 없는 요소를 나타냅니다.

예시: 커서 모양 변경

.button {
  cursor: pointer; /* 클릭 가능한 버튼에 손가락 커서 적용 */
}

.textbox {
  cursor: text; /* 텍스트 입력 가능한 영역에 텍스트 커서 적용 */
}

.disabled {
  cursor: not-allowed; /* 비활성화된 요소에 금지 커서 적용 */
}

이 코드는 사용자가 버튼, 텍스트 상자, 비활성화된 요소와 상호작용할 때 적절한 커서 모양을 설정합니다.

2. `resize`: 요소 크기 조절 허용

resize 속성은 사용자가 요소의 크기를 마우스로 조정할 수 있도록 만듭니다. 주로 텍스트 영역에서 사용되며, 사용자가 입력하는 텍스트 상자의 크기를 자유롭게 조절할 수 있게 합니다.

주요 값

none: 크기 조절을 비활성화.
both: 요소의 가로와 세로 크기 모두를 조절 가능.
horizontal: 가로 크기만 조절 가능.
vertical: 세로 크기만 조절 가능.

예시: 텍스트 영역 크기 조절 허용

.textbox {
  resize: both; /* 가로, 세로 크기 조절 허용 */
  overflow: auto; /* 내용이 넘칠 경우 스크롤 허용 */
}

이 코드는 사용자가 텍스트 상자의 가로와 세로 크기를 자유롭게 조절할 수 있게 만듭니다.

3. `outline`: 포커스 시 강조

outline 속성은 요소에 포커스가 맞았을 때 나타나는 테두리를 제어합니다. 주로 폼 요소에서 사용되며, 사용자가 현재 선택한 입력 상자 등을 강조할 때 유용합니다.

예시: 포커스 시 테두리 강조

input:focus {
  outline: 2px solid #007bff; /* 포커스 시 파란색 테두리 */
}

이 코드는 사용자가 입력 필드에 포커스를 맞추면, 입력 상자가 파란색 테두리로 강조되도록 설정합니다.

4. `user-select`: 텍스트 선택 제어

user-select 속성은 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다. 텍스트를 복사할 수 없게 하거나, 특정 요소에서는 선택되지 않도록 설정할 수 있습니다.

주요 값

none: 텍스트 선택을 비활성화.
text: 텍스트 선택을 허용.
all: 요소의 모든 내용을 선택 가능.
auto: 기본 브라우저 동작을 따름.

예시: 텍스트 선택 제어

.no-select {
  user-select: none; /* 텍스트 선택 비활성화 */
}

.select-all {
  user-select: all; /* 클릭 시 모든 텍스트가 선택됨 */
}

이 코드는 .no-select 클래스에 텍스트 선택을 비활성화하고, .select-all 클래스에 클릭 시 모든 텍스트를 자동으로 선택되게 설정합니다.

5. `scroll-behavior`: 스크롤 동작 제어

scroll-behavior 속성은 페이지 내부에서 스크롤할 때의 움직임을 제어합니다. 주로 앵커 링크를 클릭했을 때 페이지가 부드럽게 스크롤되도록 설정합니다.

주요 값

auto: 기본 스크롤 동작.
smooth: 부드럽게 스크롤.

예시: 부드러운 스크롤 설정

html {
  scroll-behavior: smooth; /* 페이지 내에서 부드럽게 스크롤 */
}

이 코드는 앵커 링크나 내부 페이지 링크를 클릭했을 때 부드럽게 스크롤되도록 설정합니다.

6. `pointer-events`: 클릭 가능 여부 제어

pointer-events 속성은 요소의 클릭, 터치, 마우스 이벤트를 제어합니다. 이를 통해 특정 요소가 클릭되지 않게 하거나, 이벤트를 발생시키지 않도록 설정할 수 있습니다.

주요 값

none: 해당 요소가 클릭되지 않으며, 이벤트가 발생하지 않음.
auto: 기본 설정(이벤트 발생 가능).

예시: 클릭 비활성화

.button-disabled {
  pointer-events: none; /* 버튼 클릭 비활성화 */
  color: #ccc;
}

이 코드는 .button-disabled 클래스가 적용된 버튼에서 클릭이 비활성화되며, 회색 텍스트로 비활성화된 상태를 표시합니다.

7. `caret-color`: 텍스트 입력 커서 색상 변경

caret-color 속성은 텍스트 입력 필드에서 **입력 커서(캐럿)**의 색상을 변경할 수 있습니다. 입력 필드의 디자인을 사용자 정의할 때 유용합니다.

예시: 커서 색상 변경

input {
  caret-color: red; /* 입력 커서 색상을 빨간색으로 설정 */
}

이 코드는 입력 필드의 커서를 빨간색으로 표시합니다.

8. `scrollbar`: 스크롤바 스타일링 (WebKit 기반)

CSS를 사용해 스크롤바의 스타일을 커스터마이징할 수 있습니다. 주로 WebKit 기반 브라우저에서 지원되며, 스크롤바의 색상이나 크기를 변경할 수 있습니다.

예시: 스크롤바 스타일 변경

/* 스크롤바 전체 스타일 */
::-webkit-scrollbar {
  width: 10px;
}

/* 스크롤바 트랙 스타일 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 스크롤바 핸들 스타일 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

이 코드는 스크롤바의 너비, 색상, 모양을 변경하며, 사용자가 스크롤바를 마우스로 드래그할 때 색상 변화를 제공합니다.

9. 실전 예시: 사용자 인터페이스(UI) 요소 스타일링

<div class="ui-box">
  <input type="text" class="textbox" placeholder="Enter text here">
  <button class="button-disabled" disabled>Submit</button>
  <p class="no-select">이 텍스트는 선택할 수 없습니다.</p>
  <p class="select-all">클릭 시 이 텍스트 전체가 선택됩니다.</p>
</div>

.ui-box {
  padding: 20px;
}

.textbox {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  caret-color: red;
  resize: vertical;
}

.button-disabled {
  background-color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

.no-select {
  user-select: none;
}

.select-all {
  user-select: all;
}

input:focus {
  outline: 2px solid #007bff;
}

이 예시는 입력 필드, 비활성화된 버튼, 텍스트 선택 제어 등 다양한 UI 관련 기능을 적용한 실전 예제입니다.

코딩 스쿨 CSS