사용자 인터페이스와 관련된 CSS 속성

Articles

CSS 소개

이 기사는 사용자 인터페이스와 관련된 CSS 속성에 대해 설명합니다.

다음은 content, cursor, pointer-events, 및 resize 속성에 대해 배우고, 이들의 사용 사례와 작성 방법을 포함합니다.

YouTube Video

미리보기를 위한 HTML

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

사용자 인터페이스 관련

`content` 속성

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

content 속성은 주로 ::before 또는 ::after 같은 가상 요소에 콘텐츠를 추가하는 데 사용됩니다. 이 속성은 요소 내부에 직접 표시되지 않는 텍스트, 이미지, 카운터 등을 정의하는 데 사용됩니다. 주요 역할은 스타일 시트를 통해 HTML에 직접 작성되지 않은 장식적 콘텐츠나 부가 정보를 제어하는 것입니다.

이 예제에서 "Note: "는 요소 앞에 추가되고 "(End)"는 요소 뒤에 추가됩니다. 이는 각각 가상 요소 ::before 및 ::after를 사용합니다.

`content` 속성의 값

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

content 속성은 다음 값을 가질 수 있습니다:.

텍스트: 문자열을 ""로 묶어 직접 지정합니다. 텍스트를 추가합니다.
이미지: url() 함수를 사용하여 이미지를 추가합니다.
카운터: counter() 함수를 사용하여 카운터를 표시합니다.
속성: attr() 함수를 사용하여 HTML 요소의 속성 값을 표시합니다. 예를 들어, title 속성을 표시할 수 있습니다.
none: 콘텐츠가 표시되지 않도록 지정합니다. 이는 기본 상태입니다.

사용 시 주의사항

content 속성은 일반 요소가 아닌 가상 요소에만 적용됩니다.
DOM에 추가되지 않으므로 JavaScript로 직접 조작할 수 없습니다.
레이아웃에 영향을 미칠 수 있으므로 장식적 또는 보조 정보를 표시하는 데 자주 사용됩니다.

예제

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

이는 <p> 태그 앞에 아이콘을 추가하는 예제입니다. 이와 같은 방식으로 스타일 시트를 통해 콘텐츠를 시각적으로 보완할 수 있습니다.

`cursor` 속성

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

cursor 속성은 마우스 포인터가 요소 위에 있을 때 표시될 커서 유형을 지정하는 데 사용됩니다. 여러 커서 스타일을 지정할 수 있으며, 이는 사용자 경험을 향상시키기 위해 대화형 요소에 자주 적용됩니다.

주요 커서 유형

다음 값들은 커서 유형으로 지정할 수 있습니다.

`default`

- `default`는 일반 화살표 커서(브라우저의 기본 커서)입니다.

`pointer`

- `pointer`는 링크 위에 있을 때 표시되는 손 모양의 커서입니다.

`text`

- `text`는 텍스트를 선택할 수 있는 영역에서 표시되는 I-빔 커서입니다.

`move`

- `move`는 요소를 드래그할 수 있을 때 사용되는 십자형 커서입니다.

`crosshair`

- `crosshair`는 정확한 선택을 위한 십자형 커서입니다.

`not-allowed`

- `not-allowed`는 허용되지 않는 영역이나 작업을 나타내는 커서입니다.

`help`

- `help`는 도움말 정보를 제공할 수 있는 요소 위에서 표시되는 물음표가 있는 커서입니다.

`wait`

- `wait`는 처리 상태를 나타내는 모래시계 또는 원형 커서입니다.

`progress`

- `progress`는 진행 중인 작업을 나타내는 커서입니다. 그러나 사용자가 다른 작업을 수행할 수 있음을 나타냅니다.

`grab`

- `grab`는 드래그할 수 있는 요소를 잡는 커서입니다.

`grabbing`

- `grabbing`는 요소가 드래그 중임을 나타내는 커서입니다.

`resize`

- `resize`는 창 또는 요소의 크기를 조정할 수 있을 때 사용되는 커서입니다. 방향에 따라 다양한 유형이 있습니다.
    - **`n-resize`**: 위쪽 방향으로 크기 조정.
    - **`s-resize`**: 아래쪽 방향으로 크기 조정.
    - **`e-resize`**: 오른쪽으로 크기 조정.
    - **`w-resize`**: 왼쪽으로 크기 조정.
    - **`ne-resize`**: 오른쪽 위로 크기 조정.
    - **`nw-resize`**: 왼쪽 위로 크기 조정.
    - **`se-resize`**: 오른쪽 아래로 크기 조정.
    - **`sw-resize`**: 왼쪽 아래로 크기 조정.

사용자 지정 커서

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

url()을 사용하여 사용자 지정 커서를 지정할 수도 있습니다.

이 예에서 custom-cursor.png는 커서에 사용되는 이미지 파일입니다. 해당 이미지가 없으면 브라우저의 기본 커서가 auto로 표시됩니다.

요약

cursor 속성은 사용자가 요소 위에 있을 때 표시될 커서를 지정합니다.
용도에 따라 다양한 커서 스타일을 사용할 수 있으며 사용자 지정 커서도 설정할 수 있습니다.
대화형 요소 및 제한된 작업에 따라 적절한 커서 스타일을 선택하여 보다 사용자 친화적인 UI를 제공할 수 있습니다.

