코드 표시 및 인용을 위한 CSS 속성
이 글은 코드 표시 및 인용과 관련된 CSS 속성을 설명합니다.
코드 표시와 인용문과 관련된 CSS 속성, 예를 들어 quotes와 user-select에 대해 배울 수 있습니다. 사용 사례와 작성 방법도 포함됩니다.
YouTube Video
미리보기를 위한 HTML
css-code-quotation.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-code-quotation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Code Display And Quotations</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Code Display And Quotations Related Properties</h2>
20 </header>
21 <article>
22 <h3>white-space</h3>
23 <section>
24 <header><h4>white-space: normal</h4></header>
25 <section class="sample-view">
26 <p class="white-space-normal">This is an example with multiple spaces. The spaces will be collapsed.</p>
27 </section>
28 <header><h4>white-space: nowrap</h4></header>
29 <section class="sample-view">
30 <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
31 </section>
32 <header><h4>white-space: pre</h4></header>
33 <section class="sample-view">
34<p class="white-space-pre">This is an
35 example with multiple
36 spaces and
37 line breaks.</p>
38 </section>
39 <header><h4>white-space: pre-wrap</h4></header>
40 <section class="sample-view">
41<p class="white-space-pre-wrap">This is an
42 example with multiple
43 spaces and
44 line breaks. The text will wrap when it reaches the edge.</p>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>overflow-wrap</h3>
50 <section>
51 <header><h4>overflow-wrap: normal</h4></header>
52 <section class="sample-view">
53 <section class="overflow-wrap-example">
54 <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
55 </section>
56 </section>
57 <header><h4>overflow-wrap: break-word</h4></header>
58 <section class="sample-view">
59 <section class="overflow-wrap-example">
60 <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
61 </section>
62 </section>
63 </section>
64 </article>
65 <article>
66 <h3>quotes</h3>
67 <section>
68 <header><h4>quotes: "(" ")"</h4></header>
69 <section class="sample-view">
70 <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
71 </section>
72 <header><h4>quotes: "(" ")" "[" "]"</h4></header>
73 <section class="sample-view">
74 <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
75 </section>
76 </section>
77 </article>
78 <article>
79 <h3>user-select</h3>
80 <section>
81 <header><h4>user-select: auto</h4></header>
82 <section class="sample-view">
83 <p class="select-auto">This text is selectable.</p>
84 </section>
85 <header><h4>user-select: none</h4></header>
86 <section class="sample-view">
87 <p class="select-none">This text cannot be selected.</p>
88 </section>
89 <header><h4>user-select: all</h4></header>
90 <section class="sample-view">
91 <p class="select-all">All text will be selected at once.</p>
92 </section>
93 </section>
94 </article>
95 <article>
96 <h3>tab-size</h3>
97 <section>
98 <header><h4>tab-size: initial</h4></header>
99 <section class="sample-view">
100<pre>
101function example() {
102 console.log("Initial Tab size is 8");
103}
104</pre>
105 </section>
106 <section>
107 <header><h4>tab-size: 2</h4></header>
108 <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111 console.log("Tab size is set to 2");
112}
113</pre>
114 </section>
115 <header><h4>tab-size: 4</h4></header>
116 <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119 console.log("Tab size is set to 4");
120}
121</pre>
122 </section>
123 <header><h4>tab-size: 20px</h4></header>
124 <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127 console.log("Tab size is set to 20px");
128}
129</pre>
130 </section>
131 </section>
132 </article>
133 <article>
134 <h3>text-indent</h3>
135 <section>
136 <header><h4>text-indent: 0</h4></header>
137 <section class="sample-view">
138 <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139 </section>
140 <header><h4>text-indent: 20px</h4></header>
141 <section class="sample-view">
142 <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143 </section>
144 <header><h4>text-indent: -10px</h4></header>
145 <section class="sample-view">
146 <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147 </section>
148 <header><h4>text-indent: 10%</h4></header>
149 <section class="sample-view">
150 <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151 </section>
152 <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153 <section class="sample-view">
154 <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155 </section>
156 </section>
157 </article>
158
159 </main>
160</body>
161</html>코드 표시 및 인용을 위한 CSS 속성
white-space 속성
1.white-space-normal {
2 white-space: normal;
3 border: 1px solid black;
4 padding: 10px;
5 width: 300px;
6}
7
8.white-space-nowrap {
9 white-space: nowrap;
10 border: 1px solid black;
11 padding: 10px;
12 width: 300px;
13}
14
15.white-space-pre {
16 white-space: pre;
17 border: 1px solid black;
18 padding: 10px;
19 width: 300px;
20}
21
22.white-space-pre-wrap {
23 white-space: pre-wrap;
24 border: 1px solid black;
25 padding: 10px;
26 width: 300px;
27}white-space 속성은 요소 내부의 공백 문자와 줄 바꿈을 처리하는 방식을 지정하는 CSS 속성입니다. 기본적으로 HTML은 여러 개의 공백을 하나의 공백으로 처리하지만, white-space 속성을 사용하면 이 동작을 수정할 수 있습니다.
white-space의 주요 값
- **
normal**은 기본값으로, 여러 개의 공백이 하나로 축소되며 줄이 자동으로 바뀝니다. - **
nowrap**은 공백을 하나로 축소하지만 줄 바꿈을 방지합니다. 내용이 한 줄로 표시됩니다. - **
pre**는 공백과 줄 바꿈을 원래 상태 그대로 유지합니다. 줄 바꿈이 발생하지 않습니다. - **
pre-wrap**은 공백과 줄 바꿈을 유지하면서 줄 바꿈도 허용합니다. - **
pre-line**은 공백을 축소하지만 줄 바꿈을 유지하며 줄 바꿈을 허용합니다. - **
break-spaces**는 공백과 줄 바꿈을 유지하면서 긴 단어나 공백에서도 줄 바꿈을 허용합니다.
overflow-wrap 속성
1.overflow-wrap-example {
2 width: 200px;
3 border: 1px solid #000;
4}
5
6.overflow-wrap-normal {
7 overflow-wrap: normal;
8}
9
10.overflow-wrap-break-word {
11 overflow-wrap: break-word;
12}overflow-wrap 속성은 이전에는 word-wrap으로 알려졌으며, 단어가 컨테이너의 너비를 초과할 경우 이를 처리하는 방식을 정의합니다. 이 속성을 사용하여 단어가 올바르게 줄 바뀌도록 해 텍스트가 넘치거나 레이아웃이 깨지는 것을 방지할 수 있습니다.
예를 들어, normal 값에서는 긴 단어가 컨테이너를 넘어 수평 스크롤이 발생할 수 있지만, break-word 값은 긴 단어를 강제로 줄 바꾸기합니다.
속성 값
overflow-wrap는 주로 두 가지 값을 가집니다:.
-
normalnormal은 기본값으로 브라우저가 기본 단어 줄 바꿈 규칙을 따릅니다. 일반적으로 단어는 공백이나 하이픈과 같은 줄 바꿈 가능한 지점에서만 줄이 바뀝니다. 단어가 너무 길면 컨테이너 너비를 초과하여 레이아웃이 깨질 수 있습니다. -
break-wordbreak-word는 필요한 경우 강제로 줄 바꾸기를 하여 단어 길이와 상관없이 텍스트를 다음 줄로 이동시킵니다. 길고 긴 단어로 인해 컨테이너 레이아웃이 깨지는 것을 방지하는 데 도움이 됩니다.break-word가 지정되면, 단어는 화면 너비에 맞도록 공백이나 하이픈이 없는 위치에서도 강제로 줄바꿈됩니다. 이는 특히 URL이나 매우 긴 단어에 유용합니다.
overflow-wrap와 다른 속성의 차이점
overflow-wrap와 유사한 속성에는 word-break와 white-space가 포함됩니다.
word-break와의 차이점
word-break는 단어 전체를 처리하는 방식을 정의하는 반면, overflow-wrap는 단어가 컨테이너 너비를 초과할 때만 줄바꿈을 유발합니다. 예를 들어, word-break: break-all;은 단어가 길지 않아도 어느 위치에서나 단어를 분리하지만, overflow-wrap는 단어가 컨테이너를 초과할 때만 줄바꿈을 수행합니다.
white-space와의 차이점
white-space 속성은 텍스트 전체에서 줄바꿈 및 공백이 처리되는 방식을 제어합니다. overflow-wrap와 달리, white-space는 줄바꿈과 공백을 유지할지 여부를 정의하지만 단어 줄바꿈에 직접적인 영향을 미치지는 않습니다.
예를 들어, white-space: nowrap;은 텍스트 전체를 줄바꿈 없이 한 줄로 유지하도록 보장합니다. 반면에, overflow-wrap는 텍스트 줄바꿈을 제어합니다.
실제 사용 사례
overflow-wrap는 특히 다음과 같은 상황에서 유용합니다:.
- URL 표시: 긴 URL을 표시할 때 레이아웃 문제를 방지합니다.
- 기술 용어: 연속된 영어 단어나 기술 용어가 컨테이너 너비를 초과하는 경우를 처리합니다.
- 반응형 디자인: 작은 화면에서도 긴 텍스트가 레이아웃을 깨지 않도록 보장합니다.
quotes 속성
1q {
2 quotes: "(" ")" "[" "]";
3}quotes 속성은 따옴표를 사용자 정의하는 데 사용됩니다. 보통 <blockquote> 또는 <q> 요소의 내용을 감쌀 때 따옴표가 자동으로 삽입되지만, quotes 속성을 사용하면 사용자 정의 따옴표를 지정할 수 있습니다.
이 예제에서는 괄호 ((, ))가 바깥쪽 따옴표로 사용됩니다. 또한, 중첩된 따옴표는 대괄호 ([, ])로 표시됩니다.
문법
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}quotes 속성은 다음과 같은 값으로 지정할 수 있습니다:.
none: 따옴표가 표시되지 않습니다.- 따옴표 시리즈: 여는 따옴표와 닫는 따옴표를 지정합니다. 첫 번째 세트는 바깥쪽 따옴표를 나타내며, 이후의 세트들은 중첩된 따옴표용입니다.
quotes의 주요 사항
quotes 속성은 텍스트 인용에 사용되는 따옴표를 사용자 정의하는 데 유용한 속성입니다. 디자인과 언어에 따라 적절한 따옴표를 설정하면 더욱 세련된 페이지 표현을 구현할 수 있습니다. quotes 속성을 사용하면 다음과 같은 이점이 있습니다:.
- 따옴표 사용자 정의: 기본 따옴표 모양을 변경하거나 특정 디자인에 맞춘 따옴표를 설정할 수 있습니다.
- 중첩된 인용 지원: 중첩된 인용을 위해 서로 다른 따옴표 세트를 적용할 수 있습니다.
- 국가와 언어에 따른 사용자 정의 가능: 언어 또는 국가에 따라 다른 스타일의 따옴표를 쉽게 적용할 수 있어 국제적인 웹사이트에 유용합니다.
user-select 속성
1.select-auto {
2 user-select: auto;
3}
4
5.select-none {
6 user-select: none;
7}
8
9.select-all {
10 user-select: all;
11}-
user-select속성은 사용자가 텍스트를 선택할 수 있는지 제어하는 데 사용되는 CSS 속성입니다. 이 속성을 사용하여 특정 요소 또는 전체 페이지에서 텍스트 복사를 방지하거나 반대로 선택 가능하게 할 수 있습니다.user-select속성에all을 지정하면 전체 요소가 한 번에 선택됩니다. 예를 들어, 사용자가 텍스트 필드 또는 단락을 클릭하면 전체 요소가 한 번에 선택됩니다. -
소스 코드를 한꺼번에 선택하는 데에도 사용할 수 있습니다.
-
이 예에서는 첫 번째 단락의 텍스트는 선택할 수 있지만, 두 번째 단락의 텍스트는 선택할 수 없습니다.
select-all클래스에서user-select속성은all로 설정되어 전체 요소를 한 번에 선택할 수 있습니다.
문법
1element {
2 user-select: auto | none | text | all | contain;
3}user-select 속성은 다음 값으로 지정할 수 있습니다:.
auto: 브라우저의 기본 동작을 사용합니다. 대부분의 요소에서 텍스트 선택이 허용되지만, 버튼이나 링크와 같은 일부 상호작용 요소에서는 제한될 수 있습니다.none: 텍스트 선택이 완전히 비활성화됩니다. 사용자는 해당 요소 안의 텍스트를 선택할 수 없습니다.text: 요소 내의 텍스트만 선택할 수 있습니다.all: 전체 요소가 한 번에 선택됩니다. 일부를 선택하는 대신 전체 요소가 하나로 선택됩니다.contain: 일부 브라우저만 지원합니다. 클릭된 위치의 요소만 선택할 수 있습니다.
지원 브라우저
user-select 속성은 대부분의 최신 브라우저에서 지원됩니다. 하지만, 일부 브라우저는 -webkit-user-select와 같은 공급 업체 별 접두사가 필요할 수 있습니다.
- Chrome: 지원됨
- Firefox: 지원됨
- Safari: 지원됨 (
-webkit-접두사 필요) - Edge: 지원됨
- Internet Explorer: 지원하지 않음
주요 사용 사례
user-select 속성은 다음과 같은 장점을 제공합니다.
- UI 요소: 클릭 또는 드래그 작업에 방해되지 않도록 텍스트 선택 비활성화.
- 텍스트 복사 방지: 특정 요소에서 텍스트 선택 및 복사 방지.
- 폼 및 상호작용 요소: 사용자 경험을 향상시키기 위해 텍스트 선택이 불필요한 상호작용 요소에 적용.
요약
user-select 속성은 웹페이지에서 텍스트 선택을 유연하게 제어할 수 있는 유용한 CSS 속성입니다. 불필요한 텍스트를 실수로 선택하지 않도록 방지하거나, 모든 텍스트를 한 번에 선택할 수 있도록 하여 다양한 상호작용을 지원할 수 있습니다.
tab-size 속성
1.tab-size-2 {
2 tab-size: 2;
3}
4
5.tab-size-4 {
6 tab-size: 4;
7}
8
9.tab-size-20px {
10 tab-size: 20px;
11}tab-size속성은 탭 문자에 대한 간격을 사용자 정의하는 데 사용됩니다. 기본적으로 탭 너비는 보통 8칸으로 설정되지만,tab-size속성을 사용하여 원하는 값으로 조정이 가능합니다.
문법
1element {
2 tab-size: length | number;
3}tab-size 속성은 다음과 같은 유형의 값을 받을 수 있습니다.
number: 문자 개수로 탭 문자의 너비를 지정합니다. 정수 또는 소수를 지정할 수 있습니다.length: 길이 단위(예: px, em)를 사용하여 탭 문자의 너비를 지정합니다.
노트
-
tab-size속성은 보통 고정폭 글꼴과 함께 사용됩니다. 비례 글꼴과 함께 사용할 경우, 탭 너비가 고르지 않을 수 있습니다. -
문자 개수를 지정할 때, 다양한 장치에서의 스케일링에 유의해야 합니다.
요약
tab-size 속성을 사용하면 코드나 탭 문자를 표시할 때 유연성이 향상됩니다. 개발자로서 탭 너비를 적절히 설정하면 코드 가독성과 디자인 일관성을 보장할 수 있습니다.
text-indent 속성
1p.text-indent-0 {
2 text-indent: 0;
3}
4
5p.text-indent-20px {
6 text-indent: 20px;
7}
8
9p.text-indent--10px {
10 text-indent: -10px;
11}
12
13p.text-indent-10percent {
14 text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18 text-indent: -20px;
19 margin-left: 20px;
20}text-indent속성은 블록 요소의 첫 번째 줄 텍스트를 지정된 거리만큼 들여쓰는 데 사용됩니다. 이 속성을 사용하면 단락의 첫 번째 줄만 스타일링할 수 있습니다.
문법
1element {
2 text-indent: length | percentage;
3}text-indent 속성은 다음과 같은 유형의 값을 받을 수 있습니다.
length: 길이 단위(예: px, em)를 사용하여 들여쓰기를 지정합니다.percentage: 컨테이너 요소의 너비를 기준으로 백분율로 들여쓰기를 지정합니다.
노트
text-indent속성은 블록 요소에만 적용됩니다. 인라인 요소에는 효과가 없습니다.
요약
text-indent 속성은 가독성 있는 텍스트 디자인을 만드는 데 있어 간단하지만 강력한 도구입니다. 기본 사항을 숙지하고 고급 사용 사례와 고려 사항을 이해하면 스타일링을 더 효과적으로 사용할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.