본문 바로가기
CSS

국비 수업 26일 차(22.11.08.) - CSS 텍스트

dongcu 2022. 11. 10. 13:37

※ CSS의 텍스트

 

1. color

- 텍스트의 색상을 설정한다. 기본색은 검정색이다.

<head>
	<title>CSS 텍스트 - 1</title>
	<style>
		.color { color: red; }
	<style>
</head>
<body>
	<p>letter-color</p>
	<p><span class="color">CSS의 letter-color 속성 테스트</span></p>
</body>

 

CSS 텍스트 - 1

letter-color

CSS의 letter-color 속성 테스트

 

 

2. letter-spacing

- 텍스트 내에서 글자 사이의 간격을 설정한다.

 

3. word-spacing

- 텍스트 내에서 단어 사이의 간격을 설정한다.

<head>
	<title>CSS 텍스트 - 2</title>
	<style>
		.letter { letter-spacing: 5px; }
		.word { word-spacing: 10px; }
	</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>

 

CSS 텍스트 - 2

letter-spacing

CSS의 letter-spacing 속성 테스트

word-spacing

CSS의 word-spacing 속성 테스트

 

 

4. text-align

- 텍스트의 수평 방향 정렬을 설정한다.

<head>
	<title>CSS 텍스트 - 3</title>
	<style>
		.align-left { text-align: left; }
		.align-center { text-align: center; }
		.align-right { text-align: right; }
		.align-justify { text-align: justify; }
	</style>
</head>
<body>
	<p class="align-left">left</p>
	<p class="align-center">center</p>
	<p class="align-right">right</p>
	<p class="align-justify">justify</p>
</body>

 

CSS 텍스트 - 3

left

center

right

justify

 

 

5. text-indent

- 단락 첫 줄의 들여쓰기를 설정한다.

<head>
	<title>CSS 텍스트 - 4</title>
	<style>
		.indent1 {
			color: deeppink;
			text-indent: 5%;
		}
		.indent2 {
			color: deeppink;
			text-indent: -20px;
		}
	</style>
</head>
<body>
	<p class="indent1">indent 5%</p>
	<p class="indent2">indent -20px</p>
</body>

 

CSS 텍스트 - 4

indent 5%

indent -20px

 

 

6. text-height

- 텍스트의 줄 높이를 설정한다.

<head>
	<title>CSS 텍스트 - 5</title>
	<style>
		[class $= 'line'] { color: blue; }
		.small-line { line-height: 0.7; }
		.big-line { line-height: 3; }
		.px-line { line-height: 20px; }
		.per-line { line-height: 50%; }
	</style>
</head>
<body>
	<p class="small-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p><br>
    <p class="big-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit.p><br>
	<p class="px-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit.p><br>
	p class="per-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit.p><br>
</body>

 

 

7. text-decoration

- 텍스트에 여러 가지 효과를 설정하거나 제거하는 데 사용한다.

<head>
	<title>CSS 텍스트 - 6</title>
	<style>
		.under {
			text-decoration: underline;
			/* border-bottom: 1px solid red; */
			/*이렇게 하면 밑줄의 간격 등도 조절 가능 */
		}
		.through { text-decoration: line-through; }
		.over { text-decoration: overline; }
	</style>
</head>
<body>
	<p>
		<span class="under">Lorem</span><br>
		<span class="through">Doloremque ipsum</span><br>
		<span class="over">dolore</span>
	</p>
</body>

 

CSS 텍스트 - 6

Lorem
Doloremque ipsum
dolore

 

 

8. text-transform

- 텍스트에 포함된 영문자에 대한 대소문자를 설정한다.

 

9. font-variant

- 소문자를 같은 크기의 대문자로 변경한다. 소문자 크기의 작은 대문자로 설정된다.

<head>
	<title>CSS 텍스트 - 7</title>
	<style>
		.trans1 { text-transform: lowercase; }
		.trans2 { text-transform: uppercase; }
		.trans3 { text-transform: capitalize; }
		.trans4 { font-variant: small-caps; }
	</style>
