CSS 텍스트 종류

[ 목차 ]

728x90

✔ CSS 컬러

CSS의 컬러
1. 색상 이름으로 표현
    deeppink, deepskyblue, red, blue..

2. RGB 색상값으로 표현
    rgb(0~255, 0~255, 0~255) - 0에 가까울수록 그 색상이 연하게 나온다고 생각
    -> rgb(0, 0, 255) - 파랑
    rgba(0~255, 0~255, 0~255, 0~1의 소수) - 투명,불투명 효과 추가할

3. 16진수 색상값으로 표현
    #0000ff(파랑) 

    #00 00 ff -> #00f
     R  G  B

✔ CSS 텍스트

CSS의 텍스트

color
텍스트의 색상을 설정, 기본색은 검정색

letter-spacing
텍스트 내에서 글자 사이의 간격을 설정
    안 녕 하 세 요 .  오 늘 은  화 요 일  화 가 나 네 요 .

word-spacing
텍스트 내에서 단어 사이의 간격을 설정
    안녕하세요.   오늘은   화요일   화가나네요.

text_align
텍스트 수평 방향 정렬을 설정

text_indent
단락의 첫 줄의 들여쓰기를 설정

line-height
줄 높이를 정하는 속성
- normal: 1.2 (기본 웹프라우저 기본 값)
- px, %, 자연수
- 예) 글자크기가 40px일 때
    line-height : 1.5 -> 줄 높이는 40의 1.5배인 60px -> 그자 크기가 40px이므로 글자 위와 아래에 각각 10px의 여백이 생김(줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침)

✔ CSS 텍스트 코드

<!DOCTYPE html>

<head>

<style>

.letter { letter-spacing: 5px;color: deepskyblue;}

.word {word-spacing: 7px;color: deeppink;}

</style>

</head>

<body>

<p>letter-spacing</p>

<p><span class="letter">CSS의 letter-spacing 속성 테스트</span></p>

<p>word-spacing</p>

<p><span class="word">CSS의 word-spacing 속성 테스트</span></p>

</body>

</html>

✔ CSS 텍스트1 결과

✔ CSS 텍스트2 코드

<!DOCTYPE html>

<head>

<style>

border: 3px solid red;

padding: 10px;

margin: 20px;

}

.align-left { text-align: left;}

.align-right { text-align: right;}

.align-center { text-align: center;}

.align-justify { text-align: justify;}

#indent1 {text-indent:20px;}

#indent2 {text-indent:10%;}

#small-line {line-height: 0.7;}

#big-line {line-height: 3;}

#px-line {line-height: 30px;}

/*기본 16px 에서 30px이면 위아레로 7px만큼 공간이 더 있는것이다.*/

#per-line {line-height: 50%;}

</style>

</head>

<body>

<p class="align-left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laudantium accusamus eos sequi animi quaerat non suscipit at veritatis eum odit numquam voluptatem libero totam. Amet provident animi cumque quis?</p>

<p class="align-right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laudantium accusamus eos sequi animi quaerat non suscipit at veritatis eum odit numquam voluptatem libero totam. Amet provident animi cumque quis?</p>

<p class="align-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laudantium accusamus eos sequi animi quaerat non suscipit at veritatis eum odit numquam voluptatem libero totam. Amet provident animi cumque quis?</p>

<p class="align-justify">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laudantium accusamus eos sequi animi quaerat non suscipit at veritatis eum odit numquam voluptatem libero totam. Amet provident animi cumque quis?</p>

<hr>

<p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem repudiandae natus neque eum fuga, porro ipsa blanditiis numquam autem sit reiciendis eligendi aut error, officia obcaecati ratione temporibus nesciunt eius.</p>

<p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem repudiandae natus neque eum fuga, porro ipsa blanditiis numquam autem sit reiciendis eligendi aut error, officia obcaecati ratione temporibus nesciunt eius.</p>

<hr>

<p id = "small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum vitae dolorum, commodi, dicta maiores delectus qui, veniam non facere quia soluta id aut error facilis consequuntur harum illo itaque consectetur!</p>

<p id="big-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum vitae dolorum, commodi, dicta maiores delectus qui, veniam non facere quia soluta id aut error facilis consequuntur harum illo itaque consectetur!</p>

<p id="px-line" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum vitae dolorum, commodi, dicta maiores delectus qui, veniam non facere quia soluta id aut error facilis consequuntur harum illo itaque consectetur!</p>

<p id="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum vitae dolorum, commodi, dicta maiores delectus qui, veniam non facere quia soluta id aut error facilis consequuntur harum illo itaque consectetur!</p>

</body>

</html>

✔ CSS 텍스트2 결과

✔ CSS 브라우저 텍스트

✔ 브라우저 텍스트 크기
pc = 16px
mobile = 12px


text-decoration
텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
- none, underline, line-through(취소 선, 중간에 선), overline(머리 위)

text-transform
텍스트에 포함된 영문자에 대한 대소문자를 설정
- lowercase, uppercase, capitalize

font-variant
소문자를 작은 대문자로 변경
- small-caps

text-shadow
텍스트에 그림자 효과를 설정

    선택자 { text-shadow: 가로거리 세로거리 번짐정도 색상; }

text-overflow
텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지를 결정하는 속성
- clip, ellipsis

white-space
스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성
- nowrap, pre, pre-wrap, pre-line
   
            스페이스와 탭           줄바꿈          자동 줄바꿈
    normal      병합                병합                o
    nowrap      병합                병합                X
    pre         보존                보존                X
    pre-wrap    보존                보존                o
    pre-line    병합                보존                O

            
            //병합(변화없음), 보존(내가 쓴것이 보존된다)

✔ CSS 브라우저 텍스트 코드

<!DOCTYPE html>

