<!DOCTYPE html>
<!-- DTD(선언문)
문서형식이 html이다 -->
<html>
<head>
<!-- 문서의 정보 제공
UI요소는 head에 적지 않는다
<meta>,<link>,<script>와 같은 태그 사용-->
<meta charset="utf-8">
<!-- 문자 인코딩 방식을 utf-8(속성값)로 지정하여 한글 깨짐 방지
<meta>태그는 <title>태그 위쪽에, <link>와 <script>태그는 <title>태그 아래쪽에 위치 -->
<title> 웹페이지명 </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>제목</h2>
<p>본문</p>
<!-- body 부분은 웹브라우저에 노출됨. 태그를 이용해 웹콘텐츠를 저장.
탭키(들여쓰기)를 사용하여 부모/자식요소 설정
예) <h2>태그는 <body>태그의 자식요소이고, <body>태그는 <h2>태그의 부모요소 -->
<img src="img/shiba.jpg" alt="시바 강아지">
<video src="media/dew.mp4" muted autoplay loop controls>
<!--
텍스트 콘텐츠
1.제목 : <h1>-<h6>
2.본문(내용) : <p>
이미지 콘텐츠 : <img>
비디오 콘텐츠 : <video>
비디오 파일 형식이 표준화가 안되어 있으나 h264방식으로 인코딩한 mp4 파일형식은 모든 브라우저에서 재생가능.
오디오 콘텐츠 : <audio>
단일 태그는 경로src를 이용해 컨텐츠 저장
태그의 용도: 웹 콘텐츠를 저장하기 위해 사용
태그의 구성요소: 시작태그와 끝태그
태그의 작성 방법: 시작태그+웹콘텐츠+끝태그
UI요소
1. 로고<h1>, <img>
2. 메인 메뉴: <nav>, <ul>, <li>
3. 탑 메뉴: <ul>, <li>
4. 제목: <h2>, <h3>
5. 서브 제목: <h4>, <h5>
6. 푸터 로고: <h6>, <img>
7. 주소: <p>
8. 저작권: <p>
시멘틱 태그
<header>, <nav>, <section>, <article>, <aside>, <footer>
-->
</body>
</html>
'Coding' 카테고리의 다른 글
| html 선수학습(5) (0) | 2021.07.07 |
|---|---|
| html 선수학습(4) (0) | 2021.07.06 |
| html 선수학습(3) (0) | 2021.07.05 |
| html 선수학습(2) (0) | 2021.07.01 |
| CSS 선수학습 (0) | 2021.06.30 |