https://opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리
opentutorials.org
위의 수업을 다 보고나서 전체적인 정리를 한 것이다.
HTML을 정보를 전달하는 관점에서 생각하자.
<!DOCTYPE html>
<html>
<!--가장 밖에 html 태그를 넣는다-->
<head>
<!--본문의 내용이 아닌 경우 head에 넣는다-->
<meta charset="utf-8">
<!--인코딩 방식 설정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--디바이스 폭만큼 지정해라, 확대를 지정-->
<title>semantic</title>
<!--탭의 제목 설정-->
</head>
<body>
<header>
<h1><a href="HTML_07_index.html">HTML</a></h1>
</header>
<!--header은 화면에 변화는 없지만 헤더부분이라는 의미를 나타낸다-->
<nav>
<ol>
<li><a href = "HTML_07_A.html">A</a></li>
<li><a href = "HTML_07_B.html">B</a></li>
<li><a href = "HTML_07_C.html">C</a></li>
<li><a href = "HTML_07_D.html">D</a></li>
</ol>
</nav>
<!--네이게이션이라는 정보를 전달 - 의미론적으로 전달-->
<section>
<article>
<h2>단어</h2>
영어 단어
</article>
<!--본문이라는 뜻-->
<article>
<h2>단어</h2>
영어 단어
</article>
<!--본문이라는 뜻 - 여러개를 사용할 수 있음-->
</section>
<footer>
<ul>
<li><a href="privacy.html">개인보호정책</a></li>
<li><a href="about.html">회사소개</a></li>
</ul>
</footer>
<iframe src="iframetest.html" width="500" height="500" sandbox></iframe>
<!--외부컨텐츠를 가져올때 사용한다, 유튜브 가능-->
<!--출처가 불분명한 사이트는 조심해야함, 보안 측면에서 위험할 수도 있음-->
<!--가져온 페이지에서 자바스크립트가 실행될 수도 있음-->
<!--sandbox 통해서 막을 수 있다-->
</body>
</html>'프로그래밍 > HTML' 카테고리의 다른 글
| div 태그와 span 태그 (0) | 2021.08.09 |
|---|---|
| HTML 기초 2 (0) | 2021.07.22 |
| HTML 기초 1 (0) | 2021.07.21 |