HTML5 2일차
앵커태그
-
a : 하이퍼 링크 생성
-
절대경로 : /
-
상대경로 : chaelyn.jpg , image/chaelyn.jpg , ../chaelyn.jpg
-
아이디 경로 : #name - id
-
메일 경로 : chaelyn@chaelyn.co.kr
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://keduit.com">한국정보교육원</a><br>
<a href="https://naver.com">네이버</a><br>
<a href="https://google.com"> <target="_blank">구글</a><br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 페이지 연결하기</title>
</head>
<body>
<h1>내부 페이지 연결하기</h1>
<a href="#alpha">Alpha 부분</a> => #과 id부분 일치
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
<hr>
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, officia ducimus nisi quae dolorum libero facere quis? Obcaecati corrupti possimus corporis repellat sapiente libero exercitationem rerum aperiam, esse minus reprehenderit?</p>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil necessitatibus, cumque quod quidem animi accusantium hic excepturi sapiente sit deserunt repudiandae perferendis sint praesentium sunt consequuntur id suscipit cupiditate.</P>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi molestiae dignissimos dolorum natus rerum ea nostrum, suscipit sequi officiis facere doloribus laborum totam veniam aut impedit quasi nesciunt, nisi mollitia.</p>
<h1 id="beta">Beta</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est earum ipsam facilis, reprehenderit cum dolores sunt tempore nobis magni iste animi adipisci molestias dolorum nesciunt. Cupiditate libero debitis possimus rem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque nostrum quo aliquid totam. Assumenda consequatur dolorem blanditiis obcaecati id, in, labore omnis deserunt explicabo fugit cum, voluptates pariatur itaque. Maxime?
Cum, animi! Nihil dignissimos alias ipsam numquam nostrum deleniti consequatur esse harum fugiat suscipit sint neque incidunt recusandae doloribus soluta aliquid repellat, officiis inventore in nobis vel optio. Adipisci, libero?
Deserunt aperiam debitis, delectus exercitationem iste modi, voluptatibus perspiciatis est culpa architecto eos quasi sapiente amet quae alias, ut nobis quos accusantium non. Quo ipsam voluptatem fugit aut quod ad!
Voluptatibus quo excepturi harum necessitatibus. Animi quasi tempore, odio fugiat ullam dolorum maxime, doloribus officia, at non recusandae. Error aperiam suscipit praesentium odit, fuga perspiciatis dolores vero eligendi ducimus fugit.
Dignissimos fugiat consequuntur nam, neque delectus ratione! Aliquid eum, illo laboriosam ab commodi tenetur odit a quidem voluptatibus accusamus temporibus necessitatibus ad culpa sit modi dolorem velit qui iure at.</p>
<h1 id="gamma">Gamma</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio maiores possimus odit quae qui amet quasi consequatur sequi corrupti illum provident magni perspiciatis voluptatum nemo error molestias, facilis sit aliquam.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus corporis eum dolorem, eligendi possimus nobis et veritatis fugit id nulla incidunt in aliquid fuga dolores, minus sunt expedita quod laudantium?
Atque nemo animi molestias expedita libero, tempora dolore quo perspiciatis possimus deleniti exercitationem nam ab magnam, autem culpa! Eaque sunt eum quibusdam consequuntur blanditiis nulla pariatur nesciunt aliquid, ipsum velit!
Voluptatibus impedit, labore quam exercitationem sit praesentium blanditiis hic rerum ratione, voluptatem maiores debitis culpa aut. Velit a suscipit corporis nulla libero, nihil doloribus ipsum aliquid facere perferendis ullam dolore!
Unde eius quas rem a accusantium praesentium suscipit laboriosam illum illo ab molestiae tempore fugiat ex quos corporis ipsum earum, eveniet facilis maxime error molestias, iusto sit quidem? Eius, perferendis?
Ullam eveniet saepe sunt sapiente dignissimos recusandae expedita cupiditate hic blanditiis exercitationem voluptatum itaque, odit quod reprehenderit architecto rerum nemo sint commodi alias error. Harum nam commodi consectetur quas natus.
Obcaecati modi inventore voluptatum temporibus incidunt unde. Tenetur numquam doloribus enim earum laboriosam sit consectetur veniam, maxime quia, corporis ut omnis eos quod neque in ea voluptatum iure, delectus assumenda!
Facilis accusantium nobis iste quod architecto, cumque eum animi voluptates ab laudantium vero commodi molestiae explicabo error totam nihil recusandae est reiciendis, excepturi doloribus. Saepe ut laudantium recusandae natus harum.
Reiciendis veritatis ut, maiores porro dolore, dolorum sapiente error asperiores odit nihil, aliquid repellendus recusandae itaque consequatur enim architecto. Error tempora totam eveniet excepturi qui nostrum nam, vero odit quis.
Pariatur natus exercitationem rem eveniet repudiandae amet error ipsam sed magnam eaque id numquam placeat voluptatum deleniti nesciunt necessitatibus est incidunt officiis et, ipsum unde. Iusto aspernatur ea omnis quod.
Reprehenderit fugit ipsa, obcaecati excepturi sit voluptates molestias nesciunt pariatur! Voluptates eligendi voluptas et velit officia ab, culpa magnam ratione officiis obcaecati nostrum quia quae eius aperiam commodi adipisci quidem.</p>
</body>
</html>
폰트 태그
-
b (bold) : 굵은글자
-
i (italic) : 기울어진 글자
-
small : 작은글자
-
sub (subscript) : 아래 첨자
-
sup (superscript) : 위 첨자
-
ins (insert) : 밑줄 글자
-
del (delete) : 취소선이 그어진 글자
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TEXT Basic Font</title>
</head>
<body>
<h1><b>Lorem ipsum dolor sit amet consectetur.</b></h1>
<h1><i>Lorem ipsum dolor sit amet consectetur.</i></h1>
<h1><small>Lorem ipsum dolor sit amet consectetur.</small></h1>
<h1>Lorem ipsum dolor <sub>sit amet consectetur.</sub></h1>
<h1>Lorem ipsum dolor <sup>sit amet consectetur.</sup></h1>
<h1><ins>Lorem ipsum dolor sit amet consectetur.</ins></h1>
<h1><del>Lorem ipsum dolor sit amet consectetur.</del></h1>
<hr>
<b>Lorem ipsum dolor sit amet consectetur.</b><br>
<i>Lorem ipsum dolor sit amet consectetur.</i><br>
<small>Lorem ipsum dolor sit amet consectetur.</small><br>
Lorem ipsum dolor <sub>sit amet consectetur.</sub><br>
Lorem ipsum dolor <sup>sit amet consectetur.</sup><br>
<ins>Lorem ipsum dolor sit amet consectetur.</ins><br>
<del>Lorem ipsum dolor sit amet consectetur.</del><br>
</body>
</html>
테이블 태그
-
table : 표삽입
-
tr (talbe row) : 표에 행 삽입
-
th (table heading) : 표의 제목 셀 생성
-
td (table data) : 표의 일반 셀 생성
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tbody>
<tr>
<td>1교시</td>
<td>영어</td>
<td>국어</td>
<td>과학</td>
<td>수학</td>
<td>미술</td>
</tr>
<tr>
<td>2교시</td>
<td>체육</td>
<td>기술</td>
<td>윤리</td>
<td>지리</td>
<td>코딩</td>
</tr>
</tbody>
</body>
</html>
미디어 태그
-
img 태그
-
src : 이미지의 경로 지정
-
alt : 이미지가 없을 때 나오는 글자 지정
-
width : 이미지의 너비 지정
-
height : 이미지의 높이 지정
-
-
audio, video 태그
-
src : 음악, 비디오 파일의 경로 지정
-
preload : 음악, 비디오를 준비 중일때 데이터를 모두 불러올지 여부 지정
-
autoplay : 음악, 비디오의 자동 재생 여부 지정
-
loop : 음악, 비디오의 반복 여부 지정
-
controls : 음악, 비디오 재생 도구 출력 여부 지정
-
-
video 태그
-
width : 비디오의 너비 지정
-
height : 비디오의 높이 지정
-
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="Kalimba.mp3" controls="controls"></audio>
<img src="wink.png" alt="윙크강아지" width="300">
</body>
</html>
댓글남기기