css 따라하기 3일 차 | text — 야금야금 개발

style.css

- 시작하기전에 style.css 시트를 만들고 시작할 것이다

@charset "UTF-8";
  /* style.css는 수업시간 
  공용스타일 파일 */
 
h1 {border-left:12px solid; 
 background-color:#aef;
 padding:0.3em;
 color: #39d;}

section {border: 3px solid #39d;
margin: 3em 1em;
padding: 1em;	}

section>h2 {border-bottom:2px solid;
	 color: #39d;}

text로 시작하는 속성's

text-align: ; 영역내의 글자 수평정렬
text-decoration: ; 글자의 줄들
text-indent: ; 들여쓰기
text-transform: ; 대소문자 지정
text-shadow: ; 글자의 그림자 지정
text-overflow: ; 영역밖의 글자 처리

1. text-align

- 영역내의 글자를 수평 방향으로 어디쪽에 정렬 할 것인지를 의미한다

left : 왼쪽 정렬 (default)
right : 오른쪽 정렬
middle : 가운데 정렬
justify : 양쪽 정렬

1. text-align | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
/* 1. text-align */
.bg01 {background-color:#eee;
 width: 500px;}

.ta01 {text-align: left;}
.ta02 {text-align: center;}
.ta03 {text-align: right;}
.ta04 {text-align: justify;}
</style>
</head>
<body>

<section>
<h2>text-align: ; 영역내의 글자 수평정렬</h2>

<p class="ta01 bg01">text-align:left; 글자 수평정렬 (ta01 bg01)</p>
<p class="ta02 bg01">text-align:center; 글자 수평정렬 (ta02 bg01)</p>
<p class="ta03 bg01">text-align:right; 글자 수평정렬 (ta03 bg01)</p>
 <!-- 의미없는 텍스트 생성기
(영문)https://www.lipsum.com/
(한글)
-->
<p class="ta04">(ta04)text-align:justify; 글자 수평정렬 Lorem ipsum dolor sit amet,
		consectetur adipiscing elit. Phasellus accumsan est tortor. Lorem
		ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc
		mauris, tristique nec nunc vel, interdum pretium ante. Donec semper
		tristique placerat. Maecenas a libero sed risus mollis vulputate nec
		et velit. Donec auctor nulla id justo elementum bibendum. Mauris
		consectetur, elit non mollis iaculis, massa risus ornare ipsum, a
		sagittis massa lacus ac ante. Suspendisse nec pretium nunc, vel
		fringilla velit. Lorem ipsum dolor sit amet, consectetur adipiscing
		elit. Nulla sit amet odio ac lectus dictum rhoncus sit amet et nunc.
		않은 이름자를 이런 거외다. 무성할 노루, 까닭이요, 내린 걱정도 별이 나의 듯합니다. 별이 노새, 당신은 말 아름다운
		이네들은 나의 있습니다. 이네들은 것은 나는 어머니, 가슴속에 사랑과 옥 봅니다. 슬퍼하는 같이 벌레는 사람들의 추억과 가득
		별에도 까닭입니다. 지나가는 새겨지는 피어나듯이 까닭입니다. 너무나 별 새워 나는 멀리 계집애들의 이름과, 애기 써
		까닭입니다. 노루, 아름다운 별 파란 다 계십니다. 이런 이웃 별 계집애들의 풀이 까닭입니다. 벌써 우는 노루, 아침이
		프랑시스 시인의 너무나 봅니다.
</p>
<input type="text" value="left(ta01)" class="ta01">
<input type="text" value="center(ta02)" class="ta02"> 
<input type="text" value="right(ta03)" class="ta03">
</section>

</body>
</html>

1. text-align | 결과 창

2. text-decoration

- 글자들에게 장식용 선을 추가시켜 준다

overline : 윗줄에 긋기
line-through : 중간에 긋기
underline : 밑줄 긋기
none : 줄 없음(default)

2. text-decoration | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
 /* 2. text-decoration */
.td01 {text-decoration:overline;}
.td02 {text-decoration: line-through;}
.td03 {text-decoration: underline;}
.td04 {text-decoration: none; }
.td04:hover {
	text-decoration: underline;}
</style>
</head>
<body>
<section>
 <h2>text-decoration: ; 글자의 줄들</h2>

 <p class="td01">text-decoration:overline; 글자의 윗줄</p>
 <p class="td02">text-decoration:line-through; 글자를 가로지르는 줄(취소선)</p>
 <p class="td03">text-decoration:underline; 글자의 밑줄</p>
 <p>
 text-decoration:
 <a href="#" class="td04">none</a> ; 글자의 줄 제거</p>
</section>
</body>
</html>

2. text-decoration | 결과 창

3. text-indent

- 문단의 첫 글자를 들여쓰기 할 때 얼마나 할지 결정 할 수 있다

- 단위는 px, em 등등 사용 가능

3. text-indent | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
 /* 3.text-indent */
.ti01 {text-indent: 10px;}
.ti02 {text-indent: 1em;}
.ti03 {border:1px solid;
	text-indent: 10%;}
.ti04 {text-indent: -10em;}
.ti04:hover {
 text-indent: 0;}
.ti05 {text-indent: 5em;}
</style>
</head>
<body>
<section>
 <h2>text-indent: ; 들여쓰기</h2>
 <p>양수, 음수 가능. 여러 줄일 경우 
   <span class="td03">첫 줄에만 적용</span>됨. </p>
 
 <p class="ti01">text-indent:10px; 들여쓰기(ti01)</p>
 <p class="ti02">text-indent:1em; 들여쓰기(ti02)</p>
 <p class="ti03">text-indent:10%; 들여쓰기(ti03)</p>
 <p class="ti04">text-indent:-10em; 들여쓰기(ti04)</p>
 <p class="ti05">(ti05)text-indent: ; 들여쓰기 e. Donec semper tristique placerat.
			Maecenas a libero sed risus mollis vulputate nec et velit. Donec
			auctor nulla id justo elementum bibendum. Mauris consectetur, elit
			non mollis iaculis, massa risus ornare ipsum, a sagittis massa lacus
			ac ante. Suspendisse nec pretium nunc, vel fringilla velit. Lorem
			ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet
			odio ac lectus dictum rhoncus sit amet et nunc. 않은 이름자를 이런 거외다. 무성할
			노루, 까닭이요, 내린 걱정도 별이 나의 듯합니다. 별이 노새, 당신은 말 아름다운 이네들은 나의 있습니다. 이네들은 것은
			나는 어머니, 가슴속에 사랑과 옥 봅니다. 슬퍼하는 같이 벌레는 사람들의 추억과 가득 별에도 까닭입니다. 지나가는 새겨지는
			피어나듯이 까닭입니다. 너무나 별 새워 나는 멀리 계집애들의 이름과, 애기 써 까닭입니다. 노루, 아름다운 별 파란 다
			계십니다. 이런 이웃 별 계집애들의 풀이 까닭입니다. 벌써 우는 노루, 아침이 프랑시스 시인의 너무나 봅니다.</p>
</section>
</body>
</html>

3. text-indent | 결과 창

4. text-transform

- 대소문자를 지정 해준다

none : 변경 없음(default)
lowercase : 전부 소문자로
uppercase : 전부 대문자로
capitalize : 첫 글자만 대문자로

4. text-transform | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
 /* 4.text-transform */
.tt01 {text-transform: none;}
.tt02 {text-transform: lowercase;}
.tt03 {text-transform: uppercase;}
.tt04 {text-transform: capitalize;}
</style>
</head>
<body>
<section>
 <h2>text-transform: ; 대소문자 지정</h2>
 <p class="tt01">tEXt-trANsforM : nONe; 대소문자 변경 없음</p>
 <p class="tt02">tEXt-trANsforM : loWErcaSe ; 소문자로 변경 </p>
 <p class="tt03">tEXt-trANsforM : uPPerCase; 대문자로 변경 </p>
 <p class="tt04">tEXt-trANsforM : caPItaliZe; 
  단어의 첫글자만 대문자로 변경</p>
</section>
</body>
</html>

4. text-transform | 결과 창

5. text-shadow

- 글자에 그림자를 주는 속성이다

- 4가지 속성 : [x좌표], [y좌표], [퍼짐값(높을수록 뿌옇게 됨)], [색상값]

5. text-shadow | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
 /* 5. text-shadow */
 #sec05>p {
 /* 
 1. 관계선택자 A>B는 부모자식. 
 상위요소 A의 바로 한단계 아래, 안에
 있는 하위요소 B를 불러오는 선택자.
 
 2. 관계선택자 A B는 조상자손.
 상위요소 A의 아래, 안에 있는 
 모든 하위요소 B를 불러오는 선택자.
 */
 font-size: 50px;	
 font-weight: bold;
}
.ts01 {
text-shadow: 2px 3px 6px #000; }
.ts02 {
text-shadow: -2px -3px 6px #000;} 
.ts03 {color:#fff;
text-shadow: 0 3px 3px #000;}
.ts04 {
background-color: #000;	
padding:0.5em;
text-align: center;
text-shadow: 0 0 20px #bef;}
.ts05 {
background-color: #000;	
padding:0.5em;
text-align: center;}
.ts05:hover {
 text-shadow: 0 0 30px #f02289;
 transition:1.3s /* ~초 동안 속성값이 서서히 변화
 (단순한 애니 효과) */;	}
.ts06 {
 text-shadow: 2px 2px 0 #e00, -2px -2px 0 #00e;	
 color: #fff;}
.ts06:hover {
 text-shadow: 0 0 0 #eee, 0 0 0 #eee;	
 color: #eaeaea;
 transition:1.5s;}
</style>
</head>
<body>
<section id="sec05">
 <h2>text-shadow: n n n n; 글자의 그림자 </h2>
 <pre>
       Xn             Yn              n        n 
  그림자의 X위치  그림자의 Y위치    퍼짐값    색상값
    ---  양수,음수 가능 ----        양수만
 </pre>
 <p class="ts01">text-shadow: 2px 3px 6px #000; 글자의 그림자 </p>
 <p class="ts02">text-shadow: -2px -3px 6px #000; 글자의 그림자 </p>
 <p class="ts03">text-shadow: 0 3px 3px #000; 글자의 그림자 </p>
 <p class="ts04">text-shadow: 0 0 20px #bef; 글자의 그림자 </p>
 <p class="ts05">text-shadow: 0 0 30px #ec7eef; 글자의 그림자 </p>
 <p class="ts06">text-shadow: 2px 2px 0 #e00, -2px -2px 0 #00e; 글자의 그림자 </p>
 <p class="ts07">text-shadow: ; 글자의 그림자 </p>
 <p class="ts08">text-shadow: ; 글자의 그림자 </p>
</section>
</body>
</html>

5. text-shadow | 결과 창

- 크기가 커서 반쯤 생략

6. text-overflow

- 영역 밖으로 나가는 글자들을 관리하는 속성

visible : 보이게 하기(default)
hidden : 숨김
scroll : 해당 태그 내에서 스크롤바로 내릴 수 있게 만들기
auto : 해당 태그 내에서 스크롤바로 내릴 수 있게 만드는데 크기가 작다면 스크롤바 생성 안함

6. text-overflow | 예시 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" rel="stylesheet">
<style>
 /* 6. text-overflow */
section {width: 43%;
display: inline-block;}
section>p {
border: 3px solid #acf;
width: 500px;
height: 400px; }
#sec01>p {overflow: visible;}
#sec02>p {overflow: hidden;}
#sec02>p:hover>img {
	width: 300px;} 
#sec03>p {overflow: scroll;}
#sec04>p {overflow: auto;}
aside {
border: 3px dashed #777;
width: 700px;
margin: 5em auto;
padding: 1em;} 
aside>p {
border: 1px solid #333;	
width: 400px;
height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
aside>p:hover {
width: 800px;
background-color:#000;
color:#fff;
transition:1.2s;}
</style>
</head>
<body>
<h1>overflow 영역 밖의 내용 처리법</h1>
<ul>
 <li>overflow:visible; 기본값. 보임</li>
 <li>overflow:hidden; 숨김</li>
 <li>overflow:scroll; 항상 스크롤바 생성</li>
 <li>overflow:auto; 필요에 따라 스크롤바 생성</li>
</ul>

<section id="sec01">
 <h2>overflow:visible; 기본값. 보임</h2>
 
 <p>overflow:visible; 기본값. 보임 <br>
  <img alt="mail" src="img/mail02.jpg"></p>
</section>

<section id="sec02">
 <h2>overflow:hidden; 숨김</h2>
 <p>overflow:hidden; 숨김<br>
  <img alt="mail" src="img/mail02.jpg"></p>
</section>

<section id="sec03">
 <h2>overflow:scroll; 항상 스크롤바 생성</h2>
 <p>overflow:scroll; 항상 스크롤바 생성<br>
  <img alt="mail" src="img/mail02.jpg"></p>
</section>

<section id="sec04">
 <h2>overflow:auto; 필요에 따라 스크롤바 생성</h2>
 <p>overflow:auto; 필요에 따라 스크롤바 생성<br>
  <img alt="mail" src="img/mail02.jpg"></p>
</section>

<aside>
 <h2>영역 밖의 text를 말줄임표(...)로 표시하기</h2>
  <ul>
   <li>white-space: nowrap; 공백처리 - 자동 줄바꿈 금지   </li>
   <li>overflow: hidden; 영역 밖의 내용 - 숨김</li>
   <li>text-overflow: ellipsis; 
                   영역 밖의 text - 말줄임표(...)로 표시</li>
  </ul>
 
 <p>게시판 등에서 한정된 공간에 글자가 길어서 영역을 넘을 때
 영역 밖의 글자를 말줄임표로 표시하기</p>
</aside>
</body>
</html>

6. text-overflow | 결과 창

저작자표시 (새창열림)

'Web > CSS' 카테고리의 다른 글

css 따라하기 2일 차 \| font (0)	2022.06.16
css 따라하기 1일 차 \| 3가지 사용법, 선택자와 선언부, 우선순위 (0)	2022.06.08