홈페이지
Download
1 / 103

홈페이지 - PowerPoint PPT Presentation


  • 233 Views
  • Uploaded on

홈페이지. 홈페이지 관련 프로그램들 텍스트 편집기 HTML 태그 이용 웹저작도구 나모에디터 , 드림위버 그래픽 프로그램 이미지제작 ( 포토샵 , 페인트샵 프로 ) 애니메이션 그림 파일 작성 GIF Construction Set, WWW GIF Animator, 플래시 기타 워드프로세서 웹문서 변환 기능. 웹 프로그래밍 (1/3). 웹 프로그래밍 SGML (Standard Generalized Markup Language) 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 홈페이지' - anne


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
홈페이지

  • 홈페이지 관련 프로그램들

    • 텍스트 편집기

      • HTML 태그 이용

    • 웹저작도구

      • 나모에디터, 드림위버

    • 그래픽 프로그램

      • 이미지제작 (포토샵, 페인트샵 프로)

    • 애니메이션 그림 파일 작성

      • GIF Construction Set, WWW GIF Animator, 플래시

    • 기타

      • 워드프로세서

        • 웹문서 변환 기능


웹 프로그래밍 (1/3)

  • 웹 프로그래밍

    • SGML (Standard Generalized Markup Language)

      • 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준

    • HTML (HyperText Markup Language)

    • 자바 스크립트와 자바 애플랫

      • 자바 스클립트(Java Script)

        • 클라이언트에서 독립적으로 실행되는 되는 스크립트 언어

      • 자바 애플릿(Java Applet)

        • 자바언어로 제작한 홈페이지 응용 프로그램

    • DHTML (Dynamic HTML): 동적 웹페이지 제작

    • XML (eXtensible Markup Language)

      • HTML과 SGML의 장점만을 모아놓은 표준안

    • XHTML : HTML이 XML로 가기 위한 가교 역할


웹 프로그래밍 (2/3)

  • Server Side Script

    • HTML(단방향식의 정보제공) 의 문제점을 보충하기 위해

    • CGI (Common Gateway Interface)

      • 외부프로그램과 웹서버(Web Server) 간의 연결 역할

      • 주로 C/C++ 나 PERL혹은 UNIX Shell, Tcl/Tk 등을 사용하여 구현

    • ASP (Active Server Page)

      • MS사에서 제작한 IIS(Internet Information Server)의 세번째 버전

      • 익히기가 가장 쉽지만 MS 윈도우에서만 구동

    • JSP (Java Server Page)

      • 자바를 기반으로한 동적인 웹사이트 개발언어

      • 프로그래밍언어인 자바를 기본 언어로 채택하여 견고하고, 안정적

    • PHP (Professional Hypertext Preprocessor)

      • 주로 Linux 계열에서 사용하는 동적 HTML 페이지 제작기술

      • 안정성이 보장되어 있지 않다는 문제점이 있지만 급속도로 발전


웹 프로그래밍 (3/3)

  • Web3D

    • 웹 페이지 상에서 물체를 돌려보거나, 현실과 같이 공간을 이동할 수 있게 해주는 기술

    • VRML (Virtual Reality Modeling Language)

      • 인터넷에 3차원 공간을 표현하는 그래픽스 데이터의 기술 언어

    • X3D (Extensible 3D)

      • 차세대 VRML 버전 (XML + VRML97)

      • 다른 컨텐츠와의 호환성이 높으며, 코드의 모듈화를 통하여 확장 가능하도록 정의

  • www.web3d.org


인터넷의 이해와 활용

웹 정책

기획

설계

구현

계획수립

시험 및 검증

운영 및 유지보수

환경 및 시스템 분석

스토리보드 작성

사용 편의성 검사

페이지 구성

시스템 속도 검사

화면 구성

멀티미디어데이터 생성

보안 정책

코드

백업 정책

설치

장애 관리



HTML 문서의 특징

  • 공백, 줄바꿈 인식 못함

  • 텍스트 문서의 형태- 확장명 : .html, .htm

  • 인터넷 문서로 사용하기에 적합

    • 컴퓨터 기종에 무관

    • 파일크기 작음

  • 대소문자를 구분하지 않음


