ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML] ch06_s01~ch09 decoration, align, indent, spacing, transform, white_space, shadow, overflow
      [학원] yo-ons coding/[HTML] Summary&Example 2021. 7. 14. 16:51

      decoration, align, indent, spacing, transform, white_space, shadow, overflow

      s01_text_decoration

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style type = "text/css">
	#t1{text-decoration:underline;}			/*밑줄*/
	#t2{text-decoration:overline;}			/*윗줄*/
	#t3{text-decoration:line-through;}		/*중간줄*/
</style>
</head>
<body>
<h1>text-decoration</h1>
<p id="t1">밑줄</p>
<p id="t2">윗줄</p>
<p id="t3">중간줄</p>
</body>
</html>

       

      s02_text_align

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style type="text/css">
	#t1{text-align:left;}		/*기본 정렬*/
	#t2{text-align:right;}		/*오른쪽 정렬*/
	#t3{text-align:center;}		/*가운데 정렬*/
	#t4{text-align:justify;}	/*왼쪽과 오른쪽 동일하게 정렬*/
	
</style>
</head>
<body>
<h1>text-align</h1>
<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
<p id="t3">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
<p id="t4">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
</body>
</html>

       

      s03_text_indent

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent</title>
<style type="text/css">
	p{
	width:500px; 				/* 넓이 */
	margin:auto;				/* 태그 밖 여백 */
	border:1px solid black;		/* 테두리 */

	
	}	
	#t1{text-indent:2em;}		/* 들여쓰기 */
	#t2{text-indent:-2em;}		/* 내어쓰기 */
</style>
</head>

<body>
<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
<br>
<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>

</body>
</html>

       

       

      s04_text_spacing

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing/word-spacing</title>
<style type="text/css">
	#t1{letter-spacing:2em;}	/* 글자 간격 */
	#t2{word-spacing:2em;}		/* 단어 간격 */
</style>

</head>
<body>
<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>
<br>
<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>

</body>


</html>

       

       

      s05_text-transform

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-transform</title>
<style type="text/css">
	#t1{text-transform:capitalize;}		/* 첫글자 대문자 */
	#t2{text-transform:uppercase;}		/* 소문자를 대문자로 */
	#t3{text-transform:lowercase;}		/* 대문자를 소문자로 표시 */
</style>
</head>
<body>
<h1>text-transform</h1>
<p id="t1">pooR alice!</p>
<p id="t2">pooR alice!</p>
<p id="t3">pooR alice!</p>
</body>
</html>

      s06_text_white_space

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>white-space</title>
<style type="text/css">
/* 	공백인정- 공백이 그대로 나타남
	공백 불인정-공백이 하나로 나타남
	줄바꿈 인정-화면 사이즈에 맞춰서 줄이 바뀜
	줄바꿈 불인정-하단에 스크롤바가 나타남
 */
	#t1{white-space:pre;}		/* 공백 인정, 줄바꿈 불인정(디바이스의 넓이를 줄여도 다음 라인으로 이동하지 않음) */
	#t2{white-space:pre-line;}	/* 공백 불인정, 줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
	#t3{white-space:pre-wrap;}	/* 공백 인정, 줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
	#t4{white-space:nowrap;}	/* 공백 불인정, 줄바꿈 불인정(디바이스의 넓이와 관계없이 줄바꿈 불인정)*/
</style>

</head>
<body>
<p id="t1">t1 예를 들어                            다음                            그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있
다.</p>
<p id="t2">t2 예를 들어                            다음                            그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>

<p id="t3">t3 예를 들어                            다음                            그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>

<p id="t4">t4 예를 들어                            다음                            그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.
예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체할 수 있다.</p>

