1장(기본태그)(2003)_1
Download
Report
Transcript 1장(기본태그)(2003)_1
Chapter 1.
HTML5 소개 및 기본 태그들
소개
모바일 정보구축
• 스마트폰, 노트북, 태블릿 등의 매체에서 정보를 이용
• 작업과정 : PC 이용
• 웹을 이용하지 않고 네트웍만 이용하는 경우 : 다양한 언어 이용함
• 웹을 이용하는 경우 : HTML 이용함
HTML
• Hyper Text Markeup Language
• 텍스트를 이용한 특정한 위치로의 이동
• 마크업 : 인쇄를 위한 특정한 기호
2
소개 : 앱의 종류
1. 웹앱
① 의미 : 웹 애플리케이션
② 사용 방법 : 모바일 환경(애플)에서 주소를 통하여 접속
③ 웹브라우저에서 실행됨
2. 네이티브 앱
①
②
③
④
⑤
⑥
⑦
스마트폰 OS 전용으로 제작된 앱
아이폰 앱 : Object-C 언어 + 매킨토시 Xcode 개발환경
안드로이드 앱 : 자바 + 멀티 플랫폼
윈도우폰 : C#
스마트폰의 하드웨어 제어 가능 : 카메라, GPS, 스피커
앱 스토어에 등록 가능
웹브라우저 없이 사용
3. 하이브리드 앱
① 웹 앱 + 네이티브 앱 의 장점
② 웹 표준 기술(HTML5) 사용
③ 웹 앱 개발 ------------------------ 네이티브 웹 변환
크로스 프레임워크(폰갭)
3
작업환경
1. 브라우저 : 사파리(애플), 크롬(안드로이드)
2. 개발도구 : EditPlus(HTML + CSS + 자바스크립트)
3. 에뮬레이터 :
① 애플 : 드림위버(지구->미리보기->디바이스 센트럴)
② 안드로이드 : 아파치 웹서버 설치
4
HTML 문서의 기본구조
1. HTML 문서의 기본 구조
① <HTML> <HEAD> <TITLE> <BODY>
2. HTML (Hyper Text Markup Language)
① 마크업 : 특정 인쇄 정보를 표시하기 위해 사용되는 문자나 기호
② <p> 홍길동 </p>
기본내용
마크업
③ 태그 : 기본적인 내용인 “홍길동”이 어떻게 표시되는지 나타내는 기호
④ 엘리먼트 : 태그내에 둘러싸인 화면에 실제 나타나게 되는 내용물
5
HTML 문서의 기본 구조
② (예문)
<html>
<head>
<title>HTML 문서의 제목 </title>
</head>
<body>
HTML 문서의 내용입니다
</body>
</html>
시작/종료는 <태그> </태그>의 쌍으로 구성 됨
1) <html> ~ </html> : HTML 문서임을 알려줌
2) <head> ~ </head>
①
②
titile을 제외한 내용은 웹브라우저에 나타나지 않음
주로 정보를 알려줌
3) <title> ~ </title>
4) <body> ~ </body> : 화면에 나타나는 모든 내용
6
HTML 문서의 기본 태그
1)
2)
3)
4)
5)
주석
① <!---> : body 태그안에서 사용
② /*
*/ : css 내에서 사용
문서제목 : <Hn>
① Headline
② n: 1~6, 클수록 작아짐
줄바꿈 : <br>
① Line break
② 문서 작성시 사용하는 엔터는 HTML에서는 적용 안됨
③ 종료 태그</br> 없이 사용됨
<pre>
① 입력한대로 보여줌
② 줄바꿈, 공백등이 그대로 표현됨
③ (조건) <pre></pre>태그 안에서는 다른 태그 사용 불가
HTML에서는 빈칸(스페이스 키)이 여러 개 나열되어도 한 개로 취급됨
빈칸 여러 개 표현 방법 : “ ” 여러 개 사용
단락 : <p> paragraph
① 줄을 바꾼 후 빈 줄 하나 만들어줌 (<br><br>)
② 여러 개가 동시에 사용되어도 한 개만 인식함(<br>은 사용한 만큼 적용됨)
7
HTML 문서의 기본 태그
기본 태그 연습하기
<body>
<h1>가장 큰 제목</h1>
<h6>가장 작은 제목</h6>
일반적인 HTML문서에서는
Enter키도 인식하지 못하고,
공백(space)도
인식하지 못합니다.
하지만 태그를 사용하면 Enter키 와 <br>
공백(space)도 인식합니다.
<p>단락을 표현 했습니다</p>
<pre>
Pre태그 내부에서는
HTML 문서에 입력된 그대로 출력됩니다
공백(space)도 여러 번 입력하면 그대로 나타납니다
탭(Tab)도
인식합니다.
</pre>
</body>
8
HTML 문서의 기본 태그
6) 속성 사용하기
속성이란?
① 시작 태그에서 사용됨
② 속성 값 표현 : 속성=“값“ 또는 속성=값으로 표현
(링크 속성에서는 반드시 따옴표 사용)
③ 문단 정렬 : <p align=“left/right/center”> ~~ </p>
(기본값 : left)
④ (예제) chap1_1.html
7) <hr> : 수평선 사용하는 단락
① Horizontal ruler
② 자동 줄 바꿈
③ 속성 : width, size, align, noshade, color
④ (예문)<hr width=30 size=3 align=right>
⑤ 기본 : 가운데 정렬
⑥ (예제)chap1_hr태그.html
9
HTML 문서의 기본 태그
8) <center>~~</center>> : 가운데 정렬
① 텍스트, 이미지, 테이블
② (비교)속성을 이용한 정렬 : align=“left/right/center”
③ (연습하기) chap1_1.html의 가운데 정렬을 <center>태그로 바꾸기
9) <body> 태그에서의 색상 관련 속성들
① 배경색상 : bgcolor(참고, background : 배경 이미지)
② 글자 색상 : text=“#000000”
③ vlink=“ “, link=“ “, alink=“ “ : 링크 대상의 색상
④ (연습하기)chap1_1.html : 배경색(노랑), 텍스트(파랑)
10
글자 관련 태그
글자의 서식에 사용
밋밋한 글자에 포인트 주기 : 색상, 크기, 글꼴,….
1. <font> : 지정한 위치의 폰트만 적용됨
1) size 속성 : size=1
① 1~7 클수록 글자 커짐(Hn과 반대)
② 상대적 글자 크기 : size=-1 또는 size=+1
③ 기본크기 : 3
2) color : color=색상명 또는 color=“#ffffff”
(비교) <body text=“색상명”>
3) face : face=고딕체
① 글꼴 지정
② 두 개 이상은 ,로 구분(지원되지 않는 폰트 대비)
2. <basefont> : HTML문서의 기본글자
① face, size
② 종료태그 없음 : 사용 위치부터 문서 끝까지 적용됨
③ (참고) <basefont>는 HTML5에서 중단되었음 => 크롬에서 적용 안됨
11
글자 관련 태그
3. 장식 효과 태그
① 진하게(B, strong) 이태릭(I, em) 밑줄(u), 아래첨자(sub), 위첨자(sup)
② (예제)chap1_장식.html
4. 특수문자 사용
① 공백( ) , <(<) , >(>)
② ⓒ(©)
5. 인용문단 이용 : <blockquote> ~~ </blockquote>
① 자동 들여 쓰기
6. <address>
① 문서 작성자 알릴 때
② 이탤릭체로 나타남
③ 줄을 바꿔서 실행됨
12
목록 관련 태그
비슷한 성질의 내용을 한눈에 파악할 수 있도록 해줌
자동 줄바꿈, 들여쓰기
1. <ul> ~~ </ul> : Unorderd List, 순서가 없는 기호
2. <ol> ~~ </ol> : Orderd List, 순서가 있는 기호
3. <li> : 실제 리스트 내용
1) type 속성
① 글머리에 사용 할 기호 또는 번호
② <ul> : disk, square, circle
(예문)<ul type=circle>
③ <ol> : 숫자(기본 값), 알파벳, 로마문자
(예문)<ol type=“A”>
2) start 속성
① <ol> 목록에서만 사용
② 시작 순서 지정 : start=2
3) value 속성
① <ol> -> <li> 에서만 사용
② 목록 번호 직접 지정
4) (예제) chap1_2.html, chap1_3.html
13
목록 관련 태그
4. <dl> : Definition List(정의 리스트)
1) (예문)
<dl>
<dt>용어의 제목
<dd>용어의 의미
</dl>
① dt : Definition Title
② dd : Definition Descrioption
2) (예제)
<h3>정의목록의 태그 설명</h3>
<dl>정의목록
<dt>dt태그</dt>
<dd>Definition Title 입니다</dd>
<dt>dd태그</dt>
<dd>Definition Description 입니다</dd>
</dl>
정의목록의 태그 설명
정의목록
dt태그
Definition Title 입니다
dd태그
Definition Description 입니다
14
움직이는 텍스트
5. <marquee> ~~ </marquee> : 텍스트를 일정한 방향으로 움직임
①
②
③
④
⑤
⑥
⑦
⑧
⑨
height, width : 텍스트가 나타날 범위
hspace, vspace : 텍스트의 바깥쪽 상하좌우 여백
behavior : scroll, slide, alternate 등 움직이는 방법
direction : 움직이는 방향(left, right, up, down)
scrolldelay
• 움직이는 속도(1픽셀이 움직이는 시간)
• 1/1000초. 클수록 느려짐
scrollamount
• 한번에 스크롤 되는 픽셀 수
• 클수록 빨라짐
bgcolor : 배경색
loop : 반복횟수(기본 : 계속)
(예제) chap1_4.html
15
움직이는 텍스트
(연습문제)chap1_연습문제1.html
16
작성할 html 문서(3월 15일)
① chap1_장식.html
② chap1_2.html ③ chap1_3.html
④ chap1_4.html
⑤chap1_연습문제.html(3/13일 퀴즈문제)
=> marquee태그의 엘리먼트는 본인의 이름과 학번으로 바꿉니다.
17
이미지
<img src=“이미지 화일명”>
① 종료 태그 없음 : 비어있는 엘리먼트
② 반드시 src 속성과 함께 사용함
③ 가능한 이미지 종류 : gif, jpg, png
1) alt : 이미지 파일 설명
2) border : 이미지 테두리
3) align
① top/middle/bottom : 이미지 옆의 글자 정렬
② left/right : 이미지의 정렬(그림 옆에 여러 줄의 글자 입력)
③ 이미지의 가운데 정렬
<center><img src=“ “></center>
④ <br clear=left>
(참고)background : 배경이미지는 <body>에서 사용함
4) width, height : 이미지의 크기 조절
width=50%(높이는 너비 대비 자동 조절됨) 또는 width=400
5) vspace, hspace : 그림과 글자 사이의 여백 지정
6) (예제)chap1_이미지.html
18
하이퍼링크
<a href=“링크할 파일”>
…
</a>
① 반드시 href 속성과 함께 사용함
<a href=“link.html”>문서이동</a>
<a href=“http://주소”>홈페이지이름</a>
<a href=“mailto:[email protected]”>조은자</a>
<a href=“1장(HTML소개).ppt”>강의자료_1장</a>
② link=“색상 “, vlink=“색상“, alink=“색상“ : <body>에서 지정
링크의 기본색상, 한번 방문한 색상, 클릭할 때 색상
chap1_link.html
③ target : 이동할 창 설정
• _blank : 새로운 창
• _self : 현재 창
• _top : 프레임의 구성 시 프레임 사라지고 한 개의 화면
④ 이미지를 클릭하여 링크하기 : chap1_link_이미지.html
• <a href=“ “><img src=“ “></a>
⑤ 특정위치로 이동하기 : chap1_link_책갈피.html
• 같은 페이지의 특정위치 : 책갈피
• 다른 페이지의 특정위치
• <a href=“#키워드”>클릭하세요 </a>
<a id=“키워드”>이동되는 위치입니다. </a>
19
하이퍼링크
(연습문제)chap1_연습문제2.html
20
멀티미디어(크롬에서 실행함)
음악, 동영상 파일 링크하기 : 링크를 클릭하여야만 실행됨
1. <a href=“다뉴브강의 잔물결.mp3”>음악화일</a>
2. <a href=“wildlife.webm”>동영상</a>
3. (예제)멀티미디어_link.html
음악, 동영상 파일 포함하기 : 웹브라우저에서 자동으로 실행됨
1. <embed src=“화일명”></embed>
2. 속성 hidden=true 사용하기
3. 배경음악 설정 가능
3. (예제)멀티미디어_embed.html
21
(예제)chap1_이미지.html
(예제)chap1_link_이미지.html
(예제)멀티미디어_embed.html
22
퀴즈
(연습문제)chap1_연습문제3.html
23
24
테이블
테이블이란?
표(행과 열의 집합)
셀들의 집합
홈페이지의 전체적인 구성과 레이아웃 설정
행
열
1) <table> ~ </table> : 테이블의 선언
<table>
테이블이 생성됩니다
</table>
25
테이블
2) <tr> ~ </tr>, <td> ~ </td> : 셀 만들기
① <tr> ~ </tr> : 행 만들기 (table row)
② <td> ~ </td> : 행 안의 열 만들기 (table data)
③ (형식)
<tr>
<td> ~ </td>
<td> ~ </td>
</tr>
행 안에 열을 만든다
3) 테이블의 속성들
① border : 테이블의 두께
② align : left/right/center
③ cellpadding : 셀의 내용과 셀 테두리의 간격
④ cellspacing : 셀과 셀의 간격(셀 테두리의 두께)
26
테이블
cellpadding=1, cellspacing=1
(지정하지 않았을 때 기본값)
cellpadding=10, cellspacing=1
(셀의 내용과 셀 테두리의 간격)
27
테이블
cellpadding=1, cellspacing=10
(셀과 셀의 간격(셀 테두리의 두께))
⑤
⑥
⑦
⑧
width/height : 비율(%) 또는 픽셀
bgcolor : 테이블의 배경 색상
bordercolor : 테두리 색상
background : 테이블의 배경 이미지
28
테이블
4) 테이블의 제목 : <caption> ~ </caption>
5) 셀의 제목(table head) : <th> ~ </th>
6) (예문)1.
<caption> 수 업 일 정 </caption>
<tr>
<th> 주차 </th><th>내 용</th>
</tr>
<tr>
<td>1::</td>
<td> HTML5의 기본 </td>
</tr>
<tr>
<td>2::</td>
<td> 이미지와 링크 태그들 </td>
</tr>
29
테이블
7) (예문)2. 테이블 태그에 속성 지정하기
① <table bgcolor=cyan>
② <table align=left/right>
30
테이블
7) (예문)2. 테이블 태그에 속성 지정하기
③ <table width=50% height=200>
④ <table background=logo.jpg>
31
테이블
8) (예문)3. 특정 셀에 속성 지정하기(<tr>)
① <tr valign = top/middle/bottom> ~ </tr>,
② <tr align = left/right/center> ~ </tr>
32
테이블
8) (예문)3. 특정 셀에 속성 지정하기(<tr>)
② <tr bgcolor=blue> ~ </tr>, <tr background=logo.jpg> ~ </tr>
<tr height=값>
33
테이블
9) (예문)4. 특정 셀에 속성 지정하기(<td>, <th>)
① <tr>태그와 동일
② rowspan : 행 합치기
• <td rowspan= 합칠 행의 개수>
(예제)chap1_테이블2_1.html
34
테이블
9) (예문)4. 특정 셀에 속성 지정하기(<td>, <th>)
③ colspan : 열 합치기
• <td colspan= 합칠 열의 개수>
(예제)chap1_테이블2.html
35
테이블
10)(예문)5. 테이블 안에 테이블 만들기
(예제)chap1_테이블_테이블.html
36
테이블
응용1. 테이블을 이용한 메뉴 만들기
37
테이블
11) (연습문제)chap1_연습문제4.html
① rowspan 속성 이용하기
② 테이블 안에 테이블 만들기
12) (연습문제)테이블_연습문제.html
38
프레임
하나의 화면에 여러 개의 페이지를 보일 수 있는 태그
1. 사용형식
<frameset rows/cols=“ 크기, 크기”>
<frame src=“ “>
<frame src=“ “>
</frameset>
2. <frameset>은 페이지의 내용이 아니므로 <body>태그 안에 넣지 않는다
=> </head> 와 <body>태그 사이에 넣는다
3. 사용형태
39
프레임
4. <frameset>의 속성
1) rows : 행으로 분리
① rows=“50%,*” 또는 rows=“200,300”, “200,*”
2) cols : 열로 분리
① cols =“50%,50%” 또는 cols=“200,300”
3) frameborder : 프레임의 테두리 사용 여부
① frameborder=1/0
4) border : 프레임 테두리 두께(픽셀단위)
5) bordercolor : 테두리 색상
5. <frame>의 속성
1) src : 해당 프레임에 사용되는 문서 파일
① src=“left.html”
2) name : 프레임의 이름(다른 프레임에서 호출할 때 사용됨)
3) scrolling : 스크롤바의 사용 여부(yes, no, auto)
4) marginheight : 프레임의 내용과 테두리의 상하 여백
5) marginwidth : 좌우 여백
40
프레임
6. 프레임의 예제1
41
프레임
6. 프레임의 예제2
<frameset cols="30%,70%" >
<frame src="chap1_1.html" name=left>
<frameset rows="50%,50%" >
<frame src="chap1_2.html" name=top>
<frame src="chap1_3.html" name="bottom">
</frameset>
</frameset>
frame 의 name은 <a href>태그에서 target= 속성에 이용함
(예문)<a href=“윤동주.html” target=bottom>테스트 문서 </a>
(예제)프레임_기본.html
42
7. iframe
① inline frame
② 문서 내에서 다른 문서를 볼 수 있는 창
③ 형식 : <iframe src=“화일이름” 속성=“속성값”></iframe>
④ 예제)
<body>
<iframe src=“chap1_1.html”> 내부창입니다…
</iframe>
</body>
43
프레임
8. (연습문제)chap1_연습문제5.html
44