elearning.kocw.net - / - 웹의 뼈대 html의 이해 - 개요 및 텍스트...

HTML의 이해 - 개요 및 텍스트 태그

최현종(서원대학교)

HTML의 개요

• 웹 문서란 무엇인가? – 인터넷에 올려진 문서 – HTML : 다양한 멀티미디어 요소까지 다룰 수 있는 인터넷 표준 웹 문서

• 웹 브라우저란 무엇인가? – 웹 문서를 보기 위한 프로그램 – 대표적인 웹 브라우저

- 인터넷 익스플로러 - 넷스케이프 내비게이터 - 오페라

그림 1. 인터넷 익스플로러

• HTML의 정의 - Hyper Text Markup Language의 약자 - 하이퍼 기능이 있는 마크업 언어(Markup Language) - 태그(Tag)

• HTML 문서의 기본 구조 - 쓰임새에 따라 태그 이름 존재 - 태그마다 속성(properties) 존재 해당 요소를 좀 더 자세히 설정 가능 (형식) <태그 속성1=“속성값” 속성2=“속성값” 속성n=“속성값”> <BODY BGCOLOR=“yellow” TEXT=“blue”>

• ① <HTML> 태그와 </HTML> 태그 현재 작성하는 문서가 HMTL 문서임을 알려주기 위한 태그 HTML의 시작과 끝에 표시

• ② <HEAD> 태그와 </HTML> 태그 문서 제작자나 사용된 언어, 문서에 대한 제목과 관련된 정보 입력

• ③ <TITLE> 태그와 </TITLE> 태그 문서의 제목을 지정하는 태그 브라우저 맨 윗부분의 제목표시줄에 표시

• ④ <BODY> 태그와 </BODY> 태그 실제 웹 브라우저 창에 나타나는 여러가지 내용들을 입력

① ②

③

④

그림 2. 예제

• HTML의 기본 태그 익히기 – 문서 배경과 여백 조절 태그

(형식) <BODY 속성=“속성값”> <BODY> 태그의 속성

예) <BODY BACKGROUND=“bg2.gif” TEXT=“#0000FF>

속성 설명 속성값

BACKGROUND 배경 이미지. 작은 이미지 하나를 지정하더라도 브라우저 화면에 꽉 차게 채워짐

파일이름이나 URL

BGCOLOR 배경색. 기본값은 흰색 색상 이름이나색상 코드

TEXT 글자색. 기본값은 검은색 색상 이름이나 색상 코드

LEFTMARGIN 왼쪽 여백 (IE와 NS 6.0 이상) 숫자(픽셀 단위)

TOPMARGIN 상단 여백 (IE와 NS 6.0 이상) 숫자(픽셀 단위)

MARGINWIDTH 왼쪽 여백 (NS 4.x) 숫자(픽셀 단위)

MARGINHEIGHT 상단 여백 (NS 4.x) 숫자(픽셀 단위)

– 줄을 바꾸는 태그 (형식) 

– 문단을 나누는 태그 (형식) 태그의 속성

– 수평선을 삽입하는 <HR> 태그 (형식) <HR ALIGN=“center” WIDTH=“500”> <HR> 태그의 속성


ALIGN 단락의 정렬 방법을 조절. 속성 지정을 따로 하지 않을 때의 기본값은 left. 즉, ALIGN 속성을 지정하지 않으면 텍스트들이 왼쪽정렬 됨

left, right, center 중 선택


ALIGN 수평선의 정렬 방법 left, right, center 중 선택

COLOR 수평선의 색상 색상 이름이나 색상 코드

SIZE 수평선의 굵기 숫자(픽셀 단위)

WIDTH 수평선의 가로 길이(너비) 픽셀 값, %값

NOSHADE 그림자 없는 평면 느낌의 수평선을 만듦 (없음)

– 주석 - 웹 브라우저 화면에는 표시되지 않는 요소 - 나중에 자신이 작성한 HTML 소스를 열어보았을 때, 페이지 내용을 쉽게 알아볼 수 있도록 하는 일종의 설명글 (형식) <!– 주석 내용-->

– 제목을 나타내는 <Hn> 태그 (형식) <Hn> 제목 </Hn> / n=속성값 (숫자)

– 기본 태그로 만든 웹 문서

그림 3. 예제

• HTML 상식 – 여는 태그와 닫는 태그로 구성

예) HTML은 어렵지 않아요~ 

– 대.소문자의 구별 X

– 문서의 구조를 쉽게 이해하기 위한 들여쓰기 사용 예)

– 한 칸 이상의 띄어쓰기는 무시 – 여는 태그와 닫는 태그의 순서를 지킴

예) 안녕하세요?

그림 4. 예제