HTML

  • HTML (HyperText MarkUp Language)

    • 하이퍼텍스트(Hypertext) 문서

      • 1989) CERN에 있던 팀 버너스리에 의해 개발

  • HTML의 구조

    • 헤더(Header)와 본문(Body)으로 구분

    • 태그(tag)를 사용

      • 태그: 특별한 표시를 할 수 있는 표시자

  • <HTML> // HTML문서 시작

  • <HEAD> // 헤더의 시작

  • … 문성의 일반적인 정보나 제목기술 …

  • </HEAD> // 헤더의 끝

  • <BODY> // 본문의 시작

  • … 본문의 내용 …

  • </BODY> // 본문의 끝

  • </HTML> // HTML 문서의 끝


머리부

몸체부

HTML 기본 구조


태그의 구성 요소

  • 복합 태그

    <태그명> 내용 </태그명>

  • 속성을 가지는 태그

    <태그명 속성명=값> 내용 </태그명>

  • 단독 태그

    <태그명>

  • 사용 예

    여러분을 <font size=5 color=blue>진심으로</font> 환영합니다!


태그의 사용규칙

  • <태그명></태그명>과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다.

    • 닫을 때는 태그명으로만 닫는다.

  • 태그명과 속성명, 속성명과 속성명 사이는 한 칸씩 띄운다. 그 외 공백을 두어서는 안 된다.

    • 속성명과 값은 = 부호를 사용하여 표시한다.

    • 값이 두 단어 이상일 경우는 “”로 묶어서 표시한다.

  • 속성이 있는 태그가 있고 없는 태그가 있다.

    • 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도 되는 태그가 있다.

    • 여는 태그만 독립적으로 존재하는 태그도 있다.

  • 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다.


태그의 사용규칙

■ HTML 태그의 구조

사용 주의 사항

중첩 사용 시 마감 태그의 대응 위치

<tag1>

<tag2>

.

.

.

<tag1>

<tag2>

(x)

<tag1>

<tag2>

.

.

.

<tag2>

<tag1>

(o)


■ HTML 문서의 예

<HTML>

<head>

<title>테스트 문서</title>

</head>

<body>

기본 구조 연습 문서

</body>

</HTML>


■ 문자 관련 태그

글자 모양: 논리적 형태

<cite> : 인용문

<code> : 소스코드

<dfn> : 정의

<em> : 강조

<strong> : 강한 강조

<samp> : 예제

<var> : 변수


■ 문자 관련 태그

글자 모양: 물리적 형태

<b> ... </b>

<I> ... </I>

<u> ... </u>

<tt> ... </tt>

<sub> ... </sub>

<sup> ... </sup>

<big> ... </big>

<small> ... </small>

<strike> … </strike>

<blink> ... </blink>


■ <INS>, <DEL> 태그

삽입, 삭제 텍스트 표시

<INS> : 삽입 텍스트 표시, 밑줄이 함께 표시

<DEL> : 삭제 텍스트표시, 취소선이 함께 표시


■ <P> 태그

문단 구분 줄을 바꿈과 동시에 한 줄 띄게 되는 효과 속성

align=“{ left|center|right }”


■ <BR> 태그

  • 줄바꿈 태그

  • 단락구분은 하지 않음

  • 종료태그 없음


■ <FONT> 태그

글자의 크기, 색상, 서체를 지정

속성

SIZE=“n“ : n=1~7, 기본 값은 n=3

