728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!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>텍스트 관련 스타일</title>
<style>
#c {
color: red;
color:#24af86;
color: rgb(42, 199, 133, 0.61); /* 최대값은 255*/
color: rgba(0, 255, 142, 0.5); /* a => 투명도를의미(0으로 갈수록 희미해짐) */
color: hsla(200, 50%, 50%,0.7);/* h : (0~360), 채도, 명도 , 투명도*/
}
#td1{
text-decoration: underline;
}
#td2{
text-decoration: line-through;
}
#td3{
text-decoration: overline;
}
#td4{
text-decoration: none;
color:black;
}
.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 -22px 19px orangered;
}
</style>
</head>
<body>
<h1>텍스트 관련 스타일(text~~)</h1>
<h3>color : 텍스트의 색상을 지정</h3>
<pre id="c">
선택자 {
color : 색상명/16진수/rgb(x,x,x)/rgba(x,x,x,x)/hsl(x,x,x)/hsla(x,x,x,x)
}
</pre>
<hr>
<h3>text-decoration : 텍스트에 줄을 긋거나 없앨 때 사용</h3>
<pre>
선택자 {
text-decoration : none/underline/overline/line-through;
}
</pre>
<ul>
<li id="td1">underline : 텍스트 영역 아래에 줄 긋기</li>
<li id="td2">line-through : 텍스트 영영 중간에 줄 긋기</li>
<li id="td3">overline : 텍스트 영역 위에 줄 긋기</li>
</ul>
<h3>text-transform : 영문 텍스트의 대소문자 변환 시 사용</h3>
<pre>
선택자{
text-transform : uppercase/lowercase/capitalize;
}
</pre>
<ul>
<li id="tt1" style="text-transform: uppercase;">uppercase : 모든 영문자를 다 대문자로..</li>
<li id="tt2" style="text-transform: lowercase;">LOWERCASE : 모든 영문자를 다 소문자로..</li>
<li id="tt3" style="text-transform: capitalize;">caplitalize caplitalize : 영문자의 첫번째 글자만대문자로 바꿔줌..</li>
</ul>
<h3>text-align : 텍스트를 정렬할 때 사용</h3>
<pre>
선택자 {
text-align : left(기본값)/justify/right/center;
}
</pre>
<h4>양쪽정렬</h4>
<p style="text-align: justify;">
인간은 그들에게 기쁘며, 구하기 있는 생명을 미인을 내려온 있는가? 일월과 산야에 못할 위하여 같이, 가는 없으면 길을 노년에게서 운다. 어디 고행을 그들은 할지라도 이것이다. 두기 능히 황금시대를 아름답고 약동하다. 주는 소담스러운 그들은 거선의 얼음에 영락과 이상의 무엇이 이것이다. 얼마나 같은 이상의 생생하며, 있는 아름다우냐? 봄바람을 하는 소리다.이것은 같이, 그들의 지혜는 보배를 것이다. 열락의 내는 인생의 있으며, 아니다. 가는 수 앞이 예수는 일월과 사랑의 타오르고 하는 열락의 위하여서. 그들의 인생을 커다란 그들에게 피가 끓는다. 돋고, 사는가 현저하게 거선의 청춘을 있으랴?
내는 싸인 끓는 얼마나 주는 동력은 때까지 찾아 쓸쓸한 이것이다. 꽃 무엇을 온갖 그들은 있다. 피는 보는 풀밭에 것이다. 귀는 역사를 위하여서, 미인을 이것을 시들어 방지하는 아름답고 용감하고 것이다. 고동을 어디 곳으로 그와 피가 있으며, 보라. 트고, 가지에 대고, 우리 낙원을 아니다. 그들의 이것이야말로 우리는 우는 보이는 청춘 트고, 때문이다. 물방아 천자만홍이 이는 피부가 청춘 구할 귀는 것이다. 무엇을 이상 커다란 이상이 인도하겠다는 뜨고, 속에 쓸쓸하랴? 그것은 사는가 얼음 보라. 꽃 있는 가슴에 찬미를 청춘은 실현에 용기가 것은 있는가?
피가 예수는 대고, 청춘의 장식하는 품에 봄바람이다. 하였으며, 가는 하는 그들의 트고, 위하여 살 청춘 부패뿐이다. 품었기 전인 열락의 그들의 보라. 튼튼하며, 많이 인도하겠다는 청춘 영원히 가치를 피다. 몸이 청춘의 인도하겠다는 위하여, 사는가 길지 아니한 그들은 황금시대의 있는가? 피어나는 때에, 가치를 이상, 같은 같이 사막이다. 있는 이상 인생을 방황하였으며, 열락의 얼마나 긴지라 그들은 위하여 봄바람이다. 동산에는 있는 노래하며 그들의 황금시대를 많이 때까지 것이다. 보이는 자신과 반짝이는 예가 뜨거운지라, 사막이다.
</p>
<h4>오른쪽정렬</h4>
<p style="text-align: right;">
인간은 그들에게 기쁘며, 구하기 있는 생명을 미인을 내려온 있는가? 일월과 산야에 못할 위하여 같이, 가는 없으면 길을 노년에게서 운다. 어디 고행을 그들은 할지라도 이것이다. 두기 능히 황금시대를 아름답고 약동하다. 주는 소담스러운 그들은 거선의 얼음에 영락과 이상의 무엇이 이것이다. 얼마나 같은 이상의 생생하며, 있는 아름다우냐? 봄바람을 하는 소리다.이것은 같이, 그들의 지혜는 보배를 것이다. 열락의 내는 인생의 있으며, 아니다. 가는 수 앞이 예수는 일월과 사랑의 타오르고 하는 열락의 위하여서. 그들의 인생을 커다란 그들에게 피가 끓는다. 돋고, 사는가 현저하게 거선의 청춘을 있으랴?
내는 싸인 끓는 얼마나 주는 동력은 때까지 찾아 쓸쓸한 이것이다. 꽃 무엇을 온갖 그들은 있다. 피는 보는 풀밭에 것이다. 귀는 역사를 위하여서, 미인을 이것을 시들어 방지하는 아름답고 용감하고 것이다. 고동을 어디 곳으로 그와 피가 있으며, 보라. 트고, 가지에 대고, 우리 낙원을 아니다. 그들의 이것이야말로 우리는 우는 보이는 청춘 트고, 때문이다. 물방아 천자만홍이 이는 피부가 청춘 구할 귀는 것이다. 무엇을 이상 커다란 이상이 인도하겠다는 뜨고, 속에 쓸쓸하랴? 그것은 사는가 얼음 보라. 꽃 있는 가슴에 찬미를 청춘은 실현에 용기가 것은 있는가?
피가 예수는 대고, 청춘의 장식하는 품에 봄바람이다. 하였으며, 가는 하는 그들의 트고, 위하여 살 청춘 부패뿐이다. 품었기 전인 열락의 그들의 보라. 튼튼하며, 많이 인도하겠다는 청춘 영원히 가치를 피다. 몸이 청춘의 인도하겠다는 위하여, 사는가 길지 아니한 그들은 황금시대의 있는가? 피어나는 때에, 가치를 이상, 같은 같이 사막이다. 있는 이상 인생을 방황하였으며, 열락의 얼마나 긴지라 그들은 위하여 봄바람이다. 동산에는 있는 노래하며 그들의 황금시대를 많이 때까지 것이다. 보이는 자신과 반짝이는 예가 뜨거운지라, 사막이다.
</p>
<h4>가운데쪽정렬</h4>
<p style="text-align: center;">
인간은 그들에게 기쁘며, 구하기 있는 생명을 미인을 내려온 있는가? 일월과 산야에 못할 위하여 같이, 가는 없으면 길을 노년에게서 운다. 어디 고행을 그들은 할지라도 이것이다. 두기 능히 황금시대를 아름답고 약동하다. 주는 소담스러운 그들은 거선의 얼음에 영락과 이상의 무엇이 이것이다. 얼마나 같은 이상의 생생하며, 있는 아름다우냐? 봄바람을 하는 소리다.이것은 같이, 그들의 지혜는 보배를 것이다. 열락의 내는 인생의 있으며, 아니다. 가는 수 앞이 예수는 일월과 사랑의 타오르고 하는 열락의 위하여서. 그들의 인생을 커다란 그들에게 피가 끓는다. 돋고, 사는가 현저하게 거선의 청춘을 있으랴?
내는 싸인 끓는 얼마나 주는 동력은 때까지 찾아 쓸쓸한 이것이다. 꽃 무엇을 온갖 그들은 있다. 피는 보는 풀밭에 것이다. 귀는 역사를 위하여서, 미인을 이것을 시들어 방지하는 아름답고 용감하고 것이다. 고동을 어디 곳으로 그와 피가 있으며, 보라. 트고, 가지에 대고, 우리 낙원을 아니다. 그들의 이것이야말로 우리는 우는 보이는 청춘 트고, 때문이다. 물방아 천자만홍이 이는 피부가 청춘 구할 귀는 것이다. 무엇을 이상 커다란 이상이 인도하겠다는 뜨고, 속에 쓸쓸하랴? 그것은 사는가 얼음 보라. 꽃 있는 가슴에 찬미를 청춘은 실현에 용기가 것은 있는가?
피가 예수는 대고, 청춘의 장식하는 품에 봄바람이다. 하였으며, 가는 하는 그들의 트고, 위하여 살 청춘 부패뿐이다. 품었기 전인 열락의 그들의 보라. 튼튼하며, 많이 인도하겠다는 청춘 영원히 가치를 피다. 몸이 청춘의 인도하겠다는 위하여, 사는가 길지 아니한 그들은 황금시대의 있는가? 피어나는 때에, 가치를 이상, 같은 같이 사막이다. 있는 이상 인생을 방황하였으며, 열락의 얼마나 긴지라 그들은 위하여 봄바람이다. 동산에는 있는 노래하며 그들의 황금시대를 많이 때까지 것이다. 보이는 자신과 반짝이는 예가 뜨거운지라, 사막이다.
</p>
<hr>
<h3>text-shadow : 텍스트에 그림자 효과를 줄 때 사용</h3>
<pre>
선택자 {
text-shadow : 가로거리(x) 세로거리 (y) 번짐정도 색상;
}
- 번짐정도와 색상은 생략가능
- 가로거리와 세로거리가 양수일 경우 오른쪽 아래에 그림자 생성
- 가로거리와 세로거리가 음수일 경우 왼쪽 위에 그림자 생성
- 번짐정도가 0일경우 그림자의 색이 찐해진다
- 색상은 기본값이 글자색을 따라간다
</pre>
<div>
<span class="shadow" id="ts1">HTML</span> <br><br>
<span class="shadow" id="ts2">HTML</span> <br><br>
<span class="shadow" id="ts3">HTML</span>
</div>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 영역관련스타일 HTML (0) | 2023.05.12 |
|---|---|
| 목록관련스타일 HTML (0) | 2023.05.12 |
| 글꼴관련스타일 HTML (0) | 2023.05.11 |
| 선택자우선순위 HTML (0) | 2023.05.11 |
| 기타선택자 HTML (0) | 2023.05.11 |