`pointer-events` 속성

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

pointer-events 속성은 마우스, 터치, 스타일러스와 같은 포인터 장치로부터 발생한 이벤트를 요소가 처리하는 방식을 제어하는 데 사용됩니다. 일반적으로 사용자가 요소를 클릭하거나 위에 마우스를 올릴 때 요소는 포인터 이벤트를 수신하지만, 이 속성을 사용하여 이 동작을 변경할 수 있습니다.

pointer-events-auto 클래스에서는 pointer-events 속성이 auto로 설정되어 있어 일반적인 클릭 및 호버 이벤트를 처리할 수 있습니다. 요소가 클릭 가능하므로 클릭하면 메시지가 표시됩니다.
pointer-events-auto 클래스에서는 pointer-events 속성이 none으로 설정되어 있어 요소가 포인터 이벤트를 수신하지 않습니다. cursor 속성이 pointer로 설정되어 있어도 마우스 커서는 변경되지 않으며, 아래에 있는 다른 요소가 클릭 가능해집니다.

값 유형

pointer-events 속성은 요소가 포인터 이벤트를 수신할지, 그리고 어떻게 수신할지를 지정합니다. 다음 값을 지정할 수 있습니다.

`auto`

auto는 기본값으로, 요소가 일반적으로 포인터 이벤트를 수신하도록 합니다.

`none`

none이 지정되면, 요소는 포인터 이벤트를 수신하지 않습니다. 요소는 클릭 및 호버와 같은 상호작용을 비활성화하지만, 아래에 있는 다른 요소가 포인터 이벤트를 수신할 수 있습니다.

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

이 값들은 주로 SVG 요소에 사용됩니다. 각 값은 요소의 특정 부분(예: 채우기, 선 등)이 포인터 이벤트에 반응할지 여부를 제어합니다. 일반 HTML 요소에서는 일반적으로 사용되지 않습니다.

사용 시 주요 포인트

pointer-events 속성을 사용하는 몇 가지 예가 있습니다.

비활성화하려는 요소 선택
- none 값은 버튼이나 링크 같은 요소를 일시적으로 비활성화하는 데 유용합니다.
중첩된 요소와 함께 사용
- position 속성이 absolute로 설정되거나 요소가 z-index 속성을 사용하여 계층화된 경우, 최상단 요소에 pointer-events를 none으로 설정하면 포인터 이벤트가 아래 요소로 전달됩니다.

`resize` 속성

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

resize 속성은 사용자가 요소를 어떤 방향으로 크기를 조정할 수 있는지 지정하는 CSS 속성입니다. 이 속성을 사용하면 요소를 드래그하여 수직 또는 수평으로 크기를 조정하거나 크기 조정을 완전히 비활성화할 수 있습니다.

이 예제에서는 resize 속성을 사용하여 텍스트 영역의 크기를 조정할 수 있는 방향이 지정됩니다.

**resize: both;**을 사용하면 요소의 크기를 수평과 수직으로 모두 조정할 수 있습니다.
**resize: horizontal;**을 사용하면 요소를 수평으로만 크기를 조정할 수 있습니다.
**resize: vertical;**을 사용하면 요소를 수직으로만 크기를 조정할 수 있습니다.
**resize: none;**을 사용하면 요소는 크기를 조정할 수 없습니다.

값 유형

resize 속성에는 요소를 조정할 수 있는 방향을 지정하는 값이 할당됩니다. 다음 값을 지정할 수 있습니다.

`none`

none을 지정하면 요소의 크기 조정이 비활성화됩니다. 이 값은 기본값입니다.

`both`

both를 지정하면 요소를 수평 및 수직 방향으로 모두 크기를 조정할 수 있습니다.

`horizontal`

horizontal을 지정하면 요소를 수평 방향(너비)으로만 크기를 조정할 수 있습니다.

`vertical`

vertical을 지정하면 요소를 수직 방향(높이)으로만 크기를 조정할 수 있습니다.

`inherit`

inherit를 지정하면 요소가 부모로부터 resize 속성 값을 상속받습니다.

노트

요소를 크기 조정 가능하게 만들려면 resize 속성과 함께 overflow 속성을 설정해야 합니다. 크기 조정 가능한 요소는 스크롤바가 필요할 수 있으며, 일반적으로 overflow: auto를 설정합니다.
크기 조정은 일반적으로 div 및 textarea와 같은 블록 요소에서 사용됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

3D 애니메이션과 관련된 CSS 속성

사용자 인터페이스와 관련된 CSS 속성

YouTube Video

미리보기를 위한 HTML

사용자 인터페이스 관련

content 속성

content 속성의 값

사용 시 주의사항

예제

cursor 속성

주요 커서 유형

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

사용자 지정 커서

요약

pointer-events 속성

값 유형

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

사용 시 주요 포인트

resize 속성

값 유형

none

both

horizontal

vertical

inherit

노트

YouTube Video

`content` 속성

`content` 속성의 값

`cursor` 속성

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

`pointer-events` 속성

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

`resize` 속성

`none`

`both`

`horizontal`

`vertical`

`inherit`