365 문서에 이미지를 표시하고 다양하게 편집할 수 있다. 하이퍼링크를 이용하여 문서를 연결할 수 있다. 문서 전체에 대하여 설정할 수 있다. 학습목표 5 부. HTML 의 기본 3 장. 문서작성을 위한 구성 - 13 주, 14 주 차시 : 1/6 ∼ 6/6 배당시간 :

Presentation on theme: "365 문서에 이미지를 표시하고 다양하게 편집할 수 있다. 하이퍼링크를 이용하여 문서를 연결할 수 있다. 문서 전체에 대하여 설정할 수 있다. 학습목표 5 부. HTML 의 기본 3 장. 문서작성을 위한 구성 - 13 주, 14 주 차시 : 1/6 ∼ 6/6 배당시간 :"— Presentation transcript:

1 365 문서에 이미지를 표시하고 다양하게 편집할 수 있다. 하이퍼링크를 이용하여 문서를 연결할 수 있다. 문서 전체에 대하여 설정할 수 있다. 학습목표 5 부. HTML 의 기본 3 장. 문서작성을 위한 구성 - 13 주, 14 주 차시 : 1/6 ∼ 6/6 배당시간 : 18 시간 - 강의방법 : 실습, 강의식, 대화식, 모듐학습

2 366 웹 사이트에서 주로 사용되는 이미지는.jpg 와.gif 파일 형식이다. 1.1 이미지의 삽입 (1) 이미지의 삽입 태그로 이미지 삽입을 선언하고, 반드시 src 속성으로 이미지의 위치 및 파일명을 기입해야 함 1 절. 문서에서의 이미지 표현

3 367  자신에게 할당된 홈페이지에 여유가 없거나 이미지를 다룰 기술이나 능력이 없을 경우에는 웹 이미지를 이용하는 것이 편리하지만, 원래 이미지를 수록하고 있는 웹 페이지의 변화가 자신의 웹 페이지에 영향을 준다는 것에 주의해야 한다.

4 368 (2) 이미지의 경로 자신의 컴퓨터에 저장되어 있는 이미지의 경로에 대한 표시를 절대적 또는 상대적 위치로 표시할 수 있다.

5 369  “C:/home/” 폴더에는 ”image” 폴더와 ”index.htm” 문서파일이 있다.  “image” 폴더에는 ”flower.jpg” 이미지 파일이 포함되어 있다.  “flower.jpg” 이미지 파일은 “index.htm” 문서에 표시된다.

6 370 절대경로는 파일의 위치에 대한 드라이브와 폴더명을 모두 기입하지만, 상대경로는 “C:\home\” 부분을 생략할 수 있다. ▲ “ 홈페이지 ” 폴더에있는 ”happy.gif” 이미지파일을 “index.htm” 에서 참조한다고 가정할 때의 경로 표현 이때 “index.htm” 에서 ”flower.jpg” 파일을 표시하는 형식은 다음과 같다.

7 371  경로나 파일명이 잘못되었을 경우 그림 위치에 오류표시가 표시되며, 이 경우에 참조한 URL 이나 경로명 또는 파일명을 확인한다.

8 372 이미지 삽입 상대경로에 의한 그림삽입 형식이다.

9 373 1.2 이미지의 변경 (1) 이미지의 크기 이미지의 너비는 width, 높이는 height 속성을 사용하며, 인수는 픽셀이나 백분율 단위를 사용한다. 이미지 삽입

10 374 ▼이미지 크기 속성을 적용한 모습

11 375 (2) 이미지 정렬과 여백  이미지를 웹 브라우저에 표현할 때 속성을 이용하여 정렬될 위치, 텍스트와의 관계를 설정한다.

12 376 ①이미지 정렬 이미지의 정렬 홍길동은 전라남도 장성군을 대표하는 캐릭터로써, 해학과 풍자를 사랑하는 한국인의 전 통을 바탕으로 다양한 형태와 모양으로 개발되었다. 충청남도 계룡시에서는 용을 대표 상징으로 인식되어 왔으며, 위엄과 권위적 이미지에서 탈피한 친근하고 다정하며 진취적인 모습을 표현하고 있다. 전라북도 진안군의 마이용은 자연과 문화, 미래지향적인 비젼을 소개로한 캐릭터로써 자 신있게 엄지손가락을 들어 올린 모습은 살기 좋은 진안의 이미지를 형상화하였다. 울산광역시의 캐릭터인 해울이는 거대한 태양 ( 해 ) 과 광역시중 가장 큰도시인 울산의 넓 고 광활한 이미지를 극대화한 이름으로 고래를 형상화하였다. 강원도 인제군의 마스코트는 수달로써 청정지역인 인제의 지역적 특징을 상징화하였으 며, 천연기념물인 수달을 형상화하였다.

13 377

14 378 ②이미지 여백 이미지의 여백 정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여 친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를 형상화하여 역동감 부여하였다. 한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래 라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게 헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는 네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.

15 379  첫 번째 이미지는 좌우 여백, 두 번째 이미지는 상하 여백을 적용시킴

