[출처] https://opentutorials.org/course/2039/10948
meta
웹에 대한 정보 제공
<meta charset="utf-8"> <!-- 인코딩 방식 선택 -->
<meta name=generator content="Frontweaver 8.2"> <!-- 생성자, 웹설명 -->
iframe
다른Web이나, 동영상등 삽입기능
보안문제 해결하라! (치명적) - sandbox속성 적용
<iframe src="https://opentutorials.org" height="1000" sandbox></iframe>
의미론적 Tag - 기능은 없지만 의미론적 기능을 부여하는 Tag
https://opentutorials.org/course/2039/10954
article | 본문 |
aside | 광고와 같이 페이지의 내용과는 관계가 적은 내용들 |
details | 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 |
figure | 삽화나 다이어그램과 같은 부가적인 요소를 정의 |
footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
main | 문서에서 가장 중심이 되는 컨텐츠를 정의 |
mark | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
nav | 문서의 네비게이션 항목을 정의 |
section | 문서의 구획들을 정의 (참고) |
time | 시간을 정의 |
<body>
<header>
<h1>HTML</h1>
</header>
<nav>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법</a></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
</nav>
<section>
<article>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</article>
</section>
<footer>
<li><a href="privacy.html">개인정보정책</a></li>
<li><a href="about.html">회사소개</a></li>
</footer>
</body>
검색엔진 최적화(SEO)
1. title, meta Tag를 그 페이를 대표할 수 있도록 작성
2. html이름을 그 페이지를 대표할 수 있도록 작성하라
https://opentutorials.org/course/1058
크롬개발자 도구 수업 바로가기
https://opentutorials.org/module/306/2865
모바일 기기 최적화
<meta name="viewport" content="width=device-width, initial-scale=1.0">
동영상 삽입
브라우저마다 지원형식이 다르므로 여러형식을 동시에 삽입하라!!!
<video width="500" controls>
<source src="C:/Users/neo21/Downloads/small.mp4">
<source src="C:/Users/neo21/Downloads/small.ogv">
</video>
https://opentutorials.org/course/1058
'WEB' 카테고리의 다른 글
[ HTML ] 입력 양식 (0) | 2023.04.12 |
---|---|
[ HTML ] HTML 주요 Tag (0) | 2023.04.11 |
[ HTML ] HTML 기본 (0) | 2023.04.11 |
댓글