Web/CSS

CSS(3) 색과 텍스트 꾸미기

공판다2 2020. 11. 4. 16:10 
div { color : rgb(138, 43, 226); }

1) 색 이름으로 표현

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, yellow

2) 색 관련 프로퍼티

color : 색 			/* HTML 태그의 텍스트 글자색 */
background-color : 색 		/* HTML 태그의 배경 색 */
border-color : 색 		/* HTML 태그의 텍스트 테두리 색 */

3) 텍스트

text-indent : <length>|<percentage>;				/* 들여쓰기 */
text-align : left|right|center|justify;				/* 정렬 */
text-decoration : none|underline|overline|line-through;		/* 텍스트 꾸미기 */

4) 폰트

font-size : 30px;		/* 30픽셀 크기 */
font-size : medium;		/* 중간 크기 */
font-size : 1.6em;		/* 현재 폰트의 1.6배 크기 */
font-style : italic;		/* 폰트 스타일 */
font-weight : 300;		/* 폰트 굵기 */

[ 코드 ]

<!DOCTYPE html>
<head>
<title>색,텍스트,폰트 활용</title>
<style>
h3 { text-align : center; }
#list { text-align : right; }
#list span { text-decoration : line-through; font-size : 25px;  }
#list strong { text-decoration : overline; text-indent : 30em; }
#english {  }
.author {  text-align : left; font-size : 30px; }
</style>
</head>
<body class="main">
<h3>색,텍스트,폰트 활용</h3><hr/>
<div>
	<div>
	<ul id="list">
		<li><span style="background-color:deepskyblue">아무 하는 일 없이 시간을</span>
		허비하지 않겠다고 맹세하라.</li><br/>
		<li><strong style="background-color:brown">우리가 항상 뭔가를 한다면</strong>
		놀라우리만치 많은 일을 해낼 수 있다.</li><br/>
		<li id="english" style="background-color:fuchsia">
		"Determine never to be idle...</li><br/>
		<li id="english" style="background-color:darkorange">
		It is wonderful how much may be done if we are always doing."</li><br/>
	</ul>
	</div>
</div>
<p class="author" style="background-color:#6B8E20">- 토마스 제퍼슨 -</p>
</body>
</html>

 

[ 실행 화면 ]

 

저작자표시 (새창열림)