16 380 (3) 이미지 테두리  border 속성으로 이미지에 테두리를 표시 이미지의 여백 정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여 친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를 형상화하여 역동감 부여하였다. 한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래 라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게 헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는 네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.

17 381

18 382 (4) 이미지 설명  alt 속성으로 이미지에 마우스 포인트를 위치시켰을 때 설명이 표시된다. 이미지의 여백 정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여 <img src=c:/ 실습예제 /image/infortown.gif width=70 height=70 align=left hspace=10 border=5 alt=" 대전시의 한꿈이 캐릭터 "> 친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를 형상화하여 역동감 부여하였다. 한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래 라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게 헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는 네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.

19 383

20 384  태그로 하이퍼링크를 설정해 마우스로 해당 텍스트나 이미지를 클릭하면 HTML 문서나 파일을 연결할 수 있다. 텍스트또는 이미지 2.1 텍스트를 이용한 연결 (1) 웹 문서 파일 연결 2 절. 문서의 연결 문서 연결 텍스트 파일과 연결

21 385

22 386 (2) 일반 파일 연결  웹 브라우저에서 바로 표현이 가능한 텍스트 / 그림 파일은 표시되지만, 그 외의 파일은 다운로드 대화상자가 표시됨 파일 연결 텍스트 파일과 연결 한글 문서 파일과 연결 이미지 파일과 연결

23 387

24 388 (3) 메일 프로그램 연결  메일을 보내기 위해 하이퍼링크의 경로를 “mailto: 메일주소 ” 형식으로 기입한다. 메일 보내기 링크 메일보내기

25 389

26 390 2.2 이미지를 이용한 연결 (1) 기본적인 이미지 연결 이미지 연결 정보화마을 캐릭터인 초롱이 대전광역시의 캐릭터인 한꿈이 <img src=c:/ 실습예제 /image/hankkumi.gif width=60 height=80 border=2 alt= 대전시의 한꿈이 캐릭터 >

27 391

28 392 (2) 이미지 맵을 이용한 연결

29 393.

30 394  다각형의 꼭지점 좌표수에 따라 도형의 형태가 다르게 표현된다.

31 395 2.3 연결된 페이지 표시  연결된 웹 문서를 표시할 대상을 ‘target’ 속성에 인수로 설정할 수 있다. 대상 창과 연결 초혼 소금별 외눈박이 물고기의 사랑

32 396

33 397

34 398 3.1 문서의 배경  태그에 속성을 이용하여 문서 전체의 배경을 색상이나 이미지로 채울 수 있으며 문서 전체에서 사용하는 글자색 및 하이퍼링크와 관련된 텍스트의 색상을 설정할 수 있다. 3 절. 문서의 효과

35 399 (1) 문서의 배경색 문서 배경색 홍길동은 전라남도 장성군 을 대표 하는 캐릭터이다. 충청남도 계룡시 에서는 용을 대표 상징으 로 인식하고 있다. 전라북도 진안군 의 마이용은 살기 좋은 진안의 이미지를 형상화하였다. 울산광역시 의 캐릭터인 해울이는 고래를 형상 화하였다. 강원도 인제군 의 마스코트는 천연기념물 인 수달을 형상화하였다.

36 400  문서 배경색을 적용시킨 모습

37 401 (2) 문서 배경 이미지 문서 배경 이미지 홍길동은 전라남도 장성군 을 대표 하는 캐릭터이다. 충청남도 계룡시 에서는 용을 대표 상징으 로 인식하고 있다. 전라북도 진안군 의 마이용은 살기 좋은 진안의 이미지를 형상화하였다. 울산광역시 의 캐릭터인 해울이는 고래를 형상 화하였다. 강원도 인제군 의 마스코트는 천연기념물 인 수달을 형상화하였다.

38 402  배경색과 배경 이미지를 함께 사용한 경우에는 배경 이미지로 인하여 배경색이 표시되지 않는다.

39 403 3.2 문서의 텍스트

40 404 문서의 텍스트 <body background=“image/sky.jpg”text=“navy”link=“olive”alink=“red”vlink= “gray”> 홍길동은 전라남도 장성군 을 대표 하는 캐릭터이다. 충청남도 계룡시 에서는 용을 대표 상징으 로 인식하고 있다. 전라북도 진안군 의 마이용은 살기 좋은 진안의 이미지를 형상화하였다. 울산광역시 의 캐릭터인 해울이는 고래를 형상 화하였다. 강원도 인제군 의 마스코트는 천연기념물 인 수달을 형상화하였다.

41 405

42 406 1. 이미지 삽입 방법에 대해 설명하시오 2. 이미지 경로 방법의 절대 경로와 상대 경로의 차이점에 대해 말하시오. 3. 이미지 정렬 태그에 대해 말하시오. 4. 이미지의 테두리 삽입에 관한 태그에 대해 말하시오. 5. 문서 연결 방법에 대해 말하시오. 6. 이미지 맵을 이용한 연결에 대해 말하시오. 7. 문서의 텍스트 속성에 대해 말하시오. 형성평가