COLOR=“{#색상코드|색상이름 }“

FACE="글꼴체"

<FONT SIZE=“4”> … </FONT>

<FONT COLOR=“red”> … </FONT>

<FONT FACE=“바탕체”> … </FONT>

<FONT SIZE=“4” COLOR=“#ff0000”>...</FONT>


■ 색상 코드표

RGB : 각각을 8비트를 이용하여 16진수로 표현

R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성된다

11111111

00000000

00000000


칼라

영문명

16진수

칼라

영문명

16진수

Black

#000000

Green

#008000

Silver

#C0C0C0

Lime

#00FF00

Gray

#808080

Olive

#808000

White

#FFFFFF

Yellow

#FFFF00

Maroon

#800000

Navy

#000080

Red

#FF0000

Blue

#0000FF

Purple

#800080

Teal

#008080

Fuchsia

#FF00FF

Aqua

#00FFFF

  • 인터넷 이해와 활용

■ 색상 표현 단어


■ <FONT> 태그 사용 예


■ <Hn> 태그

문서 내의 단계별 제목 문서에 논리적 의미 부여

<Hn> : n = 1 ~ 6 (n=1이 가장 큰 제목 )

자동 줄바꿈

속성

ALIGN=“{left|center|right }”

<H1> … </H1>

<H3 ALIGN=“center”> … </H3>


■ <Hn> 태그 사용 예

<h1>h1 tag</h1>

<h2>h2 tag</h2>

<h3>h3 tag</h3>

<h4>h4 tag</h4>

<h5>h5 tag</h5>

<h6>h6 tag</h6>

<h1 align="center"> h1 tag </h1>


■ <CENTER> 태그

태그 사이의 내용을 가운데 정렬


■ <HR> 태그

가로선 긋기

속성

ALIGN=“{left|center|right }”

SIZE=“n” : 선의 두께(pixel), 기본 값은 2

WIDTH=“n” : 선의 폭(pixel,%)

NOSHADE : 음영효과 사용 안 함

COLOR=“color” : 선의 색상

<hr align=“ ” size=“n” width=“n” color=“color“ [noshade]>


■ <HR> 태그 사용 예


■ <ADDRESS> 태그와 주석문

<ADDRESS>

문서 수정일, 주소, 저자 정보

주석문

<!-- .... -->


■ <DIV> 태그

특정부분과 구역으로 구분

논리적 블록요소 주로

스타일 시트와 함께 사용

앞뒤 줄바꿈

속성

ALIGN=“{ left|center|right }”


■ <MARQUEE> 태그

텍스트에 움직임 효과를 부여

속성

BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임 형태

DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향

LOOP=”{n|infinite}” 반복횟수

SCROLLAMOUNT=”n” 스크롤되는 픽셀 수

SCROLLDELAY=”n” 메시지출력 시간간격(msec)

BGCOLOR=“color” : 스크롤되는 공간의 배경색

WIDTH, HEIGHT : 스크롤되는 공간의 크기

HSPACE, VSPACE : 스크롤되는 공간의 좌우, 상하여백


Marquee
예제) marquee 태그

<HTML>

<head>

<title>테스트 문서</title>

</head>

<body>

<Marquee BEHAVIOR=alternate> 인터넷 입문 </Marquee>

<Marquee BEHAVIOR=scroll> 인터넷 입문 </Marquee>

<Marquee BEHAVIOR=slide> 인터넷 입문 </Marquee>

<Marquee Direction=down BGCOLOR="red"> 인터넷 입문 </Marquee>

<Marquee Direction=up BGCOLOR="green"> 인터넷 입문 </Marquee>

<Marquee Direction=left BGCOLOR="blue"> 인터넷 입문 </Marquee>

<Marquee Direction=right BGCOLOR="yellow"> 인터넷 입문 </Marquee>

<Marquee ScrollAmount=1> 인터넷 입문 </Marquee>

<Marquee ScrollAmount=10> 인터넷 입문 </Marquee>

<Marquee ScrollAmount=100> 인터넷 입문 </Marquee>

<Marquee ScrollDelay=10> 인터넷 입문 </Marquee>

<Marquee ScrollDelay=100> 인터넷 입문 </Marquee>

<Marquee ScrollDelay=1000> 인터넷 입문 </Marquee>

</body>

</HTML>


■ <PRE> 태그

입력한 형태 그대로 출력

공백, 줄바꿈 인식

내부의 태그 인식


■ <XMP> 태그

입력한 형태 그대로 출력

공백, 줄바꿈 인식

내부의 태그 무시


■ Character Entity

HTML 내에서의 특수 문자 표시 방법


■ Character Entity 사용 예


■ 순서 리스트

순서 글머리 번호에 순서 번호가 있는 리스트

<OL> : 리스트의 시작과 종료(Ordered List)

속성

TYPE=“{ A|a|I|i|1 }” : 글머리 번호의 종류

START=“n” : 글머리 번호의 시작 번호

<LI> : 리스트 항목을 기술

속성

TYPE=“{ A|a|I|i|1 }” : 해당 항목의 글머리 번호의 종류

VALUE=“n”

<OL>

<LI> … </LI>

<LI> … </LI>

</OL>


■ 순서 리스트 사용 예

<ol>

<li>서울</li>

<li>경기</li>

<li>제주</li>

</ol>

<ol type=I>

<li>서울

<li>경기

<li value=5>제주

</ol>

<ol type=a start=3>

<li>서울

<li>경기

<li>제주

</ol>


■ 무순서 리스트

순서 글머리 번호에 순서 번호가 없는 리스트

<UL> : 리스트의 시작과 종료(Unordered List)

속성

TYPE=“{ disc|circle|square}” : 글머리의 모양

<LI> : 리스트 항목을 기술

속성

TYPE=“{ disc|circle|square}” : 글머리의 모양

<UL>

<LI> … </LI>

<LI> … </LI>

</UL>


■ 무순서 리스트 사용 예

<ul type=square>

