1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 텍스트 관련 스타일</title>
<style>
#c {
color: red;
color: #0fd1aa;
color: rgb(52, 187, 56); /* 각 값은 0 ~ 255 범위 */
color: rgba(22, 29, 215, 0.647); /* a : 투명도 */
color: hsl(304, 82%, 46%); /* h: 색상 0~360, s: 채도 0~100%, l: 명도 0~100% */
color: hsla(304, 82%, 46%, 0.3);
}
#td1 { text-decoration: overline; }
#td2 { text-decoration: line-through; }
#td3 { text-decoration: underline; }
#td4 { text-decoration: none;
color: white;
background-color: yellowgreen; }
#td4:hover { background-color: white; color: yellowgreen; }
#tt1 { text-transform: uppercase; }
#tt2 { text-transform: lowercase; }
#tt3 { text-transform: capitalize; }
.shadow {
font-size: 2em;
font-weight: 900;
}
#ts1 {
color: brown;
/* 오른쪽 아래로. 번짐정도 생략 시 선명한 그림자, 색상 생략 시 글자 색상 */
text-shadow: 5px 5px;
/* 왼쪽 위로. 살짝 번져보이고 검정색 그림자 */
text-shadow: -5px -5px 5px black;
}
#ts2 {
color: white;
text-shadow: 0px 0px 10px red; /* 입체감 있게 표현. 네온사인 효과. */
}
#ts3 {
text-shadow: 0px 0px 4px darkgray
, 0px -5px 4px yellow
, 0px -10px 8px orangered
, 0px -15px 15px red;
}
</style>
</head>
<body>
<h1>텍스트 관련 스타일 (text~)</h1>
<h2>color : 텍스트 색상 지정</h2>
<pre id="c">
선택자 {
color: 색상명 | 16진수 | rgb(x, x, x) | rgba(x,x,x,x) | hsl(x, x, x) | hsla(x, x, x);
}
</pre>
<hr>
<h3>text-decoration : 텍스트에 줄을 표시하거나 또는 표시하지 않고자 할 때 사용</h3>
<pre>
선택자 {
text-decoration: none | underline | overline | line-through;
}
</pre>
<!-- ul>li#td$*3 -->
<ul>
<li id="td1">텍스트에 줄긋기 (상단)</li>
<li id="td2">텍스트에 줄긋기 (중간)</li>
<li id="td3">텍스트에 줄긋기 (하단)</li>
</ul>
<hr>
<h3>text-transform : 영문 텍스트의 대소문자 변환 시 사용</h3>
<pre>
선택자 {
text-transform: uppercase | lowercase | capitalize;
}
</pre>
<!-- ul>li#tt$*3 -->
<ul>
<li id="tt1">uppercase : 모든 영문자를 대문자로 변환</li>
<li id="tt2">LOWERCASE : 모든 영문자를 소문자로 변환</li>
<li id="tt3">capitalize : 영문자의 첫번째 글자만 대문자로 변환</li>
</ul>
<hr>
<h3>text-shadow : 텍스트에 그림자 효과를 줄 때 사용</h3>
<pre>
선택자 {
text-shadow: 가로거리(x) 세로거리(y) [번짐정도] [색상];
}
</pre>
<!-- div>span.shadow#ts${COOKIE}*3 -->
<div>
<span class="shadow" id="ts1">COOKIE</span> <br><br><br>
<span class="shadow" id="ts2">COOKIE</span> <br><br><br>
<span class="shadow" id="ts3">COOKIE</span>
</div>
<hr>
<h3>text-align : 텍스트 정렬 시 사용</h3>
<pre>
선택자 {
text-align : left(기본값) | justify(양쪽) | right | center;
}
</pre>
<h4>왼쪽정렬(기본)</h4>
<p style="text-align:left;">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<h4>양쪽정렬</h4>
<p style="text-align:justify;">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<h4>오른쪽정렬</h4>
<p style="text-align:right;">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<h4>가운데정렬</h4>
<p style="text-align:center;">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<hr>
<h3>line-height : 줄 간격 조절 시 사용 (장평 조절)</h3>
<pre>
선택자 {
line-height : normal(기본) | px | em | %;
}
</pre>
<h4>고정 단위 간격(px)</h4>
<p style="line-height: 30px">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<h4>가변 단위 간격(em)</h4>
<p style="line-height: 2.5em">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<h4>가변 단위 간격(%)</h4>
<p style="line-height: 200%">
타인의 범죄행위로 인하여 생명·신체에 대한 피해를 받은 국민은 법률이 정하는 바에 의하여 국가로부터 구조를 받을 수 있다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다. 다만, 형사피고인이 스스로 변호인을 구할 수 없을 때에는 법률이 정하는 바에 의하여 국가가 변호인을 붙인다.
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'##CSS' 카테고리의 다른 글
| 영역 관련 스타일 (1) | 2024.10.21 |
|---|---|
| 목록 관련 스타일 (0) | 2024.10.20 |
| 글꼴 관련 스타일 (0) | 2024.10.18 |
| 기타선택자 수업내용 복습 (5) | 2024.10.16 |
| 기본 선택자 수업내용 복습 (0) | 2024.10.15 |