html의 기본 구조, 기본 태그 - br, p, hr, h, font
html 의 기본 구조
html은 대소문자를 구분하지 않지만 소문자로 작성하는 것이 일반적이다.
<!DOCTYPE html> 반드시 첫행에 나와야 한다.
<html>
<head>
<meta charset="UTF-8">
<title> Hello HTML5</title>
</haed>
<body>
</body>
</html>
크게 head 부분과 body 부분으로 나눌 수 있다.
head에는 웹페이지의 타이틀과
한글이 깨져보이지 않도록 인코딩을 시켜주는 메타 태그가 들어간다.
영문 페이지라면 없어도 상관없으나 한글 페이지는 반드시 있어야 한다.
<title></title> 사이에 입력한 글자는 제목 표시줄에 표시된다.
사용자에게 실제로 보이는 내용은 body 태그 안에 들어간다.
작성 후 파일을 저장할 때에는 확장자를 .html 또는 .htm으로 저장한다.
주석은 다음과 같이 처리한다.
<!-- 주석 내용 -->
값을 입력할 때,
숫자나 영문, 띄어쓰기가 없는 단어는 그냥 입력해도 상관없지만
한글이나 띄어쓰기가 있는 문장은 반드시 따옴표를 사용해야 한다.
만약 메타 태그가 없다면?
(1)
<head>
<!--> <meta charset="UTF-8"> <-->
<title> Hello HTML5 </title>
</haed>
(2)
<head>
<meta charset="UTF-8">
<title> Hello HTML5 </title>
</haed>
(1) 메타태그가 없다면 한국어가 제대로 출력되지 않아 내용을 알아볼 수가 없다.
(2) 사용했을 때 비로소 한글이 제대로 출력 되어 내용을 알아 볼 수 있다.
자주 사용하는 기본 태그
1) <br>
태그는 일반적으로 닫아주는 태그가 한쌍으로 쓰이지만 br은 닫아주는 태그를 쓰지 않아도 된다.
필요에 따라 여러번 사용하면 사용횟수에 비례해서 줄 간격을 벌려준다.
br : 줄바꿈
<br><br>
처음 작성하는 html문서1<br>
처음 작성하는 html문서2<br><br>
처음 작성하는 html문서3<br>
br을 사용하지 않았을 때
br을 사용했을 때
2) <p>
문단을 나눌때 사용한다.
align="left" or "right" or "center" 를 사용해 정렬 기능을 사용할 수도 있다.
처음 작성하는 html문서4<p><p><p>
처음 작성하는 html문서5<p>
처음 작성하는 html문서6<p>
br과 달리 여러번 쓰더라도 한번 쓴 것과 같은 결과가 나온다. <p>
<p> 문단 정렬하기1</p>
<p align="left">문단 정렬하기2</p>
<p align="center">문단 정렬하기3</p>
<p align="right">문단 정렬하기4</p>
<!-- "left", 'left', left 전부 가능하다. 꼭 따옴표를 쓰지 않아도 괜찮다.
하지만 일관적으로 사용해야 한다.-->
3) <hr> : 수평선 긋기
<hr width=50%> --> 창의 크기가 변하면 수평선의 크기가 함께 변한다. 상대적.
<hr width=500> --> 창의 크기가 변해도 수평선 크기는 변하지 않는다. 절대적.
<hr size=10 color=red>
<hr width=100 align=left>
<hr width=100 align=center>
<hr width=100 align=right>
4) <h1~6> : 제목 출력
<br>, <bold> 기능이 기본 내장되어 있다.
<h1>h1 제목 출력</h1>
<h2>h2 제목 출력</h2>
<h3>h3 제목 출력</h3>
<h4>h4 제목 출력</h4>
<h5>h5 제목 출력</h5>
<h6>h6 제목 출력</h6>
5-1) <font size= 1~7 >
<!-- font : 글자 크기, 색, 글꼴 -->
<!-- size : 글자 크기 설정 (1~7) -->
<font size=1> 글자크기 설정1</font><br>
<font size=2> 글자크기 설정2</font><br>
<font size=3> 글자크기 설정3</font><br>
<font size=4> 글자크기 설정4</font><br>
<font size=5> 글자크기 설정5</font><br>
<font size=6> 글자크기 설정6</font><br>
<font size=7> 글자크기 설정7</font><br>
5-2) <font color = >
색상명이나 RGB 코드를 함께 적는다.
<!-- font : 글자 크기, 색, 글꼴 -->
<!-- color : 글자 색깔 설정 -->
<font color=red>글자 색깔 설정</font><br>
<font color=orange>글자 색깔 설정</font><br>
<font color=yellow>글자 색깔 설정</font><br>
<font color=green>글자 색깔 설정</font><br>
<font color=blue>글자 색깔 설정</font><br>
<font color=navy>글자 색깔 설정</font><br>
<font color=purple>글자 색깔 설정</font><br>
<font color=#C694FF>글자 색깔 설정</font><br>
5-3) <font face = >
코드에 한글을 입력할 때에는 웬만하면 따옴표를 사용해주는 것이 좋다.
글꼴이 사용자의 컴퓨터에 설치되어 있어야 해당 글꼴로 출력된다.
<!-- font : 글자 크기, 색, 글꼴 -->
<!-- face : 글꼴 설정 -->
<font face="고딕">고딕으로 글꼴 설정</font><br>
<font face="나눔고딕">나눔고딕으로 글꼴 설정</font><br>
<font face="궁서체">궁서체로 글꼴 설정</font><br>
<font face="바탕체">바탕체로 글꼴 설정</font><br>
5-4) 폰트의 크기와 색깔과 글꼴을 한꺼번에 설정
<font size=7 color=red face="궁서체">font 태그</font>