<li>서울

<li>경기

<li>제주

</ul>

<ul>

<li>서울

<li>경기

<li>제주

</ul>


■ 정의 리스트

<DL> : 정의 리스트의 시작과 종료

<DT> : 정의 제목

<DD> : 설명, 항목, DT에 대해 들여쓰기 효과

<DL compact>


■ 정의 리스트 사용 예

<dl>

<dt>HTML

<dd>Hyper Text Markup Language

<dt>DHTML

<dd>Dynamic HTML

</dl>

<dl compact>

<dt>[1]

<dd>Hyper Text Markup Language

<dt>[2]

<dd>Dynamic HTML

</dl>


■ 중첩 리스트

시작 태그, 마감 태그 사용 주의(대칭)

<ol>

<li>서울

<ul type=disc>

<li>종로

<li>동대문

</ul>

<li>경기

<li>제주

</ol>


■ <A> 태그

Anchor 정의

속성

HREF=“url” : 연결 문서 지정

TARGET : 연결 문서를 출력할 대상

_blank : 새로운 창을 열어서 문서 연결

_top : 현재 창의 최상위에 문서 연결

_parent : 현재 문서 창을 연 문서 창에서 연결

_self : 자기 자신의 창에서 연결

Frame_name : 지정한 프레임에서 연결

TITLE : 링크에 대한 설명을 기술

<A HREF=“연결할 문서” TARGET=“대상”> 내용 </A>


<A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정

  • 웹 브라우저 안에서 보이는 파일들

    • htm, html, gif, jpg, txt

  • 플러그인 프로그램이 자동 연결되는 파일들

    • wav, mid, mp3, asf, avi, swf, wmv

  • 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들

    • ra, rm, ram, mov

  • 실행되지 않고 저장되는 파일들

    • exe, zip, hwp, doc, xls, ppt, psd

[하이퍼링크 가능한 파일의 종류]


속성

설명

기본 값

text

일반 문자색

black

link

한 번도 방문하지 않은 링크 문자색

blue

vlink

한 번이라도 방문한 링크 문자색

purple

alink

누르는 순간에 변하는 링크 문자색

red

<A> 태그로 하이퍼링크 설정하기 –하이퍼링크 설정

[<body> 태그의 문자색 관련 속성]


<A> 태그로 하이퍼링크 설정하기 –절대경로와 상대경로

  • 절대경로

    <a href=”http://www.hanbitbook.co.kr/book_search.htm”>한빛 미디어 도서검색</a>

  • 상대경로

    • 작업 폴더

      <a href=”samp.htm”>예제</a>

    • 상위 폴더

      <a href=”../../samp.htm”>예제</a>

    • 하위 폴더

      <a href=”sample/chap1/samp.htm”>예제</a>


■ <A> 태그 사용 예

하이퍼링크 연습 문서입니다.

<a href="2.htm"> HTML

</a>이란 무엇인가?

기존 창

하이퍼링크연습문서입니다.

<a href="2.htm“ target=“_blank”>

HTML

</a>이란 무엇인가?

새 창


■ <A> 태그 TITLE 속성

<a href="http://www.hs.ac.kr" title=“hs 홈페이지로"> hs가기 </a>


■ 책갈피 사용하기

NAME 속성을 이용하여 문서 내의 특정 부분으로의 연결 설정

대상 문서에 책갈피 위치 설정 후 하이퍼링크 지정 시 책갈피이름을 지정

책갈피 위치 설정 : <A NAME=“name”>..</A>

책갈피 위치로 링크 생성 :<A HREF=“문서#name”> .. </A>

동일 문서 내에서는 문서 이름 생략 가능


<a href=“NAME”> 해당문자열 </a>

클릭하면 문서 내의 WWW로 이동

<a name=“NAME”> 해당문자열 </a>

  • 인터넷 이해와 활용

■ NAME 속성


■ 동일 문서 내에서 책갈피 사용

<html>

<head>

<title> 링크연습</title>

</head>

<body>

<a href=“#서론”name=“위”>1.서론 </a>

<a href=“#본론”>2.본론 </a>

<a href=“#결론”>3.결론 </a>

<a name=“서론”> 1.서론 </a>

이 부분은 서론이….

<a href=“#위”>위로가기</a>

<a name=“본론”> 2.본론 </a>

이 부분은 본론입니다…..

<a name=“결론”> 3.결론 </a>

이 부분은 결론입니다.………….. ………...


■ 다른 사이트로 연결

웹 문서로 연결 : http://www.ocu.ac.kr

