개발 공부 기록하기

DAY 10. 텍스트 관련 스타일(3): text-shadow, text-transform, letter-spacing, word-spacing 본문

프밍/CSS

DAY 10. 텍스트 관련 스타일(3): text-shadow, text-transform, letter-spacing, word-spacing

태영(泰伶) 2022. 11. 3. 22:56

1. text-shadow: 텍스트에 그림자 효과 넣기

     text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상> ;

 

속성값 설명
<가로 거리> '텍스트~그림자'의 가로 거리. 필수로 작성해야 하는 속성.
(+) 값: 텍스트의 오른쪽으로 그림자 생김.
(-) 값: 텍스트의 왼쪽으로 그림자 생김.
<세로 거리> '텍스트~그림자'의 세로 거리. 필수로 작성해야 하는 속성.
(+) 값: 텍스트의 아래쪽으로 그림자 생김.
(-) 값: 텍스트의 위쪽으로 그림자 생김.
<번짐 정도> 그림자가 번지는 정도.
(+) 값: 그림자가 모든 방향으로 퍼져나가서 그림자가 크게 표시됨.
(-) 값: 그림자가 모든 방향으로 축소되어 보임.
default 값은 0임.
<색상> 그림자 색상 지정.
한 가지 색상으로만 지정할 수도 있고, 공백으로 구분해 여러 색상을 지정할 수도 있음.
default 값은 현재 글자색임.

 

 

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>text-shadow</title>
         <style>
            h1 {
               font-size: 60px;
            }
            .shadow1 {
               color: red;
               text-shadow: 1px 1px black;		/* 가로 거리, 세로 거리, 색상 지정 */
            }
            .shadow2 {
               text-shadow: 5px 5px 3px #ffa500;	/* 가로 거리, 세로 거리, 번짐 정도, 색상 지정 */
            }
            .shadow3 {
               color: #fff;
               text-shadow: 7px -7px 20px #000;		/* 가로 거리, 세로 거리, 번짐 정도, 색상 지정 */
            }
         </style>
      </head>
      <body>
         <h1 class="shadow1">HTML</h1>
         <h1 class="shadow2">CSS</h1>
         <h1 class="shadow3">자바스크립트</h1>
      </body>
   </html>

↓

 

 

? <색상>을 여러가지 색으로 지정하면 어떻게 되지??

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>그림자가 여러 색상이라면?</title>
         <style>
            h1 {
               font-size: 60px;
            }
            .sunset {
               line-height: 5.0;
               text-shadow: 5px -5px 20px #fff8bc,
                            10px -10px 40px #ffe898,
                            15px -15px 60px #ff87b2,
                            20px -20px 80px #f65a83;
            }
         </style>
      </head>
      <body>
         <h1 class="sunset">The flowers that blooms late is the most rare and beautiful of all.</h1>
      </body>
   </html>

↓

각 그림자 색상별로 거리를 다르게 지정했다..!! 같은 거리로 지정하면 얄궂은 색으로 섞여 나온다ㅠㅠ

 

 

위의 코드에서 그림자 색을 빨주노초파남보로 바꿔봤다.

장난.. 재밌다!😜

 

 

 

 

2. text-transform: 텍스트 일부 또는 전체를 대문자/소문자로 바꾸기

     영문 대소문자를 원하는 대로 바꿀 수 있다..!

     

속성값 설명
capitalize 첫 번째 글자를 대문자로 변환.
두 번째 글자부터는 작성한 그대로 출력됨.
uppercase 모든 글자를 대문자로 변환.
구성된 글자가 대문자든 소문자든 모두 대문자로 바꿔줌.
lowercase 모든 글자를 소문자로 변환.
구성된 글자가 대문자든 소문자든 모두 소문자로 바꿔줌.
full-width 가능한 한 모든 문자를 *전각 문자로 변환.

    * 전각 문자: 가로와 세로의 길이 비율이 같은 글자.
       cf, 반각 문자: 가로와 세로의 길이 비율이 1:2인 글자.

 

 

예제 2.

