CSS의 텍스트 관련 스타일에 대해 알아보자 (text~)
<text ~ 로 시작하는 코드>
color: 텍스트의 색상을 지정
[ 표현법 ]
선택자 {
color : 색상명/16진수/rgb(x, x, x)/hsl(x, x, x)/hsla(x, x, x, x)
<!-- hsl => h: 색상 숫자 값, s: 채도, l: 명도 -->
<!-- hsla => h: 색상 숫자 값, s: 채도, l: 명도, a: 투명도 -->
}
<style>
#c {
color : red;
color : #ffa7a7;
color : rgb(0, 255, 13); /* 최대값은 255 */
color : rgba(0, 255, 13, 0.97); /* a는 투명도 (0.0 ~ 1.0 사이, 숫자가 작을수록 더 투명 */
color : hsl(200, 50%, 50%); /* h는 색상값 (0 ~ 360), s는 채도 (%), 1은 명도 (%) */
color : hsla(200, 50%, 50%, 0.4); /* a는 투명도 */
}
</style>
<body>
<pre id="c">
[ 표현법 ]
선택자 {
color : 색상명/16진수/rgb(x, x, x)/hsl(x, x, x)/hsla(x, x, x, x)
<!-- hsl => h: 색상 숫자 값, s: 채도, l: 명도 -->
<!-- hsla => h: 색상 숫자 값, s: 채도, l: 명도, a: 투명도 -->
}
</pre>
</body>
text-decoration: 텍스트에 줄을 긋거나 줄을 없앨 때 사용
[ 표현법 ]
선택자 {
text-decoration: none/underline/overline/line-through;
}
<style>
#td1 { text-decoration: underline; }
#td2 { text-decoration: line-through; }
#td3 { text-decoration: overline; }
#td4 { text-decoration: none; color: black; }
</style>
<body>
<!-- ul>li#td$3 -->
<ul>
<li id="td1">underline: 텍스트 영역 아래에 줄 긋기</li>
<li id="td2">line-through: 텍스트 영역 중간에 줄 긋기</li>
<li id="td3">overline: 텍스트 영역 위에 줄 긋기</li>
</ul>
<a href="http://www.naver.com" id="td4">네이버</a>
<!-- 유효한 링크이지만 일반 글자처럼 보이도록 바꿀 수 있음 -->
</body>
text-transform: 영문 텍스트의 대소문자 변환 시 사용
[ 표현법 ]
선택자 {
text-transform : uppercase/lowercase/capitalize;
}
<style>
#tt1 { text-transform : uppercase }
#tt2 { text-transform : lowercase }
#tt3 { text-transform : capitalize }
</style>
<body>
<!-- ul>li>#tt$*3 + Enter -->
<ul>
<li>
<div id="tt1">uppercase: 모든 영문자를 다 대문자로</div>
<div id="tt2">LOWERCASE: 모든 영문자를 다 소문자로</div>
<div id="tt3">capitalize: 영문자의 first text만 대문자로</div>
</li>
</ul>
</body>
👉🏻 capitalize 속성값은 띄어쓰기 기준으로 앞 문자를 바꿔 줌
text-align : 텍스트를 정렬할 때 사용
[ 표현법 ]
선택자 {
text-align : left(기본값)/justify/right/center;
}
👉🏻 왼쪽 정렬
<h4>왼쪽 정렬</h4>
<p>
투명하되 힘차게 불러 우리의 말이다. 긴지라 품으며, 꽃이 열락의 따뜻한 찬미를 것이다. 불어 그들의 이상은 날카로우나 피는 듣기만 우리 끓는다. 힘차게 실현에 부패를 끝에 인생을 약동하다. 밥을 끓는 우리는 약동하다.
그들의 부패를 거친 품으며, 있는가? 소담스러운 무엇을 무한한 역사를 그들은 힘있다. 미묘한 사는가 그들의 반짝이는 청춘 있을 돋고, 말이다. 그들의 돋고, 밥을 이는 가슴에 우리 기관과 가진 청춘이 사막이다. 구하지 따뜻한 길지 그들에게 사막이다. 얼마나 끝에 따뜻한 광야에서 피고 예수는 가는 앞이 찬미를 위하여서. 못할 같이 천하를 얼음에 피가 부패뿐이다.
</p>
👉🏻 양쪽 정렬
<h4>양쪽 정렬</h4>
<p style="text-align: justify;">
투명하되 힘차게 불러 우리의 말이다. 긴지라 품으며, 꽃이 열락의 따뜻한 찬미를 것이다. 불어 그들의 이상은 날카로우나 피는 듣기만 우리 끓는다. 힘차게 실현에 부패를 끝에 인생을 약동하다. 밥을 끓는 우리는 약동하다.
그들의 부패를 거친 품으며, 있는가? 소담스러운 무엇을 무한한 역사를 그들은 힘있다. 미묘한 사는가 그들의 반짝이는 청춘 있을 돋고, 말이다. 그들의 돋고, 밥을 이는 가슴에 우리 기관과 가진 청춘이 사막이다. 구하지 따뜻한 길지 그들에게 사막이다. 얼마나 끝에 따뜻한 광야에서 피고 예수는 가는 앞이 찬미를 위하여서. 못할 같이 천하를 얼음에 피가 부패뿐이다.
</p>
👉🏻 오른쪽 정렬
<h4>오른쪽 정렬</h4>
<p style="text-align : right;">
투명하되 힘차게 불러 우리의 말이다. 긴지라 품으며, 꽃이 열락의 따뜻한 찬미를 것이다. 불어 그들의 이상은 날카로우나 피는 듣기만 우리 끓는다. 힘차게 실현에 부패를 끝에 인생을 약동하다. 밥을 끓는 우리는 약동하다.
그들의 부패를 거친 품으며, 있는가? 소담스러운 무엇을 무한한 역사를 그들은 힘있다. 미묘한 사는가 그들의 반짝이는 청춘 있을 돋고, 말이다. 그들의 돋고, 밥을 이는 가슴에 우리 기관과 가진 청춘이 사막이다. 구하지 따뜻한 길지 그들에게 사막이다. 얼마나 끝에 따뜻한 광야에서 피고 예수는 가는 앞이 찬미를 위하여서. 못할 같이 천하를 얼음에 피가 부패뿐이다.
</p>
👉🏻 가운데 정렬
<h4>가운데 정렬</h4>
<p style="text-align : center;">
투명하되 힘차게 불러 우리의 말이다. 긴지라 품으며, 꽃이 열락의 따뜻한 찬미를 것이다. 불어 그들의 이상은 날카로우나 피는 듣기만 우리 끓는다. 힘차게 실현에 부패를 끝에 인생을 약동하다. 밥을 끓는 우리는 약동하다.
그들의 부패를 거친 품으며, 있는가? 소담스러운 무엇을 무한한 역사를 그들은 힘있다. 미묘한 사는가 그들의 반짝이는 청춘 있을 돋고, 말이다. 그들의 돋고, 밥을 이는 가슴에 우리 기관과 가진 청춘이 사막이다. 구하지 따뜻한 길지 그들에게 사막이다. 얼마나 끝에 따뜻한 광야에서 피고 예수는 가는 앞이 찬미를 위하여서. 못할 같이 천하를 얼음에 피가 부패뿐이다.
</p>
text-shadow : 텍스트에 그림자 효과를 줄 때 사용
[ 표현법 ]
선택자 {
text-shadow: 가로거리(x), 세로거리(y) 번짐정도 색상 ;
}
- 번짐 정도와 색상은 생략 가능
- 가로 거리와 세로 거리가 양수일 경우 오른쪽 아래에 생성
- 가로 거리와 세로 거리가 음수일 경우 왼쪽 위에 생성
- 번짐 정도가 0일 경우 그림자 색이 진함
- 색상은 기본값이 글자색과 같음
<style>
.shadow { font-size : 50px; font-weight : 900 }
#ts1 {
color : orangered;
text-shadow : 5px 5px 5px yellow;
}
#ts2 {
color : white;
text-shadow : 0px 0px 10px black;
}
#ts3 {
text-shadow : 0px 0px 4px gray,
0px -5px 4px yellow,
0px -10px 8px orange,
0px -15px 14px orangered,
0px -22px 19px red;
}
</style>
<body>
<!-- div>span#ts$.shadow{HTML}*3 -->
<div>
<span id="ts1" class="shadow">HTML</span> <br><br><br>
<span id="ts2" class="shadow">HTML</span> <br><br><br>
<span id="ts3" class="shadow">HTML</span> <br><br><br>
</div>
</body>