FTP 서버로 연결 : ftp://ftp.shareware.co.kr


■ 이메일 연결하기

‘편지쓰기’ 클릭하면

이메일 보내는 창 뜸


■ <BODY> 태그의 속성

BACKGROUND : 문서의 배경 그림

BGPROPERTIES="fixed“ : 배경 그림 고정

BGCOLOR=“color” : 문서의 배경 색상

TEXT=“color” : 기본 글자 색상

LINK=“color” : 링크 색상

VLINK=“color” : 방문한 링크 색상

ALINK=“color” : 클릭한 순간부터 링크 연결 중 색상

LEFTMARGIN=“n” : 문서의 왼쪽 여백

TOPMARGIN=“n” : 문서의 위쪽 여백

marginheight, marginwidth : NETSCAPE


■ 문서의 배경 이미지

<BODY BACKGROUND=“image_url” >

<HTML>

<head>

<title>기본 구조</title>

</head>

<body background="인형.jpg">

</body>

</HTML>


■ 문서의 배경색 지정


■ 링크 관련 글자색 변경

<body text="#0000ff" link="red" vlink="green“ alink=“black”>

하이퍼링크연습문서입니다.<br>

<a href="http://www.ocu.ac.kr"> OCU로 가기 </a><br>

<a href="http://mail.ocu.ac.kr"> OCU 메일 </a>


<IMG> 태그로 그림 삽입하기 –홈페이지용 그림 파일

  • GIF

    • Graphic Interchange Format의 약어

    • 256컬러만 지원하므로 주로 홈페이지용 버튼, 메인,문자 처럼 단순한 그림에 사용된다.

  • JPG

    • 1980년, Joint Photographic Experts Group(JPEG)에서 개발

    • 16만 컬러를 지원하므로 인물사진, 배경사진과 같이 고해상도 그림에 주로 사용된다.

  • PNG

  • BMP

[형식]


<IMG> 태그로 그림 삽입하기 –홈페이지용 그림 파일

  • 홈페이지 제작과 관련된 이미지 제공

    • http://supericon.superboard.com

    • http://koreacartoon.hihome.com

    • http://cherrynara.dreamwiz.com

  • 검색엔진을 이용한 이미지 검색 사이트

    • http://imagebingo.naver.com

    • http://imagesearch.yahoo.co.kr

    • http://imagesearch.nate.com

[이미지 모음 사이트]


■ 그림 삽입

<IMG> : 그림 삽입

속성

SRC = “image_url” : 그림의 위치 지정

WIDTH, HEIGHT : 그림의 크기 지정

ALIGN = “{left|right|top|middle|bottom}” : 정렬

BORDER = “n” : 테두리 두께

ALT =“설명”: 마우스 오버 시 표시할 설명

VSPACE, HSPACE : 그림 주위의 글자와의 간격


■ 그림 삽입 예

<img src=“http://www.ocu.ac.kr/images/img_01.gif”>

<img src=“images/abc.gif”> Homepage and ...

하이퍼링크연습문서입니다.

<img src="http://www.ocu.ac.kr/images/img_01.gif"> OCU 그림 삽입


■이미지와 텍스트 정렬

글자의 위치를 이미지와 연관시켜 배치

이미지를 중심으로 텍스트를 배치할 경우

ALIGN= top, middle, bottom

- top : 글자를 이미지의 가장 윗 부분에 정렬

- middle : 글자를 이미지의 중앙선에 정렬

- bottom : 글자를 이미지의 가장 밑부분에 정렬

ALIGN=bottom 옵션은 기본 값

문장이 긴 경우, 창의 크기를 줄이면 자동적으로 이미지

밑으로 위치하게 된다는 것에 주의


■ 이미지 정렬 예

<img src=“...” align=top|middle|bottom|right|left>

<p align=left|center|right><img src=“...“> </p>

하이퍼링크연습문서입니다.<br>

<img src="pic.jpg" > 그림삽입 <br>

<img src="pic.jpg" align=top> 그림삽입 <br>

<img src="pic.jpg" align=middle> 그림삽입 <br>

<img src="pic.jpg" align=right>


■ 이미지 제목 넣기

<img src=“img_url” alt=“title” >

이미지 위치에 이미지 대신 제목 보여 줌

텍스트 베이스 브라우저에서 사용

로딩 시간 동안 이미지 위치에 보여 줌

<img src="http://www.ocu.ac.kr/images/img_01.gif"

alt="OCU 로고"> OCU 그림 삽입


■ 여백 및 테두리 조정

