Microsoft PowerPoint HTML기초(2).pptx

Transcription

1 웹과인터넷활용및실습 () (Part II) 문양세강원대학교 IT 대학컴퓨터과학전공 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 2 1

2 컬러코드와 RGB (1/4) 컬러 ( 색깔 ) 를지정하는두가지방법 컬러의이름을직접지정 ( 예 : red, black, yellow) 컬러코드를이용 RGB (Red, Green, Blue) 빛의삼원색 각원색은 0(00)~255(FF) 의 256단계의컬러를제공 0은컬로요소가전혀없으며, 255는가장짙은요소를나타냄 예 ) : white, FF0000: red, 00FF00: green, 0000FF: blue, FFFFFF: black 컬러코드알아내기 1: 컬러차트 (color chart) 이용 컬러챠트에는다양한컬러들의견본과각컬러들의코드가나와있음 검색엔진을통해인터넷에서쉽게구할수있음 Page 3 컬러코드와 RGB (2/4) Page 4 2

3 컬러코드와 RGB (3/4) Page 5 컬러코드와 RGB (4/4) 컬러코드알아내기 2: 색깔을컬러코드로변환하는도구이용 색깔을선택하면컬러코드를알려주는웹사이트이용 대표적사이트 : Page 6 3

4 이미지파일의종류및특성 (1/5) 이미지는텍스트에비해용량이크기때문에, 웹문서의로딩시시간이걸릴수있음 이미지저장방식 비트맵 (bitmap) 그래픽파일 벡터 (vector) 그래픽파일 Page 7 이미지파일의종류및특성 (2/5) 비트맵 (bitmap) 그래픽파일 모니터에나타나는개개의점 ( 화소, pixel) 에대응하는칼라값을저장한파일 이미지의크기와사용된컬러가파일을저장할때고정 처리속도는빠르나, 기억공간을많이차지하고이미지의크기나칼라를변경하기힘든단점이있음 ( 아래확대예제참조 ) 대표적인포맷으로는 GIF, PCX, JPEG, BMP 등이있음 관련프로그램 : 포토샵또는페인트샵프로확대 원본 Page 8 4

5 이미지파일의종류및특성 (3/5) Adobe Photoshop Page 9 이미지파일의종류및특성 (4/5) 벡터 (vector) 그래픽파일 이미지를그리는방법과순서를저장한파일 ( 이미지를벡터로표시 ) 임 수정이용이함 수학적인계산에의해만들어지기때문에, 컴퓨터를이용한디자인과 CAD 설계분야에서폭넓게사용 웹페이지에는비트맵파일만사용가능 코렐드로우 (coreldraw) 또는일러스트레이터 (illustrator) 확대 원본 Page 10 5

6 이미지파일의종류및특성 (5/5) Coreldraw Illustrator Page 11 그래픽파일포맷 (1/4) GIF (Graphics Interchange Format) 색깔을선택하면컬러코드를알려주는웹사이트이용 ( 원래목적 ) 인터넷에서그래픽교환표준으로사용 Compuserve라는온라인정보서비스회사에서개발 8비트색상 (256 color) 과투명한이미지지원 사진이나그림등많은컬러를필요로하는이미지에는부적합 텍스트와어울려본문을꾸미는이미지에는 GIF 파일이적당 GIF의사용 ( 인터레이싱 (interlacing) 기술을사용하여 ) 간단한애니메이션도가능 GIF 사용이좋은경우 아이콘이나로고같은색상이적은이미지 사진이미지라도크기가작은이미지 설계도나다이어그램, 벡터그래픽을변환한이미지 배경을투명하게처리하는능력이있으므로, 투명속성이필요한이미지 Page 12 6

7 그래픽파일포맷 (2/4) GIF 이미지예제 Page 13 그래픽파일포맷 (3/4) JPG, JPEG (Joint Photographic Expert Group) 파일의크기를최소화하기위해만들어진것으로, GIF와달리항상트루컬러로되어있는이미지만을저장 24비트컬러를모두표현할수있으며압축기술이뛰어남 부드러운컬러변환을가진이미지, 즉손으로그린그림이나사진과같은이미지 JPEG 사용이좋은경우 많은컬러를필요로하는이미지 부드러운컬러변환을가진이미지 브라우저화면을가득채울정도로큰이미지 ( 용량이적고전송속도가빠름 ) Page 14 7

