본문 바로가기
CSS

CSS-Font & Text 2

by Hrin_0820 2020. 8. 11.

1. letter-spacing : 글자 간의 각격 (자간) / word-spacing : 단어 간의 간격

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>letter-spacing, word-spacing</title>
    <style>
        p.loose{letter-spacing: 3px;}
        p.tight{letter-spacing: -1px}
        p.word{word-spacing: 8px}
    </style>
</head>
<body>
    <p>기본값 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum! </p>
    <p class="loose">글자 간의 간격 넓게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum!</p>
    <p class="tight">글자 간의 간격 좁게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum! </p>
    <p class="word">단어 간의 간격 넓게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum! </p>
</body>
</html>
letter-spacing, word-spacing

기본값 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum!

글자 간의 간격 넓게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum!

글자 간의 간격 좁게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum!

단어 간의 간격 넓게 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus aut necessitatibus officiis quas expedita saepe, omnis deserunt iure laborum fuga ipsum dolorum!

2. text-decoration : 글자에 밑줄, 윗줄, 가운데줄을 치거나 링크 태그 줄 없애줌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
    <style>
        a.a{text-decoration: none}
        p.over{text-decoration: overline}
        p.through{text-decoration: line-through}
        p.under{text-decoration: underline}
    </style>
</head>
<body>
    <a href="#" class="a">text-decoration : none</a>
    <p class="over">text-decoration : overline</p>
    <p class="through">text-decoration : line-through</p>
    <p class="under">text-decoration : underline</p>
</body>
</html>
text-decoration
text-decoration : none

text-decoration : overline

text-decoration : line-through

text-decoration : underline

3. text-shadow : 글자에 그림자를 주는 속성

text-shadow: 가로거리 | 세로거리 | 흐릿하게 퍼지는 정도 | 그림자의 색 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-shadow</title>
    <style>
        h2.shadow1{font: bold 30px "Arial"; 
            text-shadow: 4px 4px rgba(100,100,0,0.6)
        }
        h2.shadow2{font: bold 30px "Arial"; color: #135;
            text-shadow: 2px 2px #246, 
                            3px 3px #357, 
                            4px 4px #468, 
                            5px 5px #579, 
                            6px 6px #68a, 
                            7px 7px #79b, 
                            8px 8px #8ac;
        }
        p.shadow3{text-shadow: 2px 3px 5px rgba(0,0,0,0.4)}
    </style>
</head>
<body>
    <h2 class="shadow1">SHADOW EFFECT</h2>
    <h2 class="shadow2">TEXT SHADOW</h2>
    <p class="shadow3">IE9는 text-shodow 속성을 지원하지 않는다.</p>
</body>
</html>
text-shadow

SHADOW EFFECT

TEXT SHADOW

IE9는 text-shodow 속성을 지원하지 않는다.

4. color, 색상 코드

  속성 값 설명
색상명 color: orange 글자를 오렌지 색으로 표현
background-color: beige 배경을 베이지 색으로 표현
border-color: tomato 테두리를 토마토 색으로 표현
HEX값
red, green, blue
세가지 색을
16진수로 표현		 color: #000000
color: #000		 red:0, green:0, blue:0 색상으로 표현 (black)
color: #ffffff
color: #fff		 red:255, green:255, blue:255 색상으로 표현 (white)
color: #abcdef red:ab, green:cd, blue:ef 색상으로 표현
RGB값
red, green, blue
세가지 색을
10진수로 표현		 color: rgb(0,0,0) red:0, green:0, blue:0 색상으로 표현 (black)
color: rgb(255,255,255) red:255, green:255, blue:255 색상으로 표현 (white)
color: rgb(255,128,0) red:255, green:128, blue:0 색상으로 표현

HSL값
hue, saturation, lightness
형태로 표현
 color: hsl(0, 0%, 0%) hue:0, saturation:0%, lightness:0% 색상으로 표현 (black)
color: hsl(0, 100%, 50%) hue:0, saturation:100%, lightness:50% 색상으로 표현 (red)
color: hsl(0, 0%, 100%) hue:0, saturation:0%, lightness:200% 색상으로 표현 (white)
alpha
투명도

 background-color: 
rgba(255,0,0,0.5)		 red:255, green:0, blue:0, alpha:50% 색상으로 표현 (반투명red)
background-color:
hsla(0, 100%, 50%, 0.5)		 hue:0, saturation:100%, lightness:50%, alpha:50% 색상으로 표현 (반투명red) 
<body>
    <label for=" color">color 값 확인하기 </label><input type="color" id="color">
    <h2 style="background-color:red">Red background-color</h2>
    <h2 style="background-color:#00FF00">Green(#00FF00) background-color</h2>
    <h2 style="background-color:rgb(0,0,255);color:rgb(255,255,255)">
    Blue(rgb(0,0,255)) background-color ＆ white(rgb(255,255,255)) text color</h2>
    <h2 style="background-color:hsl(39,100%,50%)">Orange(hsl(39,100%,50%)) background-color</h2>
    <h2 style="background-color:yellow">Yellow(#FFFF00, rgb(255, 255, 0)) background-color</h2>
    <h2 style="background-color:cyan">Cyan(#00FFFF, rgb(0,255,255)) background-color</h2>
    <h2 style="background-color:#000; color: #fff">Black(#000) background-color ＆ white(#fff) text color</h2>
</body>
color

Red background-color

Green(#00FF00) background-color

Blue(rgb(0,0,255)) background-color ＆ white(rgb(255,255,255)) text color

Orange(hsl(39,100%,50%)) background-color

Yellow(#FFFF00, rgb(255, 255, 0)) background-color

Cyan(#00FFFF, rgb(0,255,255)) background-color

Black(#000) background-color ＆ white(#fff) text color


저작자표시

'CSS' 카테고리의 다른 글

CSS-display, visibility, opacity 속성  (0) 2020.08.13
CSS-문단(paragraph) 관련 스타일  (0) 2020.08.12
CSS-Font & Text  (0) 2020.08.10
CSS-선택자(selector)4 : 가상요소 선택자  (0) 2020.08.08
CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자  (0) 2020.08.07

관련글

댓글

티스토리툴바