<IMG SRC=”그림 파일" VSPACE=n HSPACE=n>

이미지를 부동 이미지로 판별하게 해서 글자가 그 주위에

오지 못하게 함

HSPACE 속성 : 이미지의 양 옆으로 (가로측) 여백을 지정

VSPACE 속성 : 이미지의 위,아래 여백을 지정

BORDER 속성 : 이미지의 테두리를 지정, 강조 색깔 : BLACK


■ 멀티미디어 삽입 방법

  • 하이퍼 사운드/비디오

    • <A HREF=“멀티미디어 파일이름”> ….. </A>

    • 링크로 연결해서 마우스를 클릭하면 새로운 화면에서 작동

  • 외부 프로그램을 작동시키는 방법

    • <EMBED SRC =“ 멀티미디어 파일이름”

      Autostart=FALSE/TURE Width = 숫자 HEIGHT=숫자>

    • 외부프로그램을 웹브라우저에 삽입하여 작동


■ 멀티미디어 삽입

파일 재생 방식

다운로드 : wav, mid, au, mp3

스트리밍 : ra, wmv, wma, asf

<EMBED> : 플러그인으로 작동하는 요소를 삽입

속성

- align=”{left;right;top;bottom;middle}” 텍스트와의 정렬

- border=”n” 테두리 두께 height, width=”n” 객체의 높이와 두께

- hidden=”{true;false}” : 화면상에 표시 유무

- loop=”{n;infinite}” : 반복 유무

- pluginspace=”url” 사용자가 플러그인이 없을 경우 해당 플러그인을

다운로드받을 수 있는 주소

- src=”url” 객체의 url

- autostart=”{true;false}” 문서 로딩 후 자동으로 재생


■ 멀티미디어 삽입 예


■ <TABLE> 태그

표의 시작과 끝

속성

BORDER=“n” : 외부테두리 두께, 기본 값은 0

CELLSPACING=“n” : 셀 간격

CELLPADDING=“n” : 셀 내부 여백

WIDTH=“n”, HEIGHT=“n” : 표의 너비, 높이

BGCOLOR=“color” : 표의 배경색

BORDERCOLOR=“color” : 표의 테두리 색


■ 표 만들기 예

<TR>..</TR> : 행 단위 지정

<TH>..</TH> : 셀 헤더 지정

<TD>..</TD> : 셀 데이터 지정


■ <TR>, <TD>, <TH>에 사용되는 속성

ALIGN=“{ left|center|right }”(tr,th,td)

VALIGN=“{ top|middle|bottom }”(tr,th,td)

BGCOLOR=“color” : 셀의 배경색 (tr,th,td)

COLSPAN=“n” : 열 합병 (th,td)

ROWSPAN=“n” : 행 합병 (th,td)

NOWRAP : 문장의 줄바꿈 방지 (th,td)

WIDTH=“n”, HEIGHT=“n” : 셀의 폭, 높이 (th,td)


■ 셀 합병 연습


■ <CAPTION> 태그

표 제목

속성

ALIGN=“{ top|bottom }” : 제목의 위치


프레임 나누기 –프레임 개요

[프레임 분할 예]

상단 프레임

좌측 프레임

우측 프레임


프레임 나누기 –프레임 개요

  • 장점

    • 한 화면에 문서 여러 개를 동시에 보여줄 수 있다.

    • 문서가 독립적이어서 서로 다른 창의 변화는 영향을 받지 않는다.

    • 내용을 체계적으로 관리할 수 있고, 작업 효율도 높일 수 있다.

    • 집안에서 편하게 정보를 찾아보는 것과 같은 안정감을 준다

    • 메뉴를 찾아 헤매는 시간을 절약해 주므로 쉽게 원하는 정보를 찾아볼 수 있다.

  • 단점

    • 프레임 안에서 내용을 보여주어야 하므로 답답한 느낌을 준다.

    • CGI 프로그램 사용 시 프레임 때문에 제한을 받으므로 가급적 사용하지 않는다.


■ 프레임 문서

하나의 창을 여러 개의 화면으로 분할

프레임마다 독립적인 URL 가짐

<BODY> 대신 <FRAMESET> 태그 사용

프레임 문서 제작 방법

- <FRAMESET> 태그를 이용하여 창 나누기

- <FRAMESET> 태그 내에 <FRAME> 태그를 이용하여 각

프레임에 나타낼 문서 지정


■ 프레임 문서


■ <FRAMESET> 태그

프레임 정의의 시작과 끝, 프레임 설정

속성