8 그래픽파일포맷 (4/4) JPEG 이미지예제 Page 15 HTML 문서에이미지삽입 (1/4) <img src = image path > ( 대개 </img> 는생략 ) 속성 내용 SRC = 이미지파일 이미지태그에꼭있어야할속성이며출력할이미지파일명을지원 ALIGN = TOP BOTTOM MIDDLE LEFT RIGHT ALT = 문자열 이미지와이웃한텍스트를정렬하는방식을지정 이미지를볼수없는텍스트기반웹브라우저를사용하여접속한사람들을위하여이미지대신에보여줄메시지를지정해주는것 이미지대신에나타날문자열을지정한다. WIDTH = n ( 또는 n%) 이미지의가로방향의크기를임의로지정 HEIGHT = n ( 또는 n%) 이미지의세로방향의크기를임의로지정 HSPACE = n, VSPACE = n 이미지와주위의다른요소와의수평간격과수직간격을픽셀단위로지정 이미지테두리선의굵기를픽셀단위로지정 BORDER = n 0 으로지정하면이미지가링크되어있어도테두리선이나타나지않으며, BORDER의속성을지정하지않고생략하면링크가되어있지않은이미지는테두리선없이이미지만을출력 Page 16 8

9 HTML 문서에이미지삽입 (2/4) 이미지태그사용예제 Page 17 HTML 문서에이미지삽입 (3/4) 애니메이션 GIF (Animated GIF) 움직이는 GIF 또는 움직이는이미지 만화를만들때여러종이를조금씩넘겨가면서움직이는원리 한개의파일에여러개의이미지를담는기능 Page 18 9

10 HTML 문서에이미지삽입 (4/4) 애니메이션 GIF 사용예제 Page 19 이미지맵 (1/4) 한개의이미지파일에여러개의링크를 ( 영역별로 ) 할당하는기술그림에하나의링크만을연결한것이아니라, 그림의부분들이각각다른링크로연결하는기술링크와연결된이미지의영역을핫스팟 (hotspot) 이라함정의하고자하는영역의모양에따라사각형 (rectangle), 원 (circle), 다각형 (polygon) 의세가지종류를사용 Page 20 10

11 이미지맵 (2/4) <map name= 맵레이블 > </map> 이미지맵을사용하기위한이미지맵정보를정의 맵레이블 은이미지맵을여러이미지에서해당이미지맵을식별 맵레이블 은 <img> 태그내에속성으로정의 <img src= usemap = # 맵레이블 > Page 21 이미지맵 (3/4) <area> SHAPE = RECT CIRCLE POLYGON 이미지에서링크시키고자하는영역의모양을지정 HREF =. 정의된영역을마우스로클릭했을때연결될문서의 URL을지정 COORDS =. SHAPE에따른영역의실제좌표를정의 실제이미지에서왼쪽위의좌표를 (0, 0) 으로잡았을때의상대좌표 RECT 인경우 : x1, y1, x2, y2 (x1, y1: 왼쪽위꼭지점, x2, y2: 오른쪽아래꼭지점 ) CIRCLE인경우 : x, y, r POLYGON인경우 : x1, y1, x2, y2,, xn, yn, x1, y1 Page 22 11

12 이미지맵 (4/4) 이미지맵사용예 Page 23 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 24 12

13 하이퍼텍스트링크 (1/3) 다른문서 ( 혹은문서내다른위치 ) 와의연결기능제공하이퍼텍스트링크를이용해할수이는일 사용자를다른웹페이지로이동시킨다. 사용자를현웹페이지의특정한위치로이동시켜준다. 파일을다운받을수있게하거나이미지파일을보여준다. 전자우편을보낼수있도록한다. ftp 서버에접속하거나뉴스그룹으로연결시킨다. Page 25 하이퍼텍스트링크 (2/3) 앵커 (anchor) 태그 : <a> </a> <A HREF = 연결하고자하는곳의 ( 주소또는문서의 ) URL > 텍스트내용 </a> HREF: hypertext reference 의약어 Page 26 13

14 하이퍼텍스트링크 (3/3) 문서내연결 <A HREF = # 문서내에서찾아가야할지점의레이블 > 텍스트내용 </a> <A NAME = 지점의레이블 > 텍스트내용 </a> Page 27 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 28 14

