2024.03.28
비디오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<!--
controls : 제어판 생성
autoplay : 자동 실행(실행 안됨)
-->
<h3>video 태그를 이용한 동영상 표시</h3>
<video src="../files/river.mp4" width="320" height="240"
controls autoplay="autoplay"></video>
<!--
autoplay : 자동 실행(muted를 명시해야 자동 실행됨)
-->
<video src="../files/river.mp4" width="320" height="240"
controls autoplay muted></video>
<!--
poster : 동영상 파일이 호출되기 전에 미리 보여지는 정지 이미지
-->
<video src="../files/river.mp4" width="320" height="240"
controls poster="../files/poster.jpg"></video>
<h3>다양한 동영상 포맷 사용</h3>
<video src="../files/river.mp4" width="320" height="240" controls></video>
<video src="../files/river.webm" width="320" height="240" controls></video>
<video src="../files/river.ogv" width="320" height="240" controls></video>
<video src="../files/river.mov" width="320" height="240" controls></video>
<h3>동영상 파일을 브라우저 호환성 있게 링크하기</h3>
<video width="320" height="240" controls>
<source src="../files/river.mp4" type="video/mp4"></source>
<source src="../files/river.webm" type="video/webm"></source>
<source src="../files/river.ogv" type="video/ogv"></source>
<source src="../files/river.mov" type="video/mov"></source>
</video>
</body>
</html>
오디오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<h3>사운드 플레이하기</h3>
<audio src="../files/old_melody.mp3" controls autoplay></audio>
<br>
<audio src="../files/old_melody.ogg" controls autoplay></audio>
<h3>다양한 사운드 포맷 지원</h3>
<audio controls>
<source src="../files/old_melody.mps"></source>
<source src="../files/old_melody.ogg"></source>
</audio>
</body>
</html>
CSS
인라인 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 방식</title>
</head>
<body>
<h3>인라인 방식(태그에 직접 스타일을 명시하는 방식)</h3>
<h1 style="color:red">인라인 방식</h1>
<span style="font-size:15pt;color:yellow;background-color:green">안녕</span>
</body>
</html>
내장 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedding Style</title>
<style type="text/css">
h1 {color:green;}
span {font-size:20pt;}
</style>
</head>
<body>
<h3>Embedding Style : 문서의 head 태그에 Style 태그를 추가하고 style 태그에 스타일 명시</h3>
<h1>임베이드 방식</h1>
<span>봄이 빨리 왔으며~~</span>
</body>
</html>
링크 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link Style</title>
<!--
link : 외부 리소스 링크
속성
rel : 현재 문서와 외부 리소스 사이의 관계를 명시
-->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h3>링크 스타일 : 스타일이 명시된 별도의 파일을 링크하는 방식</h3>
<span>여름이 벌써 왔네요!!</span>
</body>
</html>
@import
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>import</title>
<!--
외부 파일을 링크하고 별도로 style 태그로 페이지에 스타일을 줄 수도 있지만 아래와 같이
style 태그 안에서 외부 스타일 파일을 import할 수도 있음 -->
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
@import url("style.css");
h1{
color:gray;
}
h2{
color:darkred;
}
</style>
</head>
<body>
<h1>import 하기</h1>
<h2>겨울</h2>
<span>서울</span>
</body>
</html>
/* style.css 파일 */
@charset "UTF-8";
span{
font-size:20pt;
color:red;
}
!important
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우선 순위 적용</title>
<style type="text/css">
h1{color:red !important;}
h1{color:yellow;}
</style>
</head>
<body>
<h1>봄</h1>
</body>
</html>
CSS 선택자
태그 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자</title>
<style type="text/css">
/*태그 선택자 : 태그명을통해서 동일한 이름의 태그 선택*/
span{
font-family:serif;/* 글꼴 지정 */
font-size:20pt;/* 글자의 크기 지정 */
background-color:yellow;/* 배경색 지정 */
}
p{
font-size:25pt;
background-color:pink;
}
</style>
</head>
<body>
<span>가을이 빨리 와라</span> <!-- 인라인 레벨 -->
<p>겨울이 오면</p> <!-- 블럭 레벨 -->
<span>봄이 오는 소리</span> <!-- 인라인 레벨 -->
</body>
</html>
클래스 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 선택자</title>
<style type="text/css">
/* 클래스 선택자 : 복수의 태그 클래스 선택자를 지정할 수 있음 */
.main-ft{color:blue;background-color:yellow;}
.main-sp{font-size:30pt;}
</style>
</head>
<body>
<div class="main-ft">기분 좋은 하루</div>
<br>
<span class="main-ft">4월은 봄의 계절</span>
<p class="main-ft main-sp">오늘은 목요일</p>
<span class="main-sp">행복한 가정</span>
</body>
</html>
아이디 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 선택자</title>
<style type="text/css">
/* 아이디 선택자는 문서에서 한 번만 적용 */
#layout_ft {font-size:30pt; color:blue; background-color:yellow;}
#layout_sp {font-size:25pt; color:red; background-color:pink;}
#layout_dv {font-size:15pt; color:white; background-color:black;}
#layout_dm {font-size:35pt; color:white; background-color:green;}
</style>
</head>
<body>
<div id="layout_ft">기분 좋은 하루</div>
<br>
<span id="layout_sp">3월의 끝</span>
<br>
<p id="layout_dv">오늘은 목요일</p>
<span id="layout_dm">내일은 금요일</span>
</body>
</html>
태그 선택자와 클래스 선택자 연계
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 클래스 선택자 연계</title>
<style type="text/css">
.item{
color:orange;
}
.item2{
color:pink;
}
h1.item{
color:blue;
background-color:skyblue;
}
</style>
</head>
<body>
<h1 class="item">하늘</h1>
<h1 class="item2">바다</h1>
<h1>별</h1>
<span class="item">비행기</span>
</body>
</html>
태그 선택자와 ID 선택자 연계
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 ID 선택자 연계</title>
<style type="text/css">
h1{
color:green;
background-color:gray;
}
h1#target{
color:pink;
background-color:red;
}
</style>
</head>
<body>
<h1 id="target">가을</h1>
<h1>별</h1>
<span>바다</span>
</body>
</html>
그룹 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style>
/* 그룹 지정은 여러개의 태그에 동일한 스타일을 적용하고 싶을 때 태그를 가리키는 선택자들을 , 로 나열해서 지정하는 방식 */
h1,p{font-size:20pt;background-color:yellow;}
</style>
</head>
<body>
<h1>여러개의 태그를 동시에 선택</h1>
<span>오늘은 목요일</span>
<p>여기는 서울입니다.</p>
</body>
</html>
후손 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>후손 선택자</title>
<style>
/* 지정한 후손 태그와 일치하는 모든 태그를 선택함 */
body div {
/* 선 : 굵기 실선 파랑 */
border:3px solid blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>바나나</li>
<li>귤</li>
<li>망고</li>
<li>포도</li>
</ul>
<div>하늘</div>
</div>
<p>
<span>하하</span>
</p>
</body>
</html>
자식 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자</title>
<style>
/* 지정한 자식 태그(직계 자식만) 선택 */
body > div {
/* 선 : 굵기 실선 파랑 */
border:3px solid blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>바나나</li>
<li>귤</li>
<li>망고</li>
<li>포도</li>
</ul>
<div>하늘</div>
</div>
<p>
<span>하하</span>
</p>
</body>
</html>
동위(이웃) 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동위(이웃) 선택자</title>
<style type="text/css">
/*
선택자A+선택자B : 선택자A 바로 뒤에 위치하는 선택자B만 선택
선택자A~선택자B : 선택자A 뒤에 위치하는 선택자B와 동일한 종류의 태그를 모두 선택
*/
h1+h2 {
color:red;
}
div~p {
color:blue;
}
</style>
</head>
<body>
<h1>header1</h1>
<h2>header2</h2> <!-- h1+h2 -->
<h2>header2</h2>
<h2>header2</h2>
<div>div</div>
<p>paragraph</p> <!-- div~p -->
<p>paragraph</p> <!-- div~p -->
<p>paragraph</p> <!-- div~p -->
<p>paragraph</p> <!-- div~p -->
</body>
</html>
속성 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style type="text/css">
/* 요소[속성] 특정 속성을 가지고 있는 태그를 선택 */
/* a태그이면서 title이라는 속성을 갖고 있는 태그 */
a[title] {color:yellow;background-color:pink;font-size:20pt;}
/* 요소[속성=값] 속성 안의 값이 특정 값과 같은 태그 선택 */
/* a태그이면서 title이라는 속성을 갖고 그 값이 "홈페이지" 인 태그 */
a[title="홈페이지"] {color:blue;background-color:red;font-size:10pt;}
/* 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 태그를 선택 */
/* a태그이면서 title이라는 속성을 갖고 그 값(공백으로 단어 구분)에 "email"을 포함하는 태그 */
a[title~="email"] {color:white;background-color:gray;font-size:40pt;};
</style>
</head>
<body>
<h3>속성 선택자</h3>
<a href="index.html" title="포트폴리오">포트폴리오</a>
<a href="index.html" title="홈페이지">홈페이지</a>
<a href="index.html" title="contact email link">이메일</a>
</body>
</html>