책에 있는 예제를 약간 응용해보았다. (대문자, 소문자 대중없이 나열)

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>text-transform</title>
         <style>
            .trans1 {
               text-transform: capitalize;
            }
            .trans2 {
               text-transform: uppercase;
            }
            .trans3 {
               text-transform: lowercase;
            }
         </style>
      </head>
      <body>
         <p class="trans1">hTml</p>
         <p class="trans2">cSs</p>
         <p class="trans3">JaVaScRiPt</p>
      </body>
   </html>

↓

 

     full-width는 적절한 예시를 찾을 수가 없었다..

 

 

 

3. letter-spacing: 글자와 글자 사이의 간격을 조절하기

     px, em과 같은 절대적인 값으로 간격을 조절한다.

 

 

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>letter-spacing</title>
         <style>
            p {
               font-size: 30px;
               color: #9e7676;
            }
            .Lspacing1 {
               letter-spacing:-0.5em;
            }
            .Lspacing2 {
               letter-spacing:0.5em;
            }
            .Lspacing3 {
               letter-spacing:-5px;
            }
            .Lspacing4 {
               letter-spacing:5px;
            }
            .Lspacing5 {
               letter-spacing:-0.5cm;
            }
            .Lspacing6 {
               letter-spacing:0.5cm;
            }
         </style>
      </head>
      <body>
         <p class="Lspacing1">대기만성</p>
         <p>대기만성</p>
         <p class="Lspacing2">대기만성</p>
         <br />
         <p class="Lspacing3">대기만성</p>
         <p>대기만성</p>
         <p class="Lspacing4">대기만성</p>
         <br />
         <p class="Lspacing5">대기만성</p>
         <p>대기만성</p>
         <p class="Lspacing6">대기만성</p>
      </body>
   </html>

↓

 

4. word-spacing: 단어와 단어 사이의 간격을 조절하기

     px, em, cm과 같은 절대적인 값으로 간격을 조절한다.

 

 

 

예제 4.

예제 3과 비슷한 예제로, letter-spacing을 word-spacing으로만 바꾸었다.

단어 간 간격을 보기 위해 일부러 문장으로, dramatic한 수치로 바꾸어 test했다.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>word-spacing</title>
         <style>
            p {
               font-size: 30px;
               color: #4e6c50;
            }
            .Wspacing1 {
               word-spacing:-2em;
            }
            .Wspacing2 {
               word-spacing:2em;
            }
            .Wspacing3 {
               word-spacing:-15px;
            }
            .Wspacing4 {
               word-spacing:15px;
            }
            .Wspacing5 {
               word-spacing:-1cm;
            }
            .Wspacing6 {
               word-spacing:1cm;
            }
         </style>
      </head>
      <body>
         <p class="Wspacing1">The flower that blooms late is the most rare and beautiful of all.</p>
         <p>The flower that blooms late is the most rare and beautiful of all.</p>
         <p class="Wspacing2">The flower that blooms late is the most rare and beautiful of all.</p>
         <br />
         <p class="Wspacing3">The flower that blooms late is the most rare and beautiful of all.</p>
         <p>The flower that blooms late is the most rare and beautiful of all.</p>
         <p class="Wspacing4">The flower that blooms late is the most rare and beautiful of all.</p>
         <br />
         <p class="Wspacing5">The flower that blooms late is the most rare and beautiful of all.</p>
         <p>The flower that blooms late is the most rare and beautiful of all.</p>
         <p class="Wspacing6">The flower that blooms late is the most rare and beautiful of all.</p>
      </body>
   </html>

↓

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 11. 목록 관련 스타일(2): list-style-image, list-style-position  (0) 2022.11.05
DAY 10. 목록 관련 스타일(1): list-style-type  (0) 2022.11.03
DAY 10. 텍스트 관련 스타일(2): text-align, line-height, text-decoration  (0) 2022.11.03
DAY 9. 텍스트 관련 스타일(1): color  (0) 2022.11.03
DAY 9. Google Font  (0) 2022.11.02
'프밍/CSS' Related Articles more
Comments