Chapter 1. 구조와 태그

‘쉽게 배우는 HTML5 & CSS & JavaScript’ 4장 내용

1절. 구조

HTML 기본 구조

<!doctype html>             <!-- HTML5에 사용 -->
<HTML>                      <!-- HTML 문서 시작 -->
  <HEAD>                    <!-- 머리말 시작 / 웹 페이지에 대한 대략적인 정보 삽입 -->
    <TITLE>
                            <!-- 문서의 제목 입력/ 브라우저 상단의 제목 줄 표시 -->
    </TITLE>
  </HEAD>                   <!-- 머리말 끝 -->
  <BODY>                    <!--문서의 본문 시작-->
    <!-- 태그와 배경색, 배경이미지, 본문 글자색 등의 속성 지정 가능 / 태그 사이에는 홈페이지 내용 삽입 -->
  </BODY>                   <!--문서의 본문 끝-->
</HTML>                     <!-- HTML 문서 끝 -->

태그(element, 지시자, 요소) 정의

• HTML 문서의 모양과 행동 양식을 정하는 하나의 명령어

• 일반적으로 <시작 태그="">, </종료 태그>의 짝 형태

태그 형식

1. <태그> 문장

<H1> Welcome to my Web Site! :D </H1>

1. <태그 속성(attribute) = “값”> 문장 </태그>

<FONT COLOR = "BLACK" SIZE = "4"> 오늘의 소식 </FONT>

1. <태그>

<FONT COLOR = "BLACK" SIZE = "4"> 오늘의 소식 </FONT>

속성(attribute) 정의

• HTML 태그의 부가적인 정보 제공

• 속성 = “값” 형

속성 형식

1. <태그 속성(attribute = “값”)> 문장 < /태그>

<FONT COLOR = "BLUE" SIZE = "6"> 나는 바다가 좋아 </FONT>
<H1 align = "center" style = "color : green" title = "문단1"> 경포대놀러가고오십당ㅜ.ㅜ </H1>

2절. 태그

<TITLE></TITLE> 태그

• 브라우저 상단의 제목 표시
• 자신의 웹 페이지를 대표할 만한 제목 간결하게 표현
• 사용자의 검색어가 TITLE 태그에 들어있다면 높은 순위 부여

<META> 태그

• 문서의 문자 세트, 작성자, 날짜, 키워드 및 표현 방법과 같은 메타데이터 설정 시 사용

• 시작 태그로만 구성

• <HEAD> </HEAD> 사이에 지정

• 검색엔진의 인덱스 키워드

  • Keywords 속성의 content
  • Description 속성의 content

<META charset = "UTF-8">
<META name = "Author" content = "홍길동">
<!-- 작성자 -->

<META name = "Keywords" content = "키워드">
<!-- 키워드 -->

<META name = "Author" content = "요약문">
<!-- 요약문 -->

charset 속성

• 인코딩 방식의 문자 세트 지정

  • 인코딩 : 사람이 인지할 수 있는 형태의 데이터를 약속된 규칙에 의해 컴퓨터가 사용하는 0과 1로 변환하는 과정

  • 문자 세트 : 정보를 표현하기 위한 글자들의 집합

    • 영문 7bit : “ASCII”
    • 한글 16bit : “ANSI”, “Unicode”, “UTF-8”
    • HTML5 : “UTF-8”

• 한글에서 문자가 깨져 보이는 경우 방지

• charset이 “UTF-8”로 정의된 파일일 경우 인코딩 방식도 “UTF-8” 저장

http-equiv 속성

• 정해진 시간이 지난 후 자동으로 다른 페이지로 화면 이동

<META http-equiv = "refresh" content = "5; url = https://github.com/BangYunseo">
<!-- 5초 후에 BangYunseo의 깃허브 사이트로 이동 -->

속성 정리

속성	구조	내용
charset	charset = “ANSI/Unicode/UTF-8”	인코딩 방식, 문자 세트 지정
name	name = “Author/Keywords/Description”	작성자, 키워드, 요약문
http-equiv	http-equiv = “refresh”	해당 문서 새로 고침
content	content = “문자열”	각 name의 값

<BODY> 태그

• 문서의 본문

• 시작 태그와 종료 태그로의 구성

• HEAD에 들어가는 태그를 제외한 모든 태그들 포함

<BODY> 태그 속성

속성	내용
id, class	태그에 이름 부여, id는 1개만 가능, class는 2개 이상 부여 가능
title	title 속성을 통해 링크가 걸린 곳에 마우스를 가져갔을 때 노란 색 툴팁(마우스가 위치한 곳에 나타나는 설명) 표현
bgcolor	배경색 지정
background	배경 이미지 불러오기
text	기본 글꼴색 지정
link	문서 링크의 색 지정
vlink	한 번 이상 들어간 적이 있는 링크의 색 지정
alink	링크 클릭 시 나타나는 색 지정

글꼴 관련 태그

<FONT></FONT>

• 글자를 꾸밀 경우 사용

• 시작 태그와 종료 태그로 구성

• size, color, face 속성 보유

• HTML5에서 지원 X

<FONT SIZE = "?"></FONT>
<!--글자의 크기 설정, 1 ~ 7의 범위를 가지며 1이 가장 작고 7이 가장 큼-->

