📍 HTML의 기본 태그
0. <!doctype> 문서 형식 정의(Document Type Definition, DTD)
: <!doctype html> = '이 문서는 html이다.' (=이 페이지를 html로 해석해라)
문서 유형을 지정하는 것으로, 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다. 문서의 최상위에 위치한다.
1. <html>
: 페이지 전체를 감싼다. 웹 페이지는 <html>로 시작해서 </html>로 끝난다. 이 태그는 모든 html 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며, html요소 내부에 기술한다. (<!doctype> 은 예외)
html은 글로벌 어트리뷰트를 지원한다. <html lang="ko"> 는 한국어를 주언어로 사용하는 예이다.
- html의 모든 태그는
<head>태그와<body>태그 둘 중 하나의 아래에 놓인다. 그리고 그들을 감싸는 단 하나의 고위층 태그가<html>이다.
2. <head>
: 이 문서 <body> 를 설명한다.
메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용한다. 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다. <title>, <meta>, <style>, <link>, <script> 등이 들어간다.
2-1. <title>
: 브라우저의 제목 표시줄이나 페이지 탭 상단에 보이는 제목명이다. 정의된 제목은 브라우저의 탭에 표시된다.
2-2. <meta>
: meta 요소는 description, keywords, author 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
<meta charset="utf-8"> = '웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라.'
2-3. <style>
: 문서나 문서 일부에 대한 스타일 정보를 포함한다.
2-4. <link>
: 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
2-5. <script>
: client-side JavaScript를 정의한다. src속성(Attribute)을 사용하면 외부 JavaScript파일을 로드할 수 있다.
3. <body>
: 본문은 <body> 태그로 묶기로 약속한다.
HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
📍 자주 사용되는 HTML 태그
1. <a>
: '닻 (anchor)'의 'a'를 딴 것으로, 배가 닻을 내리듯 다른 웹페이지에 닻을 내린다는 의미이다. 웹 페이지나 외부 사이트를 연결한다.
<a href="사이트주소"> '텍스트문구' or 'img src'사용</a>
링크로 사용할 텍스트나 이미지를<a>로 묶고 href(hypertext reference)속성을 이용해서 특정 '문구'나 '이미지'에 사이트 링크를 걸 수 있다.
ex. <a href="https://en.wikipedia.org/wiki/San Francisco" target="blank" title="san francisco wikipedia">SAN FRANCISCO</a><title="tooltip">툴팁 내용을 적으면 마우스 커서를(여기서는 SAN FRANCISCO라는 문자위에) 올렸을때 툴팁(san francisco wikipedia)을 확인 할 수 있다.
target 어트리뷰트
<a href="사이트주소" target="blank">: 새 창으로 해당 사이트를 열 수 있다.<target="blank">와<target="_blank">의 차이
1.<target="blank">는 "blank"라는 기존 프레임이나 창을 대상으로 한다. "공백"이 이미 존재하지 않는 경우에만 새 창이 생성된다.
2.<target="_blank">는 클릭할 때마다 새 창에서 열린다.
href 어트리뷰트에 사용 가능한 값
- 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다. 이 속성에 사용 가능한 값은 아래와 같다.
| Value | Description |
|---|---|
| 절대URL | 웹사이트 URL (href=”http://www.example.com/default.html”) |
| 상대URL | 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) |
| fragment identifier | 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”) |
| 메일 | mailto: |
| script | href=”javascript:alert(‘Hello’);” |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>
</body>
</html>2. <div>
: 콘텐츠들을 어떤 목적에 따라 묶어야 할 때 사용한다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
3. <span>
: 본질적으로는 아무것도 나타내지 않는다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다.
4. <h1> ~ <h6>
: 제목(heading)태그는 검색엔진이 중요한 의미로 받아들일 가능성이 크다. 그러므로 '시맨틱 웹'의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 숫자가 높아질 수록 보다 하위 제목이 된다. 숫자가 낮은 h요소는 앞에 자신보다 높은 h요소의 하위 제목이 된다.
5. <li>
: 목차(목록, 리스트)를 만드는 태그, 이 태그는 어떤 항목들을 그룹 짓기 위한 기능인 <ul> or <ol> 부모태그가 필요하다.
6. <ul>
:Unordered List, 순서가 없는 List. 순서가 없기 때문에 글자 앞에 • (불릿)이 붙는다.
(css설정으로 없앨 수 있다. ex. list-style: none;)
7. <ol>
: Ordered List, 순서가 있는 List, 넘버링 시키는 부모태그이다.
<ul> 과 달리 앞에 기호가 아닌 숫자나 영문 순서가 들어간다.
8. <br>
: 줄바꿈 태그, 강제 개행(행바꿈:line break)을 지정한다.
스스로 닫는 태그(Self Closing Tag)로써, <br> 은 빈 요소(empty element)로 종료태그가 없다.
9. <p>
: 줄바꿈 태그, 단락 (Paragraphs)을 지정한다. 내용 앞뒤로 공백라인이 생기면서 단락이 된다.
<br>와<p>태그의 차이
<br>태그는 '단순히 줄을 바꾸는 기능'만을 가진 태그이다.
원하는 위치를 정확하게 집어서 줄 바꿈 기능을 추가 할 수 있지만, 웹페이지는 기기별로 다양한 해상도와 사용자가 원하는 크기의 비율로 조절하여 사용하고 있어서, 남발할 경우 가독성에서 오히려 불리 할 수 있다.<p>태그는 '하나의 문단을 묶어주는 태그' 이다.
<p>태그는 하나의 문단이 가지는 범위를 지정함으로써, CSS 스타일을 활용하여 부가적인 속성을 지정해 줄 수 있는 태그이다. 다시말해,<p>태그가 보다 정보로써 가치있는 태그가 될 수 있다.
(CSS의 style 속성을 사용하여 문단의 좌우 폭을 지정하고, 되도록<p>태그를 쓰자.)
10. <img>
: 웹페이지에서 이미지를 삽입하는 경우 <img> 태그를 사용한다.
이미지태그 <img> 와 소스 <src> = <source> 를 사용, <img src="이미지경로">
ex. <img src=“travel.jpg” width=“100”> '속성(Attribute)'의 앞뒤 위치는 바꿔도 된다.
| 속성(attribute) | Description |
|---|---|
| src | 이미지 파일 경로 |
| alt | 이미지 파일이 없을 경우 표시되는 문장 |
| width | 이미지의 너비 (CSS에서 지정하는 것이 일반적) |
| height | 이미지의 높이 (CSS에서 지정하는 것이 일반적) |
10. <b>
: bold체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.
11. <strong>
: <b> tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다. 그러므로 웹표준을 준수하고자 한다면 strong을 사용하는 것이 좋다.
12. <i>
: italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
13. <em>
: emphasized(강조, 중요한)text를 지정한다. <i> tag와 동일하게 italic체로 표현되지만 의미론적(Semantic) 중요성의 의미를 갖는다.
14. <small>
: small taxt를 지정한다.
15. <mark>
: highlighted text를 지정한다. (형광펜효과)
16. <del>
: deleted (removed) text를 지정한다. (중앙선)
17. <ins>
: inserted (added) text를 지정한다. (하단밑선)
18. <sub> / <sup>
: <sub> 태그는 subscripted(아래에 쓰인) text를, <sup> 내그는 superscripted(위에 쓰인) text를 지정한다.
19.<pre>
: 형식화된(preformatted) text를 지정한다. pre태그 내의 content는 작성된 그대로 브라우저에 표시된다.
20. <q>
: 짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation mark)로 q요소를 감싼다.
21. <blockquote>
: 긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다. css를 이용해서 다양한 style 적용이 가능하다.
reference : https://ko.wikipedia.org/wiki/HTML https://poiemaweb.com/
