Chapter 1. 구조와 태그¶

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

1절. 구조

2절. 태그

1절. 구조¶

HTML 기본 구조¶

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

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

HTML 문서의 모양과 행동 양식을 정하는 하나의 명령어
일반적으로 <시작 태그>, </종료 태그>의 짝 형태

태그 형식¶

<태그> 문장 </태그>

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

<태그 속성(attribute) = "값"> 문장 </태그>

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

<태그>

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

속성(attribute) 정의¶

HTML 태그의 부가적인 정보 제공
속성 = "값" 형

속성 형식¶

<태그 속성(attribute = "값")> 문장 < /태그>

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

2절. 태그¶

\\ 태그¶

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

\ 태그¶

문서의 문자 세트, 작성자, 날짜, 키워드 및 표현 방법과 같은 메타데이터 설정 시 사용
시작 태그로만 구성
\ \ 사이에 지정
검색엔진의 인덱스 키워드
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의 값

\ 태그¶

문서의 본문
시작 태그와 종료 태그로의 구성
HEAD에 들어가는 태그를 제외한 모든 태그들 포함

\ 태그 속성¶

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

글꼴 관련 태그¶

\\¶

글자를 꾸밀 경우 사용
시작 태그와 종료 태그로 구성
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	글자의 글꼴 지정

\\
Bold의 약자
글자를 굵게 하는 태그
\\
글자를 굵게 하는 태그
\\
Italic의 약자
글자를 기울여서 표현하는 태그(기울임꼴)
\\
Underline의 약자
글자에 밑줄을 나타내는 태그

문단 관련 태그¶

\

¶

형식 유지
HTML에서 2칸 이상의 빈 칸은 모두 1칸과 같음
PRE 안에 입력한 내용은 그대로 화면에 출력
공백이 유지되어 출력
한 문단 안에서 자동 줄 넘김 X

\
\
¶

인용문(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)

수평선 태그¶

\
¶

문서에 수평선 그릴 때 사용

단락 구분 태그¶

\
¶

Paragraph의 약자
단락 구분 시 사용
한 줄을 공백으로 띄우는 기능 보유
종류 태그(\
)는 일반적으로 생략
속성

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

\
¶

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>