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

사용자 인터페이스와 관련된 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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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 속성은 다음 값을 가질 수 있습니다:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • 텍스트
    • 문자열을 따옴표("")로 직접 감싸서 텍스트를 추가할 수 있습니다.
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • 이미지
    • url() 함수를 사용하여 이미지를 삽입할 수 있습니다.
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • 카운터
    • counter() 함수를 사용하여 카운터를 표시할 수 있습니다.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • 속성
    • attr() 함수를 사용하면 HTML 요소의 속성 값을 표시할 수 있습니다. 예를 들어, title 속성을 표시할 수 있습니다.
1/* None */
2.content-none::before {
3    content: none;
4}
  • 없음
    • 콘텐츠를 표시하지 않도록 지정합니다. 이는 기본 상태입니다.

사용 시 주의사항

content 속성을 사용할 때 다음 사항을 참고하세요:.

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

cursor 속성

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

주요 커서 유형

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

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
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 속성을 사용하는 몇 가지 예가 있습니다.

  1. 비활성화하려는 요소 선택

    • none 값은 버튼이나 링크 같은 요소를 일시적으로 비활성화하는 데 유용합니다.

  2. 중첩된 요소와 함께 사용

    • 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’ 속성은 요소를 어느 방향으로 크기 조절할 수 있는지 지정합니다. 다음 값을 지정할 수 있습니다.
both
  • both를 지정하면 요소를 수평 및 수직 방향으로 모두 크기를 조정할 수 있습니다.
horizontal
  • horizontal을 지정하면 요소를 수평 방향(너비)으로만 크기를 조정할 수 있습니다.
vertical
  • vertical을 지정하면 요소를 수직 방향(높이)으로만 크기를 조정할 수 있습니다.
none
  • none을 지정하면 요소의 크기 조정이 비활성화됩니다. 이 값은 기본값입니다.
inherit
  • inherit를 지정하면 요소가 부모로부터 resize 속성 값을 상속받습니다.

노트

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

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

YouTube Video

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