15 테이블 (1/6) <table> </table> 테이블의시작과끝을알림 테두리를지정하지않고사용하면문서를보기좋게정렬하는용도로도사용 속성 BORDER = n (default = 0) 내용 테이블바깥쪽테두리의굵기는픽셀단위로지정 투명한도표 (border = 0) 는문장을정렬할때또는다단으로편집 WIDTH = n n% 테이블안에있는셀의너비를픽셀또는 % 단위로지정 HEIGHT = n n% 테이블안에있는셀의세로길이 ( 폭 ) 를픽셀 % 단위로지정 CELLSPACING = n (default = 1) CELLPADDING = n (default = 2) 테이블전체의선의굵기를픽셀단위로지정 셀안에입력된데이터사이의간격을픽셀단위로지정 BGCOLOR= color 테이블전체의배경컬러를지정 Page 29 테이블 (2/6) <caption> </caption> 캡션이란? 테이블에대한간단한설명 ( 제목 ) 테이블의위또는아래에캡션을설정 ALIGN = TOP BOTTOM (TOP: 테이블위, BOTTOM: 테이블아래 ) <tr> </tr> Table Row의약어로서테이블의새로운행 ( 줄 ) 이시작 새로운행 ( 줄 ) 이시작될때마다 <TR> 태그를반드시지정 ALIGN = LEFT RIGHT CENTER Table 내에서데이터를각각좌측, 우측, 중앙정렬을지정 VALIGN = TOP BOTTOM MIDDLE <TR> 태그가만들어낸열에포함되어있는셀들의데이터를수직정렬방법 Page 30 15

16 테이블 (3/6) <td> </td> 테이블의셀을정의하는태그 ( 셀에들어갈내용의앞뒤에사용되는태그 ) 속성 ALIGN = LEFT RIGHT CENTER (default = LEFT) VALIGN = TOP BOTTOM MIDDLE (default = MIDDLE) COLSPAN = n (default = 1) ROWSPAN = n (default = 1) NOWRAP BGCOLOR WIDTH (or HEIGHT) = n n% 내용셀내에서데이터를정렬하는방법을결정셀내에서데이터를수직정렬하는방법을결정현재의셀이다른행의셀과오른쪽으로병합현재의셀이다른열의셀과아래쪽으로병합셀내의내용이길면웹브라우저가자동으로줄바꿈을하여출력하게되는데이러한줄바꿈현상이일어나지않도록함셀의배경컬러를지정셀의높이나너비를지정 Page 31 테이블 (4/6) <th> </th> Table Heading을의미 (<td> 와기능이같으나 ) 테이블의헤더의셀을나타내기위해사용 <td> 대신 <th> 로지정해주면, 글자체가볼드 (bold) 로나타나고, 기본적으로중앙정렬로화면에나타남 Page 32 16

17 테이블 (5/6) 테이블관련태그정리 <TABLE> [ 표1] 강원대학교컴퓨터과학전공성적분포 <CAPTION> <TH> <TR> <TD> Page 33 테이블 (6/6) Page 34 17

18 테이블의다양한활용 테이블을이용하여독특한제목 (heading) 을만들수있음테이블을이용하여간단히 3차원음영이추가된이미지의테두리를만들수있음테이블을이용해본문의너비를사용자가원하는대로지정할수있음본문의너비가긴경우에테이블을응용하여본문의단을나누어다단편집을하는것이좋음 Page 35 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 36 18

19 프레임 (1/5) 프레임사용예제 프레임 A 프레임 B 프레임 C Page 37 프레임 (2/5) 프레임이란? 웹브라우저의윈도우를여러개로나누어각윈도우에서다른웹페이지를보여주는역할을함일반 HTML 문서와의차이 일반 HTML 문서에서는 <body> 태그를포함함 프레임문서에서는 <frameset> 이대신사용됨 일반웹페이지구조 <html> <head><title>...</title></head> 프레임문서구조 <html> <head><title>...</title></head> <body> </body> </html>... 웹페이지본문... <frameset>... 프레임선언... </frameset> </html> Page 38 19

