Text CSS 속성
** color : 텍스트 색상
letter-spacing : 자간, 문자 단위 간격
word-spacking : 단어 사이 간격 (띄어쓰기 간격)
** text-align : 텍스트 정렬(left, right, center)
** line-height : 줄간 (줄과 줄 사이의 간격)
* text-indent : 첫 줄 들여쓰기 (상품목록이나 매거진 사이트에서 들여쓰기가 되어 있는 상태가 많다 ; 다른 곳에서는 잘 쓰지 않음)
* text-decoration : 텍스트의 여러 효과(밑줄) 설정하거나 제거
text-transform : 영문자 대소문자 결정
font-variant : 소문자를 더 작은 크기의 대문자로 변환
* text-shadow : 텍스트의 그림자, 번짐 효과 등을 결정
* white-space : 띄어쓰기, 줄바꿈등을 어떻게 할 것인지 결정
* text-overeflow : 텍스트가 기준(박스)를 벗어난 경우 어떻게 처리할 것인지
** font-size : 텍스트 크기 설정
** font-weight : 텍스트 굵기 설정
** font-family : 텍스트 글꼴 설정
color 표기법
1. 색상 이름 표현
red, white, green, blue, black, ...
2. rgb 색상값으로 표현
(o~255)
rgb(0~255, 0~255, 0~255)
rgba(0~255, 0~255, 0~255, 0~1)
--
알파(투명도)
ex. rgb(255, 0, 0) // 빨강
rgb(255, 255, 255) //하양
rgb(0, 0, 0) // 검정
rgb(0, 255, 0) // 초록
rgb(0, 0, 255) // 파랑
3. 16진수 표현법
(00~ff)
RGB코드와 원리가 같음 00(검정). ff(빨강, 초록, 파랑)
#000000
= #000 // 자리수가 같은 경우 축약 가능 ; 검정
ex. #00f // 파랑
#fff // 흰색
#fff // = 흰색
#000 // 검정
0으로 갈수록 검정
255 || ff로 갈수록 색상이 입혀짐
그라데이션 && 투명도 표현은 RGB가 더 편리함
ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border: 1px solid #000; /*테두리*/
padding: 10px; /*안쪽 여백*/
margin: 20px; /*바깥 여백*/
}
#letter {
letter-spacing: 5px;
}
#word {
word-spacing: 32px;
}
#left {
text-align: left;
}
#center {
text-align: center;
}
#right {
text-align: right;
}
#justify {
text-align: justify; /*균등정렬*/
}
#indent1 {
text-align: aligh 20px;
}
#indent2 {
text-indent: 10%;
}
#small {
line-height: 0.7;
}
#big {
line-height: 3;
}
#px {
line-height: 16px;
}
#per {
line-height: 0%;
}
.decoration {
text-decoration: underline; /*밑줄*/
/*default: none, line-through, overline*/
}
#decoration {
text-transform: uppercase;
}
#transform {
text-transform: uppercase; /*대문자*/
/*lowercase, capitalize*/
}
.content {
border: 3px dashed #f00;
width: 600px;
padding: 10%;
white-space: nowrap;
/*default: wrap ; 줄바꿈을 하지 않겠다
pre ; 사용자가 입력한 줄바꿈이나 띄어쓰기를 그대로 반영하겠다 */
text-overflow: clip;
}
/* text-shadow: x, y, blur(번짐, 생략가능), color*/
#shadow1 {
text-shadow: 10px 10px; /* x축으로 10픽셀만큼 y축으로 10픽셀만큼*/
color: deepskyblue;
}
#shadow2 {
text-shadow: 10px 10px 5px;
}
#shadow3 {
text-shadow: 10px 10px 5px #f00;
}
#shadow4 {
color: #fff;
text-shadow: 10px -10px 5px #000;
-webkit-text-stroke: 1px #333;
}
</style>
</head>
<body>
<h4>align</h4>
<p id="letter">
Lorem ; 랜덤 문자 Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolorum debitis hic, delectus dolores asperiores dolore nemo.
Pariatur adipisci nihil natus voluptatum maxime possimus minus soluta
magni doloribus omnis, vero beatae.
</p>
<p id="word">
Lorem ; 랜덤 문자 Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolorum debitis hic, delectus dolores asperiores dolore nemo.
Pariatur adipisci nihil natus voluptatum maxime possimus minus soluta
magni doloribus omnis, vero beatae.
</p>
<p id="left">
Lorem ; 랜덤 문자 Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolorum debitis hic, delectus dolores asperiores dolore nemo.
Pariatur adipisci nihil natus voluptatum maxime possimus minus soluta
magni doloribus omnis, vero beatae.
</p>
<p id="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ullam
recusandae iste facere, aliquam, quisquam porro voluptatum ut et nobis a!
Perspiciatis ipsa, rerum ut nostrum dicta error praesentium nemo!
</p>
<p id="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam,
possimus laudantium provident fugiat illo sequi voluptas deserunt eius
distinctio rem et officiis corporis. Optio, doloremque voluptates sequi
itaque nobis soluta!
</p>
<p id="justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eos
aliquam eum illo suscipit asperiores ad, exercitationem alias, fugit
atque, molestiae cum. Velit doloribus deleniti voluptas repudiandae in
odio laborum?
</p>
<h4>indent</h4>
<p id="indent1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quia
quibusdam nam. Recusandae temporibus aliquam, velit quo pariatur illo
minus incidunt officiis dignissimos expedita ullam ad, deleniti
consectetur voluptate tempora?
</p>
<p id="indent2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ex quod
nisi nesciunt, placeat voluptatibus! Odit, autem impedit? Maiores, iste
magnam voluptates a aperiam tempora sapiente facere vitae eaque nulla.
</p>
<h4>line-height</h4>
<p id="small">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum delectus
perspiciatis cumque quos mollitia facere, sit corporis sunt eius quae,
dolores dicta accusantium quis, deserunt laudantium odit nihil ipsam
temporibus.
</p>
<p id="big">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti vel
deleniti doloremque officia! Accusamus est saepe nostrum, perferendis
cumque similique. Harum delectus quasi, autem aut obcaecati omnis rerum
quae eaque.
</p>
<p id="px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint maxime nam
adipisci debitis repellendus dolorum eligendi quasi dolores qui, fugiat
eius magni accusantium porro. Odit ut quibusdam dolorem exercitationem
dicta.
</p>
<p id="per">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident
incidunt, fugiat assumenda eveniet, soluta nisi expedita cupiditate
tenetur id a placeat veniam iusto tempora laborum inventore iure sint,
repudiandae neque?
</p>
<p class="decoration">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias velit
quia molestiae, <p id="decoration"> natus cum eum a debitis,</p>> dolor ea quidem temporibus nobis
consequatur minus cumque possimus nam earum magni illum.
</p>
<p id="transform">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto doloremque
molestias nobis quos deleniti quam similique, quod commodi quae quibusdam,
eligendi, tenetur saepe aliquam quidem est voluptatum recusandae sint sit!
</p>
<p class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nesciunt
pariatur, dolorum debitis, maiores culpa in odio, dolorem ea et reiciendis
quo aut sed! Totam deleniti voluptates asperiores impedit quasi. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Eveniet fuga ratione
perspiciatis aut ea, obcaecati minus consectetur doloribus nostrum
deleniti quos eligendi maxime. Beatae asperiores cupiditate qui,
dignissimos possimus harum.
</p>
<h2>text shadow</h2>
<h1 id="shadow1">CSS TEXT SHADOW</h1>
<h1 id="shadow2">CSS TEXT SHADOW</h1>
<h1 id="shadow3">CSS TEXT SHADOW</h1>
<h1 id="shadow4">CSS TEXT SHADOW</h1>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| 프론트엔드 CSS 요소의 레이아웃[위치, 정렬] - display, position, flexible layout (0) | 2023.02.17 |
|---|---|
| 프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃 (0) | 2023.02.11 |
| 프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경 (0) | 2023.02.11 |
| 프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자 (0) | 2023.02.05 |