Web - Front end 2. HTML 기본문서 만들기
1) <title> </title>
페이지의 제목. 브라우저의 타이틀 바에 출력.
<title>태그를 사용하여 반드시 <head>태그 안에 쓰여야 한다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
</body>
</html>
2) <h1> ~ <h6>
문단의 제목.
<h1> 이 가장 글자가 크고 <h6> 이 가장 글자가 작다.
글자의 크기는 브라우저가 정하고 CSS스타일 시트를 이용해서 변경할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>HELLO WORLD</h1>
<h2>HELLO WORLD</h2>
<h3>HELLO WORLD</h3>
<h4>HELLO WORLD</h4>
<h5>HELLO WORLD</h5>
<h6>HELLO WORLD</h6>
</body>
</html>
3) title 속성
title 속성을 지정하면 본문에 마우스가 올라갔을 때 설명문(툴팁)이 출력되게 할 수 있다.
모든 태그는 title속성을 갖는다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1 title="hello world">HELLO WORLD</h1>
<h2>HELLO WORLD</h2>
<h3>HELLO WORLD</h3>
<h4>HELLO WORLD</h4>
<h5>HELLO WORLD</h5>
<h6>HELLO WORLD</h6>
</body>
</html>
4) <p>
단락을 나눠준다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1 title="hello world">HELLO WORLD</h1>
<p>
HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS스타일을 이용하면 단락 단위로
내어쓰기와 들여쓰기가 가능하다
</p>
<p>
여러 개의 빈칸은 하나로 취급되며,
엔터키 역시 하나의 빈칸으로 처리된다.
</p>
</body>
</html>
5) <hr>
수평선을 긋는다. 종료 태그가 없다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1 title="hello world">HELLO WORLD</h1>
<hr>
<h2>HELLO WORLD</h2>
<h3>HELLO WORLD</h3>
<h4>HELLO WORLD</h4>
<h5>HELLO WORLD</h5>
<h6>HELLO WORLD</h6>
</body>
</html>
6) <br>
엔터와 같은 역할이다. 줄을 바꿔주고 여러번 사용하면 그만큼 줄을 띄워준다.
<!DOCTYPE html>
<html>
<head>
<title>새로운 줄 넘어가기</title>
</head>
<body>
<h3>새로운 줄 넘어가기</h3>
<hr>
<br> 태그로 다음 줄로 넘어갑니다.<br>
2 개의 <br> 태그로 두 번 넘어 갑니다.<br><br>
잘 보이나요?
</body>
</html>
7) 문자, 기호, 심볼 입력
HTML에서 예약어로 사용하는 문자나 키보드로 입력할 수 없는 문자, 기호, 심볼들을 입력하려면 엔터티나 코드를 입력해야 한다.
예)
* 브라우저에서는 연속된 여러게의 빈칸을 한 개의 빈칸으로 처리하므로 여러개의 빈칸을 넣으려면 공백에 해당하는 엔터티나 코드를 넣어야 한다.
<많이 사용되는 엔터티 및 코드>
* 그 외의 엔터티와 코드들은 http://dev.w3.org/html5/html-author/charref 에서 확인할 수 있다.
<body>
<h3>기호 넣기</h3>
<hr>
10 ÷ 2=5 <br>
√2 = 1.414 <br>
2 < 3 <br>
오늘 "Elvis" 노래를 들었다.
</body>
8) <pre>
그냥 입력했을 때는 여러칸의 공백이나 <Enter>를 한칸의 공백으로만 인식하지만 <pre>태그 안에 입력하면 개발자가 입력한 포맷 그대로 출력 해준다.
body>
<h3>그냥 입력</h3>
<hr>
동해물과 백두산이
마르고 닳도록
하나님이 보우하사
우리 나라 만세
<h3><pre> 태그 안에 입력</h3>
<hr>
<pre>
동해물과 백두산이
마르고 닳도록
하나님이 보우하사
우리 나라 만세
</pre>
</body>
9) 텍스트 꾸미기
원래 꾸미는 영역은 CSS에서 해야 하지만 HTML에서도 텍스트를 꾸며서 텍스트에 의미를 부여할 수 있다.
<b> : 진하게
<strong>) : 강하게 (굵게)
<em> :강조(기울임)
<i> : 이탤릭으로 강조
<small> : 한단계 작게
<del> : 삭제선
<ins> : 밑줄
<sup> : 윗첨가
<sub> : 아래 첨가
<mark> : 하이라이트
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<b>진하게</b><br>
<strong>중요한</strong><br>
<em>강조</em><br>
<i>이탤릭으로 강조</i><br>
<b><i>진하게 이탤릭으로 강조</i></b><br>
보통 문자 <small>한 단계 작은 문자</small><br>
<del>삭제</del><br>
<ins>추가</ins><br>
보통문자의 <sup>윗첨자</sup><br>
보통문자의 <sub>아래첨자</sub><br>
<mark>하이라이팅</mark><br>
</body>
10) <div> & <span>
<div> : 블록 태그로 특별한 의미 없이 여러 태그들을 불록으로 묶음. 블록 전체에 동일한 CSS스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다룰 때 사용
<span> : 인라인 태그로 텍스트 일부분에 특별한 모양을 주거나 자바스트립트 코드로 텍스트 일부분을 제어할 때 사용
*블록 태그와 인라인 태그
블록 태그 : 항상 새 라인에서 시작. 한 라인 독점 사용.
인라인 태그 : 블록 속에 삽입되어 블록의 일부로 출력
<div>와 <span>의 사용 예시
<body>
<h3>사랑</h3>
<hr>
<diV style="background-color:skyblue;padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도<br>
<span style="color:red">시랑</span>이 없으면<br>
소리 나는 구리와 울리는 꽹과리가 되고,<br>
<span style="color:red">사랑</span>이 없으면 아무<br>
것도 아니라.
</div>
</body>
11) HTML 메타데이터 삽입
* 메타 데이터 : 데이터를 설명하는 데이터
예) <base>, <link>, <script>, <style>, <title>, <meta>
메타데이터들은 보통 <head> 태그 안에 작성하지만 <script> 태그는 <body> 안에도 작성할 수 있다 .
<base>
웹 페이지들이 담겨있는 기본 URL과 웹페이지가 출력될 윈도우를 지정하기 위해 사용.
<head>에서만 사용되며 한 번 만 허용된다.
* 사용 방법
예) world 페이지가 http://www.hello.com/ 페이지에 저장된 경우
head>
<base herf="http://www.hello.com/">
</head>
<body>
<a herf="world.html"></a>
</body>
(<base>의 here속성에 지정된 주소 뒤에 추가해서 지정할 수 있다.)
*<base> 태그는 기준루트를 노출시키기 때문에 최근에는 많이 사용하지는 않는다.
<meta>
다양한 메타 데이터를 표현하기 위해서 사용. -> name속성과 content속성이 쌍으로 들어간다.
예)
<meta name="viewport" content="width=device-width">
또는 charset 속성을 사용해서 웹페이지 사용된 문자의 인코딩 방식을 지정.
예)
<meta charset="utf-8">
utf-8 은 문법에 맞지 않는 문자들도 출력해 주기 때문데 보다 정확한 표현을 할 수 있어서 많이 쓰인다.
댓글
댓글 쓰기