</body>
</html>

       

       

       

       

       

      s07_text_shadow

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text_shadow</title>
<style type="text/css">
	p{
		font-family:Arial;font-size:50px;
	}
	.text1{
		color:#06F;	
	}
	.text2{
		color:#C30;
	}
	.text3{
		color:#06F;
		text-shadow:3px 3px 5px #000;
		/* 
		가로 오프셋 거리: 그림자가 가로로 얼마나 떨어져 있는지 지정.
					 양수값은 글자의 오른쪽에, 음수값은 글자의 왼쪽에 그림자를 표시
		세로 오프셋 거리: 그림자가 세로로 얼마나 떨어져 있는지 지정.
					 양수값은 글자의 아래쪽에, 음수값은 글자의 위쪽에 그림자를 표시
		blur radius: 그림자의 번지는 정도 지정. 생략할 수 있으며, 생략할 경우 그림자가 선명하게 표시됨.
		
		그림자 색상: 그림자의 색상 지정. 색상은 16진수로 된 색상값을 사용할 수 있으며, 색상 이름이나 RGB 값 모두 사용할 수 있음.					 
		 */
	}
	.text4{
		color:#c30;
		text-shadow:3px 3px 5px #000;
	}
</style>
</head>
<body>
<p>
	<span class="text1">HTML</span> &amp;
	<span class="text2">CSS</span>
</p>
<p>
	<span class="text3">HTML</span> &amp;
	<span class="text4">CSS</span>
</p>
</body>
</html>

       

       

       

      s08_overflow

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text_shadow</title>
<style type="text/css">
	p{
		font-family:Arial;font-size:50px;
	}
	.text1{
		color:#06F;	
	}
	.text2{
		color:#C30;
	}
	.text3{
		color:#06F;
		text-shadow:3px 3px 5px #000;
		/* 
		가로 오프셋 거리: 그림자가 가로로 얼마나 떨어져 있는지 지정.
					 양수값은 글자의 오른쪽에, 음수값은 글자의 왼쪽에 그림자를 표시
		세로 오프셋 거리: 그림자가 세로로 얼마나 떨어져 있는지 지정.
					 양수값은 글자의 아래쪽에, 음수값은 글자의 위쪽에 그림자를 표시
		blur radius: 그림자의 번지는 정도 지정. 생략할 수 있으며, 생략할 경우 그림자가 선명하게 표시됨.
		
		그림자 색상: 그림자의 색상 지정. 색상은 16진수로 된 색상값을 사용할 수 있으며, 색상 이름이나 RGB 값 모두 사용할 수 있음.					 
		 */
	}
	.text4{
		color:#c30;
		text-shadow:3px 3px 5px #000;
	}
</style>
</head>
<body>
<p>
	<span class="text1">HTML</span> &amp;
	<span class="text2">CSS</span>
</p>
<p>
	<span class="text3">HTML</span> &amp;
	<span class="text4">CSS</span>
</p>
</body>
</html>

       

       

       

       

      s09_text_overflow

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
	/* 
	text-overflow
	속성			값
	clip		넘치는 텍스트를 잘라버림(기본값)
	ellipsis	말줄임표(...) 표시
	 */
	 .div01{
	 	overflow:hidden;
	 	white-space:nowrap;	/* 줄바꿈 안됨 */
	 	width:100px;
	 	text-overflow:ellipsis;
	 }
</style>
</head>
<body>
<div class="div01">
	엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않으면 일부 콘텐츠가 보이지 않게 된다.
</div>
</body>
</html>

       

      그림 및 내용 참고: 국비 교육 수업

       

       

      저작자표시 (새창열림)

      '[학원] yo-ons coding > [HTML] Summary&Example' 카테고리의 다른 글

      [HTML] ch08-cssColor  (0) 2021.07.15
      [HTML] ch07-cssList_s01~s05 list  (0) 2021.07.14
      [HTML] ch05_s04 ~ ch05_s14 import,tags, class, id, complex, group, descendant, child, attribute, a  (0) 2021.07.14
      [HTML] ch04_s01 ~ ch05_s03 semantic, inline, embedding, link, style  (0) 2021.07.13
      [HTML] ch01_s12~ch03_s03 iframe, form, video, audio  (0) 2021.07.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바