• HTML을 작성하는 프로그램 – 텍스트 편집기 – HTML 편집기 – 위지윅 편집기

HTML의 기초 1 • 텍스트 태그

– 텍스트 속성 바꾸기 (형식) 텍스트

– 태그의 속성 - FACE 속성 예) 빈집 - COLOR 속성 예) 빈집 - SIZE 속성 예) 빈집

– 여러 개의 태그 속성 사용 예) 빈집


FACE 텍스트의 글꼴 선택 글꼴 종류 중 선택

COLOR 텍스트의 색상 지정 색상 이름이나 색상 코드

SIZE 텍스트의 크기 지정 1~7까지의 숫자

• 흘러가는 텍스트 태그 – <MARQUEE> 태그

- 지시한 방향으로 글자나 이미지가 움직이도록 하는 태그 - (단, 익스플로러에서만 지원) - (형식) <MARQUEE 속성=“속성값”> 텍스트 </MARQUEE>

– <MARQUEE> 태그의 속성 속성 설명 속성값

DEHAVIOR 스크롤 형태 Scroll, slide, alternate

DIRECTION 스크롤 방향 Left, right, up, down (기본값은 left)

SCROLLDELAY 스크롤 지연 속도 (숫자가 클수록 속도가 느려짐)

숫자(1/1000초 단위)

SCROLLAMOUNT 한 번에 스크롤되는 픽셀 수 (숫자가 클수록 속도가 빨라짐)

숫자(픽셀 값)

BGCOLOR 스크롤 영역의 배경색 색상 이름이나 색상 코드

HEIGHT 스크롤 영역의 높이 숫자(픽셀 값)

WIDTH 스크롤 영역의 너비 숫자(픽셀 값)

LOOP 스크롤 반복 횟수 숫자, 또는 infinite(무한반복) 기본값은 infinite

• 텍스트 관련 기타 태그 – 글자 모양을 수정하는 태그들

• 또는 : 텍스트를 진하게 표시 • 또는 : 텍스트를 이탤릭체로 표시 • : 텍스트에 밑줄을 표시 • : 위첨자 표시 • : 아래첨자 표시 • <S> : 텍스트 한가운데를 지나가는 가로선을 표시

그림 5. 예제

– 기타 태그 • <ADDRESS> 홈페이지 제작자 정보 중 연락처나 주소 등을 표시 할 때 사용

• <PRE> HTML에서는 빈 칸을 아무리 많이 입력해도 한 칸 밖에 인식을 못하는데, <PRE> 태그를 사용하면 사용자가 입력한 만큼의 여백이나 줄 바꿈을 그대로 인식하여 브라우저에 보여줌 (단, <PRE>태그를 사용하면 텍스트의 크기가 약간 작게 나타남)

그림 6. 예제

• 목록으로 텍스트 정리 – 순서 있는 목록 : <OL> / <LI>태그

• 각 항목을 순서대로 나열 • <OL> : 목록으로 표시 할 내용의

앞뒤에 표시 • <LI> : 각 항목 앞에 표시 • (형식) <OL>

<LI> 항목1 </LI> <LI> 항목2 </LI>

… </OL>

• <OL> 태그의 속성


TYPE 각 항목 앞에 붙이는 숫자를 영문자나 로마자, 또는 아라비아 숫자로 표시 (기본값은 숫자)

A, a, I, ⅰ

START 각 항목 앞에 붙는 숫자의 시작 번호 지정 숫자

그림 7. <OL> 태그

– 순서 없는 목록 : <UL> / <LI>태그 • 각 항목 앞에 불릿(bullet)을 표시하여 나열 • 순서가 중요하지 않을 때 사용 • <UL> : 목록으로 표시 할 내용의

앞뒤에 표시 • <LI> : 각 항목 앞에 표시 • (형식) <UL>

<LI> 항목1 </LI> <LI> 항목2 </LI>

… </UL>

• <UL> 태그의 속성


TYPE 각 항목 앞에 붙는 불릿의 모양 설정 (기본값은 disc)

disc, circle, square

그림 8. <UL> 태그

– 사전식 목록 : <DL> / <DT> / <DD>태그 • 전체적으론 순서 없는 목록 형태 • 목록 항목이 ‘제목’과 ‘설명’ 부분으로 구성 • 사전처럼 제목과 설명으로 구성된 목록을 만들기 위한 태그 • <DL> : 목록으로 표시 할 내용의 앞뒤에 표시 • <DT> : 항목의 제목 표시 / <DD> : 항목의 설명 표시 • (형식) <DL>

<DT> 제목 </DT> <DD> 설명 </DD> …

</DL>

그림 9. <DL> 태그

elearning.kocw.net - / - 웹의 뼈대 html의 이해 - 개요 및 텍스트...

Documents