2024.08.23. CSS - 텍스트 관련 스타일

* 텍스트정렬(text-align속성) - text-align: left, right, center, justify;

* 줄간격 지정 (line-height 속성) - line-height :em, px, % 
* 텍스트에 선만들기(text-decoration 속성) : text-decoration:  none, line-through(취소선), overline(윗줄),underline(밑줄);

   - 하이퍼링크에서 밑줄 없앨 때 많이 사용함.

* 텍스트에 그림자 만들기 (text-shadow 속성) :

   -형식)text-shadow: 가로거리 세로거리 번짐정도 그림자 색상

                              - 수평거리 : 양수 - 오른쪽, 음수 - 왼쪽 
                              - 수직거리 : 양수 - 아래쪽, 음수 - 위쪽
                              - 번짐정도 : 양수 - 모든 방향확대,  음수 : 모든 방향축소
                              - 색상 : 한가지, 공백으로 여러색상 지정 가능. 
 [실습]

.shadow1{
	text-shadow: 1px 1px black;
	color: red;
}
.shadow2{
	text-shadow: 5px 5px 2px #ffa500;
}
.shadow3{
	text-shadow: 7px -7px 20px #000;
	color: #fff;
}

<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">JAVASCRIPT</h1>

[결과]

 

* 텍스트와 텍스트 사이의 간격, 단어와 단어 사이의 간격 조정 속성 : letter-spacing 속성, word-spacing 속성
[실습]

.spacing1{letter-spacing: 2em;}
.spacing2{letter-spacing: 30px;}
.spacing3{letter-spacing: 400%;}/* 브라우저마다 다를 수가 있다. 나는 일단 안됨.*/
.spacing4{word-spacing: 2em;}
.spacing4{word-spacing: 30px;}
.spacing4{word-spacing: 400%;}/* 브라우저마다 다를 수가 있다. 나는 일단 안됨.*/

<h3>텍스트와 텍스트 사이의 간격, 단어와 단어 사이의 간격 조정 속성 : letter-spacing 속성, word-spacing 속성</h3>
<p class="spacing1">CSS</p>
<p class="spacing2">CSS</p>
<p class="spacing3">CSS</p>
<p class="spacing4">HTML CSS JAVASCRIPT</p>

 

[결과]