ROWS, COLS : 행 또는 열 방향으로의 프레임구분

ROWS=“프레임1크기, 프레임2크기, … ”

ROWS=“200, 600”

COLS=“30%, 70%”

ROWS=“100, *, 100”

FRAMEBORDER=“{ yes|no }” : 경계선 표시 유무

FRAMESPACING : 경계선의 두께

BORDERCOLOR : 경계선 색상


■ <FRAME> 태그

각각의 프레임에 표시할 문서 지정

속성

SRC=“url” : 프레임에 보여질 HTML 문서의 URL

NAME=“name” : 프레임의 이름

SCROLLING=“{ yes|no|auto }” : 스크롤 바 생성유무

NORESIZE : 프레임크기 고정

프레임 설정 순서: 왼쪽 -> 오른쪽, 위 -> 아래


■ <FRAME> 이름(1)

Target 지정

<a href=“….” target=“……”>

_top, _blank, _self, 프레임 이름

기본 Target 설정

<base target=“…... “> : <HEAD> 태그 내에 선언


■ <NOFRAMES> 태그

<FRAME> 태그를 지원하지 않는 브라우저를 위해 설정

<html>

<head> </head>

<frameset cols=“200,*”>

<frame src=“1.htm”>

<frame src=“2.htm” name=“main”>

</frameset>

<noframes>

<body>

이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다.

</body>

</noframes>

</html>


■ 다중 프레임 문서

<frameset cols="50,*">

<frame>

<frameset rows="60,*">

<frame>

<frame>

</frameset>

</frameset>


■ 플로팅 프레임 문서

<IFRAME> : 플로팅 프레임

src=“url” 로드할 문서의 URL

width, height = “n” 프레임의 크기 지정

align : iframe 위치 지정

주위에 글자가 배치될 수 있게 할 수 있는 박스형 프레임

생성 태그


■ 플로팅 프레임 문서 예


프레임 나누기 –원하는 프레임에 문서 보여주기

  • _blank

    • 무조건 새 창에 띄운다.

  • _self

    • 기본 값으로 자기자신의 창(현재 창)에 띄운다.

  • _top

    • 프레임을 모두 제거하고 하나의 창에 띄운다.

  • _parent

    • 프레임이 주종관계를 이룰 때 종속 프레임을 제거하고 하나의 창에 보여주므로 프레임의 형태는 주(상위)프레임 상태가 된다.

[target 속성의 예약어]


■ 입력 폼

사용자로부터 정보를 입력 받을 수 있는 형식

속성

NAME : 폼 이름

ACTION : 폼에서 입력된 데이터를 보내서 처리하는

프로그램의 URL을 지정

METHOD : 데이터 전송 방법


태그명

결과

설명

<form></form>

안 보임

폼 양식의 시작과 끝

<input type=text>

한 줄 입력 상자

<input type=password>

*로 표시되는 암호 입력상자

<input type=radio>

라디오 버튼

<input type=checkbox>

체크상자

<input type=button>

일반 버튼

폼 양식으로 회원전용 공간 만들기 –폼 관련 태그

[폼 관련 태그(1)]


태그명

결과

설명

<input type=submit>

전송확인 버튼

<input type=reset>

초기화 버튼

<input type=image>

이미지 버튼

<input type=file>

파일 업로드

<input type=hidden>

안 보임

숨겨진 필드

<textarea></textarea>

여러 줄 입력상자

<select></select>

목록 상자의 시작과 끝

<option>

목록 상자에 포함될 항목 지정

폼 양식으로 회원전용 공간 만들기 –폼 관련 태그

[폼 관련 태그(2)]


■ 텍스트 입력 양식

<INPUT>

속성

TYPE=“text” : 텍스트 입력상자

NAME = “field_name” : 입력상자 이름

SIZE = “n” : 입력상자 크기 (디폴트:20)

MAXLENGTH = “n” : 최대 입력가능 글자 수

VALUE = “value” : 입력상자 초기 값

TITLE : 마우스 오버 시 표시 문자

READONLY : 입력 불가


■ 패스워드 입력 양식

<INPUT>

속성

TYPE=“password” : 패스워드 입력상자

NAME = “field_name” : 입력상자 이름

SIZE = “n” : 입력상자 크기 (디폴트:20)

MAXLENGTH = “n” : 최대 입력가능 글자 수

VALUE = “value” : 입력상자 초기 값

<HTML>

<head> <title>테스트 문서</title> </head>

<body>

<form>

이름 <input type=text size=30 value=“이곳에 이름을 입력하세요” > <br>

