- html5 문서의 기본
html페이지의 기본은 다음과 같이 만들어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
html문서는 기본적으로 다음과 같은 형태를 띄며, 이 중 <html>,<head>,<title>,<body>는 문서에 필수로 들어가야 하는 태그들이다.
1. <DOCTYPE html!>
이 태그는 브라우저에 본 문서가 html5의 양식으로 작성되었음을 알리는 지시어이며, 반드시 첫 줄에 나와야한다.
2. <html lang>
이 태그는 html문서의 언어가 어떤 언어로 작성되었는지 확인하는 태그이다.
<head> 부분
이 부분은 문서의 제목, 본문을 설명하는 메타 태그, 자바 스크립트 코드, CSS스타일 시트가 들어가는 부분이다.
<body> 부분
문서의 본문으로, 자바스크립트 코드를 포함할 수 있다. 단, 헤드와 바디 사이에는 아무 것도 끼울 수 없다!
- html 기본 문서 만들기
1. <title> 태그
페이지의 제목으로 브라우저의 타이틀 바에 출력되도록 하는 태그이다.
<head>
<title>토끼풀 고양이풀</title>
</head>
이 태그는 반드시 <head> 내에서만 작성되어야 한다.
2. <h1>~<h6> 태그(<hn>)
이 태그는 주로 본문 내용 속 제목을 만드는데 사용하며, 태그 속 숫자가 작아질수록 글자의 크기가 커진다. 제목의 글자 크기는 브라우저가 결정한다.
<body>
<h1>1장 홈페이지 만들기</h1>
<h2>1장 홈페이지 만들기</h2>
<h3>1장 홈페이지 만들기</h3>
<h4>1장 홈페이지 만들기</h4>
<h5>1장 홈페이지 만들기</h5>
<h6>1장 홈페이지 만들기</h6>
</body>
<다음과 같이 출력된 모습을 볼 수 있다!>
이 때, <hn> 태그에 title 속성을 적용하면, 마우스를 제목에 올리는 순간 툴팁이 나타나게 된다.
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지 만들기</h1>
3. <p>태그
하나의 단락을 표현할 때는 <p>태그를 사용한다. CSS 스타일로 들여쓰기, 내어쓰기를 제어할 수 있다.
<p>단락을 나누는 태그입니다</p>
<p>단락을 나누는 태그입니다</p>
<p>단락을 나누는 태그입니다</p>
이 때, <p> 태그는 단락을 표현하는 태그이기 때문에, 문단이 끝나면 자동으로 빈 공간이 생긴다.
4. <hr>태그
문단 내에서 수평선을 긋는 태그이다. 이 때, 다른 태그와 단리 이 태그는 닫을 필요가 없다!
수평선을 표현한 태그는 <hr>입니다.
수평선을 표현한 태그는 <hr/>입니다.
<문서에서 일반적으로 <>(꺽쇠)를 사용할 때는 정상적으로 출력되지 않는다. 그러므로 유니코드 특수문자 리스트를 이용하여 작성해주어야 한다.>
http://kor.pe.kr/util/4/charmap2.htm
HTML 특수문자 리스트
kor.pe.kr
이 수평선 태그 역시 인라인 CSS 스타일 방식으로 스타일을 주는 것이 가능하다.
수평선을 표현한 태그는 <hr color="red">입니다.
수평선을 표현한 태그는 <hr/>입니다.
4. <br>태그
HTML 페이지는 엔터를 쳐도 다음줄로 넘어가도록 인식되지 않는다. 따라서 다음 줄로 넘어가기 위해서 <br>태그를 이용하여 넘겨주어야 한다.
한줄을 구분하는 태그입니다.
한줄을 구분하는 태그입니다.<br/>
한줄을 구분하는 태그입니다.<br/>
<br이 없는, 첫번째 줄과 두번째 줄 사이는 한줄 띄어써지지가 않았음!>
5. <pre>태그
여러개의 빈칸이나 여러개의 단락을 일일히 <p>태그나 <br>태그로 처리하기 어려울 때, 개발자의 포맷 그대로 출력하는 태그이다.
<pre>
그 외로운 시간을 함께 밝혀주는 새벽 세시의 따뜻한 글들이 있다.
나만 빼고 모두 잠들어버린 것 같아 더 외롭고 쓸쓸한 새벽, 어딘가에 또 당신처럼 잠들지 못하고
불을 밝히고 있는 사람이 있다고 멀리서 불빛을 반짝거려주는 새벽 세시의 문장들.
</pre>
<</br>이 없어도 개발자 포맷 그대로 띄워써진 문장>
6. 텍스트를 꾸미는 다양한 태그들
HTML은 문서의 형태가 강하기 때문에 텍스트의 모양에 변화를 주어 텍스트에 다양한 의미를 부여할 수 있다.
텍스트에 출력되는 다양한 형태의 예시 태그이다.
<h3>텍스트 꾸미기</h3>
<p><b>오늘은 월요일!</b></p>
<p><strong>오늘은 월요일!</strong></p>
<p><em>오늘은 월요일!</em></p>
<p><i>오늘은 월요일!</i></p>
<p><b><i>오늘은 월요일!</i></b></p>
<p><small>오늘은 월요일!</small></p>
<p><del>오늘은 월요일!</del></p>
<p><ins>오늘은 월요일!</ins></p>
<p><b>오늘은 <sub>즐거운</sub> 월요일!</b></p>
<p><b>오늘은 <sup>즐거운</sup>월요일!</b></p>
<p><mark>오늘은 월요일!</mark></p>
<b> = 진하게
<strong> = 중요한
<em> = 강조
<i> = 이탤릭(기울임꼴)으로 강조
<b><i> = 진하게, 이탤릭으로 강조(태그는 중첩이 가능하다!)
<small> = 브라우저에 출력되는 글자보다 한단계 작은 글자
<del> = 텍스트 중간을 가로지르는 줄
<ins> = 텍스트 아래에 그이는 줄
<sup> = 윗첨자
<sub> = 아랫첨자
<mark> = 하이라이팅
등등이 있다.
7. 블록 태그와 인라인 태그
HTML에는 블록 태그와 인라인 태그가 있다.
블록 태그는 항상 새 라인에서 시작하고, 블록 공간을 차지한다. 역할을 한다. 인라인 태그는 블록 태그의 내부에서 블록 컨텐츠의 일부를 표현하는 역할을 한다.
블록 태그 : <p>,<hn>,<div>,<ul> ....
인라인 태그 : <strong>,<a>,<img>,<span>
블록 태그로는 주로 <div>, 인라인 태그로는 <span>이 많이 사용된다.
<div>는 아무런 역할 없이 태그들을 블록으로 묶는 컨테이너 역할을, <span>태그는 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부를 제어할 때 사용한다.
<h3>사랑</h3>
<hr color="blue" width="200" align="left">
<div style="background-color:skyblue; padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도
<span style="color:palevioletred;">사랑</span>이 없으면
소리 나는 구리와 울리는 꽹과리가 되고,
사랑이 없으면 아무
것도 아니라.
</div>
<p>우리 서로 사랑하면서 살아요</p>
<다음과 같이 <div>로 묶인 텍스트는 묶이지 않은 텍스트와 독립적인 CSS스타일 적용을 받고, span 태그 역시 마찬가지로 주변과 다른 CSS 스타일 적용을 받고 있는 모습이다!>
8. 메타 데이터 삽입
<meta>태그는 문서에 대한 다양한 데이터를 제공하는 역할을 한다. 이 태그는 name과 content 속성의 쌍으로 구성되어 있다. 이 태그는 <head>태그에 기입하여 정보를 제공하는 역할을 한다.
ex)
<meta name="author" content="홍길동">
<meta name="description" content="웹페이지 연습">
author은 본 html을 작성한 저작자를 기입하고,
description은 이 웹페이지가 담고 있는 전반적인 내용을 설명한다.
앞서 얘기한 <meta charset=UTF-8>도 속성쌍으로 구성되어있지 않지만, 메타태그이다.
https://aboooks.tistory.com/339
[html] meta 태그 사용법
[html] meta 태그 사용법 html 강좌 초기에 에 들어가는 태그란 제목에서 잠깐 meta 태그를 언급했습니다. head 에 들어가는 태그 (title, style, script, meta 태그) html을 공부하는 사람뿐 아니라 블로그..
aboooks.tistory.com
이 곳에서 메타태그 종류를 확인할 수 있다.
'HTML+CSS+Javascript > html' 카테고리의 다른 글
| 6. 웹 폼 (0) | 2020.03.04 |
|---|---|
| 5. 미디어 삽입 (0) | 2020.03.04 |
| 4. 인라인 프레임 (0) | 2020.03.03 |
| 3. 하이퍼링크 (0) | 2020.03.03 |
| 2. 고급 문서 만들기 (0) | 2020.03.03 |