20 프레임 (3/5) <FRAMESET ROWS = "..." COLS = "...">...</FRAMESET> <BODY> 태그대신사용하기때문에 <BODY> 가없는특징을가짐 화면분할에대한정보를정의할뿐, 실제로화면에출력되는내용을담고있지는않음 속성 (ROWS, COLS) 을사용하여화면을분할하여프레임을만듦 % 비율을이용한분할예 ROWS="50%, 50%" : 화면을가로로 50:50 비율로분할 COLS="20%, 50%, 30%" : 화면을세로로 20:50:30 비율로분할 픽셀수를이용한분할예 ROWS="100,200,*" : 화면을가로로 100픽셀, 200픽셀, 그리고나머지영역으로분할 * 를이용한분할예 ROWS = "2*, *" : 화면을가로로 2/3 크기와 1/3 크기로분할 COLS = "*, *, 2*" : 화면을세로로 1:1:2 의비율로분할 Page 39 프레임 (4/5) <FRAME> 실제로지정된프레임들어갈정보를정의 <FRAMESET> 태그에의해화면이분할되어여러개의프레임이생성되면, 각프레임마다출력할실제적인 HTML 문서들을하나씩지정할때사용 속성 SRC = "... MARGINWIDTH = n MARGINHEIGHT = n SCROLLING = AUTO YES NO NORESIZE 내용지정된프레임에서보여줄 HTML 문서의 URL을지정해당프레임의좌우여백을픽셀단위로지정해당프레임의상하여백을픽셀단위로지정프레임의우측과하단에스크롤바를만들것인지아닌지를결정이속성을지정하면사용자가프레임의크기를임의로변경할수없음 Page 40 20

21 프레임 (5/5) Page 41 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 42 21

22 사운드 ( 오디오 ) (1/5) 샘플링 : 아날로그사운드를디지털데이터로바꾸는작업 사운드에디터 : Cool Edit, GoldWave Page 43 사운드 ( 오디오 ) (2/5) 사운드파일의종류 WAVE 마이크로소프트에서개발한윈도우즈의기본샘플링파일, 확장자는.wav 윈도우시작및종료시들리는효과음 MIDI (Musical Instrument Digital Interface) 연주에필요한정보 ( 음표와지속시간 ) 만담고있음, 확장자는.mid 샘플링사운드에비해크기가작음 RealAudio 다운로드받으면서사운드를들을수있음 ( 스트리밍 ), 확장자는.ra MP3 (MPEG Audio Layer 3) 오디오데이터의압축기술로서, 고음질의오디오압축기술 압축을통해용량이작아져, 인터넷을통해고품질음악을쉽게주고받을수있다. Page 44 22

23 사운드 ( 오디오 ) (3/5) 사운드파일다운로드받기 <a href= 사운드파일이름 > 파일이름등 </a> Page 45 사운드 ( 오디오 ) (4/5) 음악들려주기 ( 음악파일을 play 하기 ): <embed> 태그사용 SRC = 파일의 URL 미디파일 (MID) 이나샘플링사운드파일 (WAV, MP3) 의 URL을지정 HIDDEN = TRUE FALSE (default) 재생기의인터페이스를감출지를결정 AUTOSTART = TRUE FALSE (default) 사운드파일을자동으로재생할지를결정함 (TRUE = 자동재생 ) LOOP = n( 반복횟수 ) INFINITE 몇차례나사운드파일을반복재생할지를결정 WIDTH = n, HEIGHT = n 재생기인터페이스의너비와높이를지정 사용예 : <embed src= music/song3.mp3 autostart=true, loop=2> Page 46 23

24 사운드 ( 오디오 ) (5/5) Page 47 동영상 ( 비디오 ) (1/2) 동영상파일의종류 MPEG (Motion Picture Expert Group) [.mpg] 압축률이매우뛰어나고거의모든종류의컴퓨터에서지원 압축률을지정할수가있어서화질의상태를선택가능 QuickTime [.mov] 애플사의동영상압축기술 압축방식의다양함 AVI (Audio Video Interleaved) 마이크로소프트의동영상파일포맷 압축률이낮기때문에파일의크기가큼 ASF 마이크로소프트의스트리밍 (streaming) 미디어형식 비디오, 비디오, 슬라이드쇼, 동기화된이벤트등을지원 Page 48 24

25 동영상 ( 비디오 ) (2/2) 동영상파일다운로드 : <a href= 동영상파일이름 > 파일이름 </a> 동영상플레이하기 : <embed src= 동영상파일이름 > Page 49 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 50 25