비밀번호 <input type=password> <br>

</form>

</body>

</HTML>


■ 체크상자 양식

<INPUT>

속성

TYPE=“checkbox” : 체크박스

NAME = “field_name” : 체크박스 이름

VALUE = “value” : 선택 시 넘겨줄 데이터

CHECKED : 체크된 상태로 로딩

<HTML>

<head> <title>테스트 문서</title> </head>

<body>

좋아하는 프로그램 언어를 선택하시오

<form>

<input type=checkbox name=prolang value=0 checked> 비주얼 베이직<br>

<input type=checkbox name=prolang value=1> 델파이 <br>

<input type=checkbox name=prolang value=2> 비주얼 C++ <br>

<input type=checkbox name=prolang value=3> 자바 <br>

</form>

</body>

</HTML>


■ 라디오 버튼 양식

<INPUT>

속성

TYPE=“radio” : 옵션 버튼

NAME = “field_name” : 옵션 버튼 이름

같은 이름으로 그룹화

VALUE = “value” : 선택 시 넘겨줄 데이터

<HTML>

<head> <title>테스트 문서</title> </head>

<body>

좋아하는 프로그램 언어를 하나만 선택하시오

<form>

<input type=radio name=prolang value=0 checked> 비주얼 베이직<br>

<input type=radio name=prolang value=1> 델파이 <br>

<input type=radio name=prolang value=2> 비주얼 C++ <br>

<input type=radio name=prolang value=3> 자바 <br>

</form>

</body>

</HTML>


■ 일반 버튼 양식

<INPUT>

속성

TYPE=“button” : 일반 버튼

NAME = “button_name” : 버튼 이름

VALUE = “value” : 버튼에 표시할 글자

<input type=button value=“버튼이름" >


■ 확인 버튼 양식

<INPUT>

속성

TYPE=“submit” : 확인 버튼

NAME = “button_name” : 확인 버튼 이름

VALUE = “value” : 버튼에 표시할 글자

<input type=submit value=“버튼이름" >


■ 취소 버튼 양식

<INPUT>

속성

TYPE=“reset” : 취소 버튼

NAME = “button_name” : 취소 버튼 이름

VALUE = “value” : 버튼에 표시할 글자

<input type=reset value=“버튼이름" >


■ 파일선택 버튼 양식

<INPUT>

속성

TYPE=“file” : 파일 선택 버튼

NAME = “button_name” : 버튼 이름

파일 입력상자와 버튼이 자동 생성

<input type=file >


■ 기타

그림 버튼

속성

TYPE=“image” : 그림 버튼

NAME = “button_name” : 버튼 이름

SRC = “url” : 그림 파일 위치

숨김 양식

속성

TYPE=“hidden” : 숨김 양식

NAME = “name” : 양식 이름


■ 리스트박스 양식

<SELECT> : 리스트박스의 시작과 끝

속성

SIZE=“n” : 리스트박스 크기

NAME = “listbox_name” : 박스 이름

MULTIPLE : 복수 항목 선택 가능

<OPTION> : 각 항목을 설정

속성

SELECTED : 초기 선택 상태

VALUE = “value” : 선택 시 할당 값


■ 콤보박스 양식

<SELECT> : 콤보박스의 시작과 끝

속성

NAME = “listbox_name” : 박스 이름

<OPTION> : 각 항목을 설정

속성

SELECTED : 초기 선택상태

VALUE = “value” : 선택 시 할당 값


■ 리스트박스 예제(1)


■ 리스트박스 예제(2)


■ 메모 입력상자 양식

<TEXTAREA>

속성

ROWS, COLS : 행과 열의 개수

NAME = “name” : 상자 이름


<HTML>

<head> <title>테스트 문서</title> </head>

<body>

<form>

아이디 <input type=text> <br> 암호 <input type=password> <br>

<input type=radio>남자 <br> <input type=radio>여자 <br>

<input type=checkbox> 영화감상 <br>

<input type=button value="버튼"> <br>

<input type=submit> <br>

<input type=reset> <br>

<input type=image> <br>

<input type=file> <br>

<input type=hidden> <br>

<textarea rols=12 cols=70> 여기에 쓰세요 </textarea> <br>

<select size=3>

<option>1 </option> <option>2 </option>

<option>3 </option> <option>4 </option>

<option>5 </option>

</select> <br>

<select>

<option>011 </option> <option> 016 </option>

<option>017 </option> <option> 018 </option>

<option> 019 </option>

</select> <br>

</form>

</body>

</HTML>


ad