[CSS]/Program source (CSS)
CSS 20231129 [프로그램 소스] - Test005, Test006, Test007, Test008
Jelly-fish
2023. 11. 29. 12:14
WebApp02
externalStyle.css
@charset "UTF-8";
h2 {color: blue;}
/* 아래와 같이 괄호를 열어서 자바처럼 작성할 수도 있다. */
p
{
font-size: 20pt;
font-weight: bold;
color: red;
}
Test005.html
Test005.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>
<style type="text/css">
/* p, i : 스타일이 둘 다 모두 적용 */
/* p i : 스타일이 i에만 적용 (단, 상위에 p가 있을 때만.) */
p i {color: red;}
/* 스타일의 적용 대상은 『i』 단, 상위에 『p』 가 존재하는 『i』만... */
/* 부모 자식 선택자. */
/* p i : i바로 직속 부모가 p가 아니고, span이다. 그러나 스타일 적용됨. 최상위 부모가 p이므로 */
/* p>i : 스타일 */
p>i {color: blue; font-size: 20pt;}
/* 스타일의 적용 대상은 『i』 단, 부모가 『p』인 『i』만... */
span {font-size: 30pt;}
p+span {color: orange;}
스타일의 적용 대상은 『span』 단, 『p』와 인접한 『span』만...
/* + : 형제 자매 선택자. 인접 선택자 */
</style>
</head>
<body>
<div>
<h1>문장 구조 선택자 활용 및 관찰</h1>
<hr>
</div>
<p>이 문장을 통해 <i>이중 태그</i>로 선택자를 사용하는 방법을 확인한다.</p>
<p>이 문장을 <span>통해 <i>이중 태그</i>로 선택자를 사용</span>하는 방법을 확인한다.</p>
<p>이 문장을 <i>통해 <span>이중 태그</span>로 선택자를 사용</i>하는 방법을 확인한다.</p>
<span>이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다.</span>
<!-- 바로 위에가 p여서 p와 붙어있는 span이 되어 Orange 컬러로 나타난다. -->
<span>이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다.</span>
<i>나도 i 거든~? ㅠㅠ</i>
<!-- 상위에 p가 없는 i이므로, 스타일 적용이 되지 않은 것을 알 수 있다. -->
</body>
</html>
Test006.html
Test006.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test006.html</title>
</head>
<body>
<div>
<h1>엘리먼트에 스타일 직접 적용</h1>
<hr>
</div>
<div>
<!-- 개별적으로 하나만 스타일을 적용시킬 때 사용하는 방식이다. -->
<p style="font-size: 20; color: blue;">원하는 스타일을 엘리먼트에 직접 삽입하여 적용한다.</p>
<p>단... 스타일을 적용받지 못한 상황이다.</p>
</div>
</body>
</html>
Test007.html
Test007.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test007.html</title>
<!-- 실제 css 파일을 html Document에 적용을 시켜야 된다. -->
<!-- link 태그를 통해 스타일을 적용시킨다. -->
<link rel="stylesheet" type="text/css" href="css/externalStyle.css">
</head>
<body>
<div>
<h1>외부 스타일 적용 실습</h1>
<hr>
</div>
<h2>스타일 시트 외부 문서를 불러와 적용하기</h2>
<p>외부 문서 저장은 확장자를 『.css』로 지정해야 한다.</p>
<h3>스타일 시트 외부 문서를 불러와 적용하기 끝~!!!</h3>
</body>
</html>
Test008.html
importStyle.css
@charset "UTF-8";
p
{
font-size: 5pt;
color: purple;
font-style: italic;
}
Test008.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test008.html</title>
<style type="text/css">
@import url("css/importStyle.css")
</style>
</head>
<body>
<div>
<h1>import 적용 방식</h1>
<hr>
</div>
<p>이와 같은 방식으로도 사용될 수 있다.</p>
스타일을 적용받지 못한 부분은 이렇게 표현 된다.
</body>
</html>