Download presentation
Presentation is loading. Please wait.
1
Chapter03 HTML 포토앨범 만들기
2
Contents Chapter03 1. 수평선 삽입하기 2. 그림 삽입하기 3. 링크 삽입하기 HTML 포토앨범 만들기
3
프로그램 3-1 Chapter03 [그림 3-1] Photo1의 실행결과 HTML 포토앨범 만들기
![프로그램 3-1 Chapter03 [그림 3-1] Photo1의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/3/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-1+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-1%5D+Photo1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-1 Chapter03 [그림 3-1] Photo1의 실행결과 HTML 포토앨범 만들기")
4
수평선 삽입하기 <HR> 태그 수평선 삽입 일반적으로 같은 페이지 안에서 내용의 분리를 위해서 사용
Chapter03 <HR> 태그 수평선 삽입 일반적으로 같은 페이지 안에서 내용의 분리를 위해서 사용 더욱 깔끔하고 가독성을 향상됨 형식 : <HR 속성=값 속성=값......> 속성 : COLOR, WIDTH, SIZE, NOSHADE, ALIGN 예제 : <BODY> <HR SIZE="30" WIDTH="50%" COLOR="red"><BR> <HR SIZE="20" WIDTH="30%" ALIGN="right"> </BODY> HTML 포토앨범 만들기
5
<HR> 태그의 속성 Chapter03 HTML 포토앨범 만들기
6
프로그램 3-2 Chapter03 [그림 3-2] HRTag1의 실행결과 HTML 포토앨범 만들기
![프로그램 3-2 Chapter03 [그림 3-2] HRTag1의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/6/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-2+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-2%5D+HRTag1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-2 Chapter03 [그림 3-2] HRTag1의 실행결과 HTML 포토앨범 만들기")
7
프로그램 3-3 Chapter03 [그림 3-3] HRTag2의 실행결과 HTML 포토앨범 만들기
![프로그램 3-3 Chapter03 [그림 3-3] HRTag2의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/7/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-3+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-3%5D+HRTag2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-3 Chapter03 [그림 3-3] HRTag2의 실행결과 HTML 포토앨범 만들기")
8
프로그램 3-4 Chapter03 [그림 3-4] Photo2의 실행결과 HTML 포토앨범 만들기
![프로그램 3-4 Chapter03 [그림 3-4] Photo2의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/8/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-4+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-4%5D+Photo2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-4 Chapter03 [그림 3-4] Photo2의 실행결과 HTML 포토앨범 만들기")
9
그림 삽입하기 <IMG> 태그 그림 삽입 반드시 SRC 속성과 함께 사용해야 함
Chapter03 <IMG> 태그 그림 삽입 반드시 SRC 속성과 함께 사용해야 함 형식 : <IMG SRC="주소" 속성=값......> 속성 : SRC, WIDTH, HEIGHT, ALT, BORDER, VSPACE, HSPACE, ALIGN, USEMAP 예제 : <BODY> <IMG SRC="Flowser1.JPG"><BR> <IMG SRC="Flowser2.JPG" WIDTH="100" HEIGHT="100"><BR> <IMG SRC="Flowser3.JPG" WIDTH="200" ALIGN="bottom"><BR> <IMG SRC="Flowser4.JPG" VSPACE="50" HSPACE="50"> </BODY> HTML 포토앨범 만들기
10
<IMG> 태그의 속성 Chapter03 HTML 포토앨범 만들기
11
프로그램 3-5 Chapter03 [그림 3-5] IMGTag1의 실행결과 HTML 포토앨범 만들기
![프로그램 3-5 Chapter03 [그림 3-5] IMGTag1의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/11/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-5+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-5%5D+IMGTag1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-5 Chapter03 [그림 3-5] IMGTag1의 실행결과 HTML 포토앨범 만들기")
12
그림 크기 조절하기 그림 크기 조절하기 WIDTH 속성과 HEIGHT 속성을 사용
Chapter03 그림 크기 조절하기 WIDTH 속성과 HEIGHT 속성을 사용 그림 크기의 값은 픽셀이나 원본 그림 크기의 퍼센트 (%)로 지정할 수 있음 만약 가로 크기나 세로 크기 둘 중에 하나의 크기만 지정한다면 지정 하지 않은 다른 크기는 원본 그림의 크기에 비례해서 자동으로 지정됨 HTML 포토앨범 만들기
13
프로그램 3-6 Chapter03 [그림 3-6] IMGTag2의 실행결과 HTML 포토앨범 만들기
![프로그램 3-6 Chapter03 [그림 3-6] IMGTag2의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/13/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-6+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-6%5D+IMGTag2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-6 Chapter03 [그림 3-6] IMGTag2의 실행결과 HTML 포토앨범 만들기")
14
그림 테두리 굵기 조절하기 그림 테두리 굵기 조절하기 BORDER 속성을 사용 BORDER 속성은 픽셀 값으로 지정
Chapter03 그림 테두리 굵기 조절하기 BORDER 속성을 사용 BORDER 속성은 픽셀 값으로 지정 경계선의 색상은 <BODY> 태그에서 TEXT 속성으로 지정한 글자 색상에 따라가게 됨 HTML 포토앨범 만들기
15
프로그램 3-7 Chapter03 [그림 3-7] IMGTag3의 실행결과 HTML 포토앨범 만들기
![프로그램 3-7 Chapter03 [그림 3-7] IMGTag3의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/15/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-7+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-7%5D+IMGTag3%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-7 Chapter03 [그림 3-7] IMGTag3의 실행결과 HTML 포토앨범 만들기")
16
프로그램 3-8 Chapter03 [그림 3-8] Photo3의 실행결과 HTML 포토앨범 만들기
![프로그램 3-8 Chapter03 [그림 3-8] Photo3의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/16/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-8+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-8%5D+Photo3%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-8 Chapter03 [그림 3-8] Photo3의 실행결과 HTML 포토앨범 만들기")
17
포토샵 효과 주기 포토샵 효과 주기 STYLE 라는 속성을 사용하여 효과를 줌
Chapter03 포토샵 효과 주기 STYLE 라는 속성을 사용하여 효과를 줌 형식 : <IMG SRC="주소" STYLE="filter : 필터 속성"> 예제 : <BODY> <IMG SRC="Flowser1.JPG" WIDTH="250" STYLE="filter:alpha(opacity=70, style=2, finishopacity=1)"><BR> <IMG SRC="Flowser2.JPG" WIDTH="250" STYLE="filter:blur(direction=160,strength=50)"> </BODY> HTML 포토앨범 만들기
18
프로그램 3-9 Chapter03 [그림 3-9] IMGTag4의 실행결과 HTML 포토앨범 만들기
![프로그램 3-9 Chapter03 [그림 3-9] IMGTag4의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/18/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-9+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-9%5D+IMGTag4%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-9 Chapter03 [그림 3-9] IMGTag4의 실행결과 HTML 포토앨범 만들기")
19
그림 옆 글자 정렬하기 그림 옆 글자 정렬하기 ALIGN 속성 사용
Chapter03 그림 옆 글자 정렬하기 ALIGN 속성 사용 그림 자체의 정렬을 말하는 것이 아니라 그림 옆의 글자를 정렬시키는 역할 ALIGN 속성의 값은 ‘top’, ‘middle’, ‘bottom’, ‘right’, ‘left’ 등을 쓸 수 있으며 기본적으로 ‘bottom’으로 지정되어 있음 그림의 옆에 여러 줄의 글자를 넣고자 할 때에는 ALIGN 값으로 ‘left’, ‘right’로 지정 HTML 포토앨범 만들기
20
프로그램 3-10 Chapter03 [그림 3-10] IMGTag5의 실행결과 HTML 포토앨범 만들기
![프로그램 3-10 Chapter03 [그림 3-10] IMGTag5의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/20/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-10+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-10%5D+IMGTag5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-10 Chapter03 [그림 3-10] IMGTag5의 실행결과 HTML 포토앨범 만들기")
21
프로그램 3-11 Chapter03 [그림 3-11] IMGTag6의 실행결과 HTML 포토앨범 만들기
![프로그램 3-11 Chapter03 [그림 3-11] IMGTag6의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/21/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-11+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-11%5D+IMGTag6%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-11 Chapter03 [그림 3-11] IMGTag6의 실행결과 HTML 포토앨범 만들기")
22
그림과 글자 여백 지정 그림과 글자 여백 지정 VSPACE 속성과 HSPACE 속성 사용
Chapter03 그림과 글자 여백 지정 VSPACE 속성과 HSPACE 속성 사용 VSPACE 속성은 그림 상하의 여백을 지정하며 HSPACE 속성은 그림 좌우의 여백을 지정 값은 픽셀 값을 사용 HTML 포토앨범 만들기
23
프로그램 3-12 Chapter03 [그림 3-12] IMGTag7의 실행결과 HTML 포토앨범 만들기
![프로그램 3-12 Chapter03 [그림 3-12] IMGTag7의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/23/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-12+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-12%5D+IMGTag7%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-12 Chapter03 [그림 3-12] IMGTag7의 실행결과 HTML 포토앨범 만들기")
24
프로그램 3-13 Chapter03 [그림 3-13] Photo4의 실행 HTML 포토앨범 만들기
![프로그램 3-13 Chapter03 [그림 3-13] Photo4의 실행 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/24/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-13+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-13%5D+Photo4%EC%9D%98+%EC%8B%A4%ED%96%89+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-13 Chapter03 [그림 3-13] Photo4의 실행 HTML 포토앨범 만들기")
25
링크 삽입하기 <A> 태그 링크 삽입
Chapter03 <A> 태그 링크 삽입 링크란 ‘하이퍼링크(HyperLink)’의 줄임말로 글자나 그림 또는 웹 페이지를 연결하는 것을 말함 HREF 속성을 반드시 사용해야 함 형식 : <A HREF="주소" 속성=값......> 내용 </A> 속성 : HREF, NAME, TARGET, TITLE 예제 : <BODY> <A HREF=" <A HREF=" TARGET="_blank">이한출판사</A> </BODY> HTML 포토앨범 만들기
26
<A> 태그의 속성 Chapter03 HTML 포토앨범 만들기
27
프로그램 3-14 [그림 3-14] ATag1의 실행결과 [그림 3-15] ATag1의 실행결과 Chapter03
HTML 포토앨범 만들기
![프로그램 3-14 [그림 3-14] ATag1의 실행결과 [그림 3-15] ATag1의 실행결과 Chapter03](http://slidesplayer.org/slide/16652740/96/images/27/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-14+%5B%EA%B7%B8%EB%A6%BC+3-14%5D+ATag1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+3-15%5D+ATag1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter03.jpg "HTML 포토앨범 만들기.")
28
이동할 창 지정 Chapter03 TARGET 속성 링크를 삽입하면 기본적으로 같은 창으로 이동하게 됨. 하지만 TARGET 속성을 지정함으로써 이동할 창을 지정할 수 있음 속성의 값 _blank : 링크된 내용을 새로운 창으로 보여줌 new : 링크된 내용을 새로운 창으로 보여줌 _self : 현재의 창에 링크된 내용을 보여줌 _top : 현재의 창이 프레임으로 구성되어 있을 때 프레임이 사라지고 하나의 화면에 링크된 내용을 보여줌 _parent : 링크 부분이 있는 프레임에 새로운 프레임이 만들어져 링크된 내용을 보여줌 HTML 포토앨범 만들기
29
프로그램 3-15 [그림 3-17] ATag2의 실행결과 [그림 3-17] ATag2의 실행결과 Chapter03
HTML 포토앨범 만들기
![프로그램 3-15 [그림 3-17] ATag2의 실행결과 [그림 3-17] ATag2의 실행결과 Chapter03](http://slidesplayer.org/slide/16652740/96/images/29/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-15+%5B%EA%B7%B8%EB%A6%BC+3-17%5D+ATag2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+3-17%5D+ATag2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter03.jpg "HTML 포토앨범 만들기.")
30
특정 위치로 이동하기 Chapter03 특정 위치로 이동하기 같은 페이지나 다른 페이지의 일정 부분으로 이동하고자 할 때에는 HREF 속성 값 앞에 ‘#’를 붙여주며, 이동할 부분에는 NAME 속성을 사용 이동할 부분에는 <A NAME="키워드">를 지정하고 링크 부분에는 <A HREF="#키워드">와 같은 형식으로 지정 만약 다른 페이지의 특정 부분으로 이동하고자 할 때에는 <A HREF="페이지경로#키워드">로 입력하여 다른 페이지의 키워드 부분으로 이동 형식 : 링크 부분 : <A HREF="#키워드"> 내용 </A> 이동 부분 : <A NAME="키워드"> 내용 </A> HTML 포토앨범 만들기
31
프로그램 3-16 Chapter03 [그림 3-18] ATag3의 실행결과 HTML 포토앨범 만들기
![프로그램 3-16 Chapter03 [그림 3-18] ATag3의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/31/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-16+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-18%5D+ATag3%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-16 Chapter03 [그림 3-18] ATag3의 실행결과 HTML 포토앨범 만들기")
32
프로그램 3-17 Chapter03 [그림 3-19] ATag4의 실행결과 HTML 포토앨범 만들기
![프로그램 3-17 Chapter03 [그림 3-19] ATag4의 실행결과 HTML 포토앨범 만들기](http://slidesplayer.org/slide/16652740/96/images/32/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-17+Chapter03+%5B%EA%B7%B8%EB%A6%BC+3-19%5D+ATag4%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%8F%AC%ED%86%A0%EC%95%A8%EB%B2%94+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 3-17 Chapter03 [그림 3-19] ATag4의 실행결과 HTML 포토앨범 만들기")
33
프로그램 3-18 [그림 3-20] Photo5의 실행결과 [그림 3-21] Photo5의 실행결과 Chapter03
HTML 포토앨범 만들기
![프로그램 3-18 [그림 3-20] Photo5의 실행결과 [그림 3-21] Photo5의 실행결과 Chapter03](http://slidesplayer.org/slide/16652740/96/images/33/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-18+%5B%EA%B7%B8%EB%A6%BC+3-20%5D+Photo5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+3-21%5D+Photo5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter03.jpg "HTML 포토앨범 만들기.")
34
프로그램 3-18 [그림 3-22] Photo5의 실행결과 [그림 3-23] Photo5의 실행결과 Chapter03
HTML 포토앨범 만들기
![프로그램 3-18 [그림 3-22] Photo5의 실행결과 [그림 3-23] Photo5의 실행결과 Chapter03](http://slidesplayer.org/slide/16652740/96/images/34/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+3-18+%5B%EA%B7%B8%EB%A6%BC+3-22%5D+Photo5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+3-23%5D+Photo5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter03.jpg "HTML 포토앨범 만들기.")
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