<head>

<style>

a:link {text-decoration: none;}

a:visited {text-decoration: none;}

a:hover {text-decoration: underline;}

a:active {text-decoration: overline;}

h2 {font-size: 50px;}

.through {text-decoration: line-through;}

.trans1 {text-transform: uppercase;}

.variant{font-variant: small-caps;}

.trans2 {text-decoration: underline;}

</style>

</head>

<body>

<p>고양이(<span class="trans1">Felis catus</span>)는 <span class="through">포유류 식육목 고양이과의 동물</span>이다.</p>

<p>현생 고양이를 포함한 모든 고양이과 동물들이 공통 조상으로부터 약 2000만 년 전 분화한 이후, 들고양이는 10만~7만여 년 전부터 출현했으며, 가축화는 약 5만여 년전 이집트나 메소포타미아 등 중동 지역의 아프리카들고양이(<span class="variant">Felis lybica</span>)가 식량 확보 등의 이유로 도시 등 인간의 대규모 정착지에 나와 살던 것을 인간이 키우기 시작한 것이 오늘날 고양이의 유래다. 인간과 고양이의 공존은 인간에게는 쥐를 잡아주고 고양이에게는 안정적인 식량 확보가 가능하다는 상호간의 이점이 있었으며, 이로 인해 고양이는 오랜 시간이 지나며 자연스럽게 자기가축화되었다. 이후 <span class="trans2">고양이는 아프로유라시아 전역에 퍼졌으며, 신항로 개척 시대 이후 아메리카와 오세아니아 대륙에도 퍼지게 되었다.</span></p>

</body>

</html>

✔ CSS 브라우저 텍스트 결과

✔ CSS 브라우저 텍스트2 코드

<!DOCTYPE html>

<head>

<style>

h1 {font-size: 100px;}

.shadow1 {color: deeppink; text-shadow: 10px 10px;}

.shadow2 {color: deeppink; text-shadow: 10px 10px 10px;}

.shadow3 {text-shadow: 10px 10px 5px #f00;}

.shadow4 {color: #fff; text-shadow: 10px -10px 5px #000;}

.shadow5 {font-size: 60px;color: #fff;text-shadow: 0 0 8px #000;}

</style>

</head>

<body>

<h1 class="shadow1">CSS text-shadow 속성1</h1>

<h1 class="shadow2">CSS text-shadow 속성2</h1>

<h1 class="shadow3">CSS text-shadow 속성3</h1>

<h1 class="shadow4">CSS text-shadow 속성4</h1>

<h1 class="shadow5">CSS text-shadow 속성5</h1>

</body>

</html>

✔ CSS 브라우저 텍스트2 결과

✔ CSS 텍스트3

overflow
요소내에 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성
- visible, hidden, scroll, auto 


font-size 
텍스트 크기를 설정
- 단위 : px, %, em, rem

font-family
텍스트의 글꼴을 설정

✔ CSS 텍스트3 코드

<!DOCTYPE html>

<head>

<style>

p {

display: inline-block;

width: 200px;

border: 1px solid red;

}

.tof {

white-space: nowrap;/*밑으로 내려가지 마라*/

overflow: hidden;/*히든을 해야 짤린 부분이 없어진다(숨김)*/

text-overflow: ellipsis;/*....*/

}

.tof2 {

white-space: nowrap;/*밑으로 내려가지 마라*/

overflow: hidden;

text-overflow: clip;/*짤림*/

}

.of1 {

height: 200px;

overflow: scroll;

}

.of2 {

height: 200px;

overflow-x: hidden; /*x축 스크롤 없에기*/

overflow-y: scroll ;/*y축 스크롤 */

}

.content {

border: 3px dotted blue;

width: 400px;

padding: 10px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.content:hover{overflow: visible; }

</style>

</head>

<body>

<p class="tof">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, hic. Distinctio autem corrupti repellat, odio quod veniam accusamus est tempore, eveniet consequatur expedita accusantium rerum quasi quam necessitatibus. Exercitationem, beatae!</p>

<p class="tof2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, hic. Distinctio autem corrupti repellat, odio quod veniam accusamus est tempore, eveniet consequatur expedita accusantium rerum quasi quam necessitatibus. Exercitationem, beatae!</p>

<p class="of1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, saepe. Voluptatibus similique eligendi quaerat commodi praesentium? Unde, magni quibusdam? Natus facere laudantium vitae molestias ex labore ea vel quidem totam.</p>

<p class="of2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, saepe. Voluptatibus similique eligendi quaerat commodi praesentium? Unde, magni quibusdam? Natus facere laudantium vitae molestias ex labore ea vel quidem totam.</p>

<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quo voluptatem omnis temporibus earum accusamus officiis, magni cumque voluptas ab ex inventore delectus dicta consectetur saepe repellat soluta natus voluptatum?</div>

</body>

</html>

✔ CSS 텍스트3 결과

✔ 글꼴을 선택하는 방법
1. 누구나 설치되어 있는 기본 글꼴 사용
2. 이미지로 처리
3. 웹 폰트를 사용

font-weight
텍스트의 굵기를 설정
- 기본 굵기는 : 400(범위 100 ~ 900)

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

'Frontend > CSS' 카테고리의 다른 글

CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0)	2022.10.31
CSS 배경 종류 (0)	2022.10.31
CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상) (0)	2022.10.27
CSS (상속, 전체/ id /class 선택자) (0)	2022.10.26
CSS (기본, 인라인/내부/외부 스타일) (0)	2022.10.26

저장소

CSS 텍스트 종류

'Frontend > CSS' 카테고리의 다른 글

티스토리툴바

CSS 텍스트 종류

'Frontend > CSS' 카테고리의 다른 글

관련글

티스토리툴바