<FONT COLOR = "#??????"></FONT>
<!--글자의 색상 조절-->

<FONT FACE = "굴림체"></FONT>
<!--글자의 글꼴 설정-->

속성

속성	내용
id, class	태그에 이름 부여, id는 1개만 가능, class는 2개 이상 부여 가능
title	title 속성을 통해 링크가 걸린 곳에 마우스를 가져갔을 때 노란 색 툴팁(마우스가 위치한 곳에 나타나는 설명) 표현
size	글자의 크기 지정(1 ~ 7)
color	글자의 색상 지정
face	글자의 글꼴 지정

• <B></B>

  • Bold의 약자
  • 글자를 굵게 하는 태그

• <STRONG></STRONG>

  • 글자를 굵게 하는 태그

• <I></I>

  • Italic의 약자
  • 글자를 기울여서 표현하는 태그(기울임꼴)

• <U></U>

  • Underline의 약자
  • 글자에 밑줄을 나타내는 태그

문단 관련 태그

<PRE></PRE>

• 형식 유지

• HTML에서 2칸 이상의 빈 칸은 모두 1칸과 같음

• PRE 안에 입력한 내용은 그대로 화면에 출력

• 공백이 유지되어 출력

• 한 문단 안에서 자동 줄 넘김 X

<BLOCKQUOTE></BLOCKQUOTE>

• 인용문(block-level)에 사용

• 좌우로 들여쓰기를 하기 위해 사용

• 제목 글자를 나타내는 태그

• 시작 태그와 종료 태그로 구성

• 1 ~ 6까지의 범위 존재

• 1이 가장 큰 제목 글자

• 6이 가장 작은 제목 글자

• 속성

속성	내용
id, class	태그에 이름 부여, id는 1개만 가능, class는 2개 이상 부여 가능
title	title 속성을 통해 링크가 걸린 곳에 마우스를 가져갔을 때 노란 색 툴팁(마우스가 위치한 곳에 나타나는 설명) 표현
style	특정한 태그에 한 번만 스타일을 적용할 때 사용
align	정렬 방식(ex : align = center(left, right))

• 사용 예시

<!doctype html>
<html>
  <head> <meta charset = "UTF-8"></head>
  <body>
    <H1 style = "color : rgb(0, 255, 255); background-color : blue" align = center> 방윤서</H1>
    <H2 style = "color : black"> 방윤서 </H2>
    <H3 style = "color : yellow"> 방윤서 </H3>
    <H4 style = "color : #ff00ff"> 방윤서 </H4>
    <H5 style = "color : red"> 방윤서 </H5>
    <H6 style = "color : gold"> 방윤서 </H6>
  </body>
</html>

COLOR 방식

• Color명 사용

  • ex) “red”, “gold” 등

• Hexadecimal color

  • ex) “#ff0000”, “#ff00ff” 등

• RGB color 사용

  • ex) “rgb(255, 0, 0)” 등

• 구분

Color 명(Color Name)	Hexadecimal color(#RRGGBB)	RGB color(R, G, B)
red	#FF0000	rgb(255, 0, 0)
green	#00FF00	rgb(0, 255, 0)
blue	#0000FF	rgb(0, 0, 255)
orange	#FFA500	rgb(255, 165, 0)
yellow	#FFFF00	rgb(255, 255, 0)
purple	#800080	rgb(128, 0, 128)
black	#000000	rgb(0, 0, 0)
gray	#808080	rgb(128, 128, 128)
white	#FFFFFF	rgb(255, 255, 255)

수평선 태그

<HR>

• 문서에 수평선 그릴 때 사용

단락 구분 태그

<P>

• Paragraph의 약자

• 단락 구분 시 사용

• 한 줄을 공백으로 띄우는 기능 보유

• 종류 태그(</P>)는 일반적으로 생략

• 속성

속성	내용
id, class	태그에 이름 부여, id는 1개만 가능, class는 2개 이상 부여 가능
title	title 속성을 통해 링크가 걸린 곳에 마우스를 가져갔을 때 노란 색 툴팁(마우스가 위치한 곳에 나타나는 설명) 표현
style	특정한 태그에 한 번만 스타일을 적용할 때 사용
align	정렬 방식(ex : align = center(left, right))

<BR>

• Break Line의 약자

• 워드 프로세서에서 Enter(줄 바꿈) 기능을 하는 태그

• 한 줄을 넘길 때 사용하는 태그

• 시작 태그로만 구성

• 속성

속성	내용
id, class	태그에 이름 부여, id는 1개만 가능, class는 2개 이상 부여 가능
title	title 속성을 통해 링크가 걸린 곳에 마우스를 가져갔을 때 노란 색 툴팁(마우스가 위치한 곳에 나타나는 설명) 표현
style	특정한 태그에 한 번만 스타일을 적용할 때 사용

<!doctype html>
<html>
  <body>
    p 태그를 사용하자1<p>
      p 태그를 사용하자2<p>
        br 태그를 사용하자1<br>
        br 태그를 사용하자2<br>
        p 태그를 사용하자3<p>
          p 태그를 사용하자4<p>
  </body>
</html>