</head>
<body>
	<h3>프로그래밍 언어</h3>
	<ul>
		<li class="trans1">Java</li>
		<li class="trans2">Javascript</li>
		<li class="trans3">python</li>
		<li class="trans4">C Language</li>
	</ul>
</body>

 

CSS 텍스트 - 7

프로그래밍 언어

  • Java
  • Javascript
  • python
  • C Language

 

 

10. text-shadow

- 텍스트에 그림자 효과를 설정한다.

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

 

<head>
	<title>CSS 텍스트 - 8</title>
	<style>
		.shadow1 { text-shadow: 10px 10px; }
		.shadow2 { text-shadow: 10px 10px 7px; }
		.shadow3 { text-shadow: 10px 10px 7px deeppink; }
		.shadow4 {
			color: white;
			/* text-shadow: 5px -5px 7px #000; */
			text-shadow: 0px 0px 10px #000;
		}
	</style>
</head>
<body>
	<h1 class="shadow1">CSS text-shadow 속성</h1>
	<h1 class="shadow2">CSS text-shadow 속성</h1>
	<h1 class="shadow3">CSS text-shadow 속성</h1>
	<h1 class="shadow4">CSS text-shadow 속성</h1>
</body>

 

CSS 텍스트 - 8

CSS text-shadow 속성

CSS text-shadow 속성

CSS text-shadow 속성

CSS text-shadow 속성

 

 

11. white-space

- 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정한다.

 

12. overflow

- 기준선을 벗어나 넘치는 경우 content를 어떻게 처리할지 설정한다.

 

13. text-overflow

- 텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트의 표현을 어떻게 할지 설정한다.

 

14. font-size

- 텍스트의 크기를 설정한다.

px   스크린의 픽셀을 기준으로 하는 절대 크기 설정
%   기본 크기(16px)를 기준으로 하고 상대 크기 설정
em   부모 요소로부터 상속받는 글자 크기를 기준으로 하고 상대 크기 설정
  https://www.w3.org/TR/CSS22/propidx.html - 상속 확인 페이지
rem   부모 요소에 상관없이 html 태그의 글자 크기에 대한 상대 크기 설정

 

15. font-weight

- 텍스트의 굵기를 설정한다. 100 ~ 900 사이의 숫자로 설정하고 기본 굵기는 400(normal)이고 두껍게는 700(bold)이다. 

 

16. font-family

- 글꼴을 설정한다. 여러 개의 글꼴을 등록할 수 있고 그 중 하나의 글꼴을 선택해 설정할 수 있다. 여러 개의 글꼴이 등록되어 있는 경우, 웹 브라우저에서 앞에 있는 것부터 순서대호 사용 여부를 판단한 뒤 적용한다. 글꼴 이름에 띄어쓰기가 포함되어 있는 경우 반드시 따옴표로 감싸주어야 한다.

 

 

 

* 웹 폰트 사이트

- https://fonts.google.com/
- https://noonnu.cc/
→ 글꼴 선택 후 다운로드 하지 말고 밑으로 내려보면 select가 있다. select를 누르면 위에 view selected families를 누르고 @import를 클릭하고 <style> 태그 안에 복붙을 한다. 그리고 밑에 font-family: 부분을 넣어주면 작동한다. 눈누에 font-face 부분이 없으면 f12로 개발자 도구를 열고 ctrl+f로 font-face를 검색하면 사용할 수 있다.

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

728x90
저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

국비 수업 28일 차(22.11.10.) - CSS position  (0) 2022.11.11
국비 수업 27일 차(22.11.09.) - 박스 모델  (0) 2022.11.11
국비 수업 26일 차(22.11.08.) - CSS 컬러  (0) 2022.11.09
국비 수업 25일 차(22.11.07.) - CSS 선택자  (0) 2022.11.08
국비 수업 25일 차(22.11.07.) - CSS, 문법  (0) 2022.11.08

'CSS' Related Articles

티스토리툴바