HTML
- HyperText Markup Language의 약자로 웹 페이지를 만들기 위한 언어.
- 웹 브라우저 위에서 동작
태그(Tag)
- Element(요소)라고도 하며 html문서를 이루는 기본 단위
- 기본적으로 여는 태그와 닫는 태그 한 쌍으로 이루어져 동작하지만 닫는 태그를 별도로 사용하지 않는 태그도 존재 (br, input, img ...)
HTML 문서의 구조
<!DOCTYPE html> # DTD(Doctype)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> : DTD(Document Type Definition)로 문서의 형식을 웹 브라우저가 알 수 있도록 명시해주는 역할. 여기서는 HTML5 로 문서를 작성함을 의미한다. HTML5는 W3C라는 웹 표준을 정의하는 기구에서 정한 HTML에 대한 표준 중 하나이다.<html> : html 문서임을 명시. html문서 전체를 감싸는 태그.<head> : 문서를 정의하는 태그들이 속해있음. body태그의 정보를 설명하는 메타정보를 포함.<body> : 문서의 내용을 표현하는 태그들이 속해있음. 거의 모든 태그들이 body태그 안에 들어감.
태그의 종류
head 태그
<meta>: 웹 서버와 웹 브라우저 상호간 교환되는 정보를 정의. 문서의 내용, 문서의 키워드, 작성자 등의 정보를 포함.<title>: html 문서 제목 태그. 탭에 표시되는 문구.<link>: 해당 문서와 외부 소스 간 관계를 정의. 개수에 제한이 없으며 주로 외부 스타일시트를 연결할 때 사용.
<!--link 예시-->
<link rel="stylesheet" type="text/css" href="/examples/media/style.css">
body 태그
텍스트 관련
<h1>...<h6> : 제목을 나타내는 태그. 숫자가 클수록 작은 글씨.<b>: 굵은 글씨. <strong>과 동일.<i>: 기울어진 글씨<p>: 문단 표시<ol>: 순서가 있는 리스트. 각 항목은 <li>태그로 감싼다.<ul>: 순서가 없는 리스트. 각 항목은 <li>태그로 감싼다.
미디어 관련
<img src="이미지가 위치하는 URL" alt="대체 텍스트" width="폭" height="높이" longdesc="링크"/>: 이미지를 나타내는 태그<video src="동영상 URL" >웹 브라우저가 video태그 지원하지 않을때 표시할 문구</video>: 동영상을 나타내는 태그<a href="URL" title="설명" target="문서가 로드되는 방식">링크이름</a>: 링크를 나타내는 태그
target 속성값
_self : 현재 문서가 로드된 프레임_blank : 새 창(탭)에서 로드
기타
<br/>: 줄바꿈 : 띄어쓰기<iframe src="불러올 웹 페이지의 URL" scrolling="스크롤 허용 여부">iframe 지원하지 않을때 표시할 문구</iframe>: 아이프레임
scrolling 속성값
yes: 허용.필요없을때도 스크롤바 노출no: 허용하지 않음auto: 필요한 경우만 허용(default)
