[CSS]/Program source (CSS)

CSS 20231129 [프로그램 소스(CSS 종료)] - Test018, Test019, Test020

Jelly-fish 2023. 11. 29. 13:41

 

WebApp02

 

Test018.html

Test018.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test018.html</title>

<!-- Cross browsing : 크로스 브라우징은 동일성이 아닌, 동등성을 의미하는 것이다. 
어느 한 쪽에 치우치지 않도록 최대한 표준인 요소를 사용하여 웹페이지를 제작해야 한다는 뜻이다.-->

<style type="text/css">
	
	p {font-size: 24pt;}
	span {font-size: 12pt;}
	
</style>

</head>
<body>

<div>
	<h1>수직 정렬 실습</h1>
	<hr>
</div>

<div>
	<p>
	
		<!-- vertical : 창문 커튼 같은 것. 수직으로(↑↓) 조절 -->
		<span style="vertical-align: sub; color: red;">이번 실습을 통해 확인할 text 에는</span>
		<span>수직 정렬과 관련된 내용이</span>
		<span style="vertical-align: super; color: blue;">포함되어 있다.</span>
	</p>
</div>

</body>
</html>

 

 

 

 

 

Test019.html

 

 

Test019.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>

<style type="text/css">

	* {font-size: 20pt;}

</style>

</head>
<body>

<div>
	<h1>CSS를 활용한 대소문자 지정 실습</h1>
</div>

<div>
	<!-- 실제 내용은 그대로인데, 사용자에게 보여지는 것만 달라지는 것 뿐이다. -->
	<span style="text-transform: capitalize;">Flowers make our rooms cheerful.</span>
	→ capitalize 의 경우 
	<br><br>
	
	<span style="text-transform: none;">Flowers make our rooms cheerful.</span>
	→ none 의 경우 	<!-- (default 값이다.) -->
	<br><br>
	
	<span style="text-transform: uppercase;">Flowers make our rooms cheerful.</span>
	→ uppercase 의 경우 <!-- 대문자 변환 -->
	<br><br>
	
	
	<span style="text-transform: lowercase;">Flowers make our rooms cheerful.</span>
	→ lowercase 의 경우 <!-- 소문자 변환 -->
	<br><br>
	
</div>

</body>
</html>

 

 

 

 

Test020.html

colorStyle.css

@charset "UTF-8";


p
{
	color: lime;
}

h2
{
	color: #0000a0;
}

/* 마우스 커서를 위에 올려보면, 어떤 색인지 알 수 있다! */
/* 팔레트 버튼을 클릭해서, 사용자 지정 색을 코드로 나타낼 수도 있다~ */
span
{
	color: #5adcd9;
	/* 아름다운 에메랄드+민트빛 ㅎㅎ */
}

 

 

 

Test020.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>

<link rel="stylesheet" type="text/css" href="css/colorStyle.css">

</head>
<body>

<!-- 이클립스 관련 기능적인 팁. -->

<div>
	<h1>색상 적용 실습</h1>
	<hr>
</div>

<div>
	<h2>color 에 관하여...</h2>
	<span>color 속성은 html 을 비롯하여 css 에서도 
	아주 많이 사용하는 속성이다.</span>
	<p>사용 방법은 RGB Hex 값 (#RRGGBB) 형식으로 지정할 수도 있고<br>
	css 에서 지원하는 16가지 색상의 이름을 바로 적용할 수도 있다.</p>
</div>

</body>
</html>