처음부터 차근차근
HTML 정리 본문
HTML이란, 웹 페이지를 만드는 데 사용하는 언어이다.
내용이 쉬워서 이해하기 쉽고, 초보자가 입문하기 좋다.
HTML5 문서 구조
<DOCTYPE html>
<head>
<meta charset="utf-8">
<title>soyoung</title>
</head>
<body>
<h1>Hello~!</h1>
</body>
</html>
HTML 구성
태그 : <title>
내용(content) : 태그로 둘러쌓인 문자열
엘리먼트 : 태그 + 내용, html의 기본 구성 단위
속성 : <title color="yellow">, 엘리먼트의 상세한 표현
속성값 : 위의 코드에서 yellow
html의 엘리먼트 안에 body의 엘리먼트가 있는 구조이다.
엔티티 코드(entity code)
특수 문자나 특수 기호를 웹문서에 표현할 때 사용하는 것
- 공백문자
- 인용부호(") "
- 앤퍼샌드(&) &
- ~보다 작은(<) <
- ~보다 큰(>) >
- 저작권(©) ©
빈 태그(empty tag)
속성과 속성값은 갖을 수 있지만 내용은 갖지 않는 태그
ex) <meta>,<hr>, <br>, <img>, <area>, <input>
tag 정리
글자 관련 태그
<i>기울인 글자 태그
<em>강조 태그(+ 기울임)
<strong>강조 태그(em보다 더)
<sub> 아래 첨자
<sup> 위 첨자
<ins> 밑줄 글자
<del> 취소줄
<mark> 마크(다른 색깔로 강조)
<hr> 수평줄
<address>연락처
<time> 시간
리스트 태그
<ol type="A"> <!-- A. B. C. .....-->
<li></li>
<li></li>
</ol><ul type="disc"> <!-- 검은색 원 ●. ●. ●. ....-->
<li></li>
<li></li>
</ul>
a 태그
<a href="링크"></a>
테이블 태그
<table>
<th>표제목</th>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<caption></caption> 표 제목
<thead></thead> 표 머리
<tbody></tbody>표 본문
<tfoot></tfoot> 표 꼬리
그림 관련 태그
<figure> 그림 태그
<figcaption> 그림 제목 태그
audio 태그
<audio src="" autoplay loop preload="none" controls>
<!-- controls : 화면에 제어기 나옴, src="" : 아래처럼 source 태그가 있다면 사용하지 않음-->
<source src=".mp3" type="audio/ogg">
<source src="" type="audio/mpeg">
</audio>
video 태그
<video src="" autoplay loop preload="none" controls width="320" height="240" poster="audio.jpg">
<source src=".mp4" type="audio/ogg">
<source src="" type="audio/mpeg">
</video>
공간 분할 태그
보통 블록 형식 태그들을 하나로 묶어 감쌀 때는 <div> 태그를,
내부에 인라인 형식 태그들을 감쌀 때는 <span> 태그를 사용한다.
시맨틱 태그
<header></header> : 머리말
<nav></nav> : 메뉴
<aside> : 보조영역
<section> : 형식적구분
<article> : 내용적 구분
<footer> : 꼬리말 영역
시맨틱 레이아웃 방식
레이아웃 영역을 시맨틱 태그를 이용하여 구분하는 방식이다.
출처 : 모바일웹구축실무(21-2학기)김용남교수 강의 내용 변형 및 요약
'프로그래밍 > HTML' 카테고리의 다른 글
| ajax에서 data-setbg 이미지 안올라가는 이유 (0) | 2021.11.28 |
|---|---|
| input type range (0) | 2021.11.24 |
