Everything has an expiration date
CSS 20231129 [프로그램 소스] - Test009, Test010, Test011, Test012, Test013 본문
[CSS]/Program source (CSS)
CSS 20231129 [프로그램 소스] - Test009, Test010, Test011, Test012, Test013
Jelly-fish 2023. 11. 29. 13:29
WebApp02
externalStyle.css
@charset "UTF-8";
h2 {color: blue;}
/* 아래와 같이 괄호를 열어서 자바처럼 작성할 수도 있다. */
p
{
font-size: 20pt;
font-weight: bold;
color: red;
}
Test009.html
Test009.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test009.html</title>
<link rel="stylesheet" type="text/css" href="css/externalStyle.css">
<style type="text/css">
@import url("css/importStyle.css");
p {font-size: 100pt; color: black;}
</style>
<!-- externalStyle(외부 css파일 링크)와 importStyle(css파일 임포트)를 두 개 모두 하게되면 -->
<!-- 어떤 것이 위에 오느냐에 따라 우선 순위가 바뀌게 된다! -->
<!-- 둘다 우선순위가 같으므로, 먼저 오는 것의 스타일을 <p></p>가 따르게 된다. -->
<!-- 【가까운 것】 우선으로 적용시킨다~!! -->
<!--★ 【스타일 적용 : ⓐ 가까운 것, ⓑ 덮어쓰기】 -->
<!-- ① 가장 가까운 것이 우선순위가 높은 것이다! -->
<!-- ② 덮어쓰기~!! -->
</head>
<body>
<div>
<h1>스타일 적용의 우선순위 규칙</h1>
<hr>
</div>
<p style="color: orange; font-size: 20pt;">이와 같은 상황이라면... 나는 어떻게 표현되어야 할까...</p>
<!-- inLine 방식으로 지정하자, 인라인 방식이 가장 가까운 것이 되어 -->
<!-- import와 link로 불러들여온 css 스타일을 무시하고, orange 컬러의 20pt 텍스트가 된 것을 확인할 수 있다! -->
</body>
</html>
Test010.html
Test010.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test010.html</title>
<style type="text/css">
p {color: blue; font-size: 20pt; font-family: 맑은 고딕;}
</style>
</head>
<body>
<div>
<h1>스타일 시트의 상속성</h1>
<hr>
</div>
<div>
<p>스타일 시트는 <b>상속성</b>을 가지고 있다. </p>
<!-- p의 범주 안에 b가 포함되므로, b까지 파란색으로 표시된 것을 확인할 수 있다. -->
</div>
</body>
</html>
Test011.html
Test011.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test011.html</title>
<style type="text/css">
p {color: blue; font-size: 20pt; font-family: 맑은 고딕;}
</style>
</head>
<body>
<div>
<h1>스타일 시트의 상속성</h1>
<hr>
</div>
<div>
<p>스타일 시트는 <b style="font-style: italic; color: red;">상속성</b>을 가지고 있다. </p>
<!-- p의 범주 안에 b가 포함되므로, b까지 파란색으로 표시된 것을 확인할 수 있다. -->
<!-- 덮어쓰기 개념이기 때문에, 인라인 스타일 위에 <style> 태그 스타일이 덮어쓰기 된다.-->
</div>
</body>
</html>
Test012.html
Test012.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>
<style type="text/css">
a {text-decoration: none; font-size: 20pt;}
a:visited {color: aqua;}
a:hover{color: orange; font-weight: bold;}
/* hover : 마우스 커서가 위로 올라가게 되면 스타일 적용이 된다. */
a:active {color: red;}
/* active: 마우스로 꾹 누르고 있으면 스타일이 변경된다. */
</style>
</head>
<body>
<div>
<h1>동적 선택자(가상 선택자, 가상 클래스, 상태 선택자, ...) 적용 실습</h1>
<hr>
</div>
<div>
<p>
<a href="http://www.daum.net">다음으로 바로가기</a>
</p>
<p>
<a href="http://www.naver.com">네이버로 바로가기</a>
</p>
<p>
<a href="http://www.google.com">구글로 바로가기</a>
</p>
</div>
</body>
</html>
Test013.html
Test013.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>
<style type="text/css">
a {text-decoration: none; font-size: 20pt;}
a:link {color: aqua;}
a:hover {color: orange; font-weight: bold;}
a.one:hover{color: yellow; font-family: 궁서;}
a.two:hover {color: red; font-family: 맑은 고딕;}
</style>
</head>
<body bgcolor="#334433" text="#ffffff">
<div>
<h1>한 화면에 두 가지 형태의 링크 설정</h1>
<hr>
</div>
<div>
<a class="one" href="http://localhost:3306/WebApp02/Test011.html">바로가기 1</a>
<a class="two" href="http://localhost:3306/WebApp02/Test012.html">바로가기 2</a>
</div>
</body>
</html>
'[CSS] > Program source (CSS)' 카테고리의 다른 글
| CSS 20231129 [프로그램 소스(CSS 종료)] - Test018, Test019, Test020 (0) | 2023.11.29 |
|---|---|
| CSS 20231129 [프로그램 소스] - Test014, Test015, Test016, Test017 (0) | 2023.11.29 |
| CSS 20231129 [프로그램 소스] - Test005, Test006, Test007, Test008 (0) | 2023.11.29 |
| CSS 20231128 [프로그램 소스] - Test001, Test002, Test003, Test004 (0) | 2023.11.29 |
| CSS 20231128 [CSS 개념 설명] (0) | 2023.11.28 |
'[CSS]/Program source (CSS)' Related Articles
more
