Download presentation
Presentation is loading. Please wait.
1
HTML 문서 작성 PART 3 Chapter 2 Part 3
이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 2 Part 3
2
이미지 삽입하기 - <img> 이미지 파일을 다음과 같이 삽입한다. – 원래 크기
<img src=“이미지파일이름”> <img src=“kulong.jpg”>
3
이미지 크기 조정 – width, height 속성
이미지 크기를 다음과 같이 지정한다. 단위: 픽셀 <img src=“이미지파일이름” width=크기 height=크기> <img src=“kulogo.jpg” width=300 height=200>
4
이미지 타이틀 – title 속성 이미지 위에 마우스가 올려지면 나타나는 타이틀
<img src=“이미지파일이름” title=“타이틀”> <img src=“kulogo.jpg” title=“컴퓨터공학과”>
5
참고 – imgaes 디렉토리를 만들자 HTML 문서를 작성할 때, 한 디렉토리(폴더)에 많은 파일을 작성하는 경우가 많다.
이러한 경우 이미지는 하위 디렉토리를 만들어 저장하는 것을 권장한다. <img src=“경로명/이미지파일이름”> <img src=“images/logo.png”>
6
이미지 예제 – practice/0316/image.html
자료실에서 logo.png 이미지를 다운 받아서 실습 <!doctype html> <html> <body> <img src="images/logo.png"> <p> <img src="images/logo.png" width="216" height="52"> <img src="images/logo.png" width="532" height="104"> <img src="images/logo.png" title="컴퓨터공학과"> </body> </html>
7
이미지 정렬 – align 속성 이미지와 텍스트의 위치 지정 <img src=“이미지파일이름”
align=left 또는 right> <img src=“kulogo.jpg” title=“컴퓨터공학과”>
8
이미지 예제 – practice/0316/image-align.html
이미지는 홈페이지 자료실에 <!doctype html> <html> <head> <style> p {overflow:auto}</style> </head> <body> <h1>[여행사진의 기술] 봄 사진 잘 찍는 법</h1> <p><img src="images/daum aalb.jpg" align=left width=30% height=30%> 산수유를 비롯해 매화, 벚꽃 같은 대표적 봄꽃들은 꽃만 클로즈업해 촬영해도 예쁘지만 꽃과 더불어 다른 대상과 함께 담을 때 비로소 더 좋은 봄 사진이 탄생한다. 사찰은 전통적인 단청과 기와, 풍경 그리고 사찰을 찾은 사람들까지, 봄의 행복한 기운을 함께 표현할 대상이 많다. 그중 봉은사에서 가장 주목한 피사체는 인자한 표정의 대불상이었다. 노란 산수유와 함께 그 표정을 담는다면 뭔가 더 특별한 봄 사진이 나오지 않을까, 그런 아이디어로 접근했다. </p>
9
이미지 예제 – practice/0316/image-align.html (계속)
<hr> <p><img src="images/daum aalb.jpg" align=right width=30% height=30%> 산수유를 비롯해 매화, 벚꽃 같은 대표적 봄꽃들은 꽃만 클로즈업해 촬영해도 예쁘지만 꽃과 더불어 다른 대상과 함께 담을 때 비로소 더 좋은 봄 사진이 탄생한다. 사찰은 전통적인 단청과 기와, 풍경 그리고 사찰을 찾은 사람들까지, 봄의 행복한 기운을 함께 표현할 대상이 많다. 그중 봉은사에서 가장 주목한 피사체는 인자한 표정의 대불상이었다. 노란 산수유와 함께 그 표정을 담는다면 뭔가 더 특별한 봄 사진이 나오지 않을까, 그런 아이디어로 접근했다. </p> </body> </html>
11
이미지의 종류 JPEG PNG GIF 실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합
손실 압축 방식을 사용한다. PNG 클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합 무손실 압축 방식 GIF 로고나 클립아트 형태의 이미지에 적합 256 색상만을 지원 투명 배경과 애니메이션을 지원한다.
12
<img> 태그의 속성 속성 값 설명 src URL 그림 주소 width pixels 너비 height 높이
align top/bottom/middle/left/right 텍스트 위치 alt text 그림 설명 border 테두리 두께 hspace vspace 여백
13
테이블 만들기 - <table> … </table>
태그 내용 <table>…</table> 표 시작/끝 <tr> … </tr> 행 시작/끝 <th> … </th> 제목 셀 시작/끝 <td> … </td> 셀 시작/ 끝
14
테이블 예제 <table> <tr> <th>영화제목</th>
<td>라이프 오브 파이</td> <td> 2013</td> <td>레미제라블</td> <td>2012</td> </table>
15
결과
16
테이블 경계선 - border 테이블에 경계선 추가 <table border=숫자>
… </table>
17
테이블 예제-practice/0316/table-1.html
<table border=1> <tr> <th>영화제목</th> <th>연도</th> </tr> <td>라이프 오브 파이</td> <td> 2013</td> <td>레미제라블</td> <td>2012</td> </table>
18
결과 셀의 너비와 높이는 자동으로 텍스트에 맞추어 결정된다.
19
테이블 경계선이 맘에 안들어요 테이블의 경계선이 두겹인 이유는 아래 그림과 같이 <table>의 경계선과 <td>의 경계선이 겹쳐 스타일로 변경 가능
20
테이블 예제-practice/0316/table-2.html
<!doctype html> <html> <head> <style> table,td,th {border: 1px solid; border-collapse:collapse; width:50%; } </style> </head> <body> <중략> </body> </html>
21
결과 width 50%는 창크기의 50%
22
<table> 태그 속성-CSS로 설정
Attribute Description align Not supported in HTML5. Specifies the alignment of a table according to surrounding text bgcolor Not supported in HTML5. Specifies the background color for a table border Not supported in HTML5. Specifies whether or not the table is being used for layout purposes cellpadding Not supported in HTML5. Specifies the space between the cell wall and the cell content cellspacing Not supported in HTML5. Specifies the space between cells width Not supported in HTML5. Specifies the width of a table
23
<td>, <th> 속성-CSS로 설정
Attribute Description align Not supported in HTML5. Specifies the alignment of a table according to surrounding text bgcolor Not supported in HTML5. Specifies the background color for a table width Not supported in HTML5. Specifies the width of a table colspan number Specifies the number of columns a cell should span rowspan Sets the number of rows a cell should span nowrap Not supported in HTML5. Specifies that the content inside a cell should not wrap
24
셀병합 – rowspan, colspan <table> <tr>
<td rowspan=2></td> <td></td> <td></td> <td></td> </tr> <td></td> <td></td> <td></td> </tr> <td></td> <td></td> <td colspan=2></td> </tr> </table> rowspan=2 colspan=2
25
테이블 예제 – practice/0316/table-3.html
<!doctype html> <body> <table border=1 width=400 height=100> <tr> <td rowspan=2></td> <td></td> <td></td> <td></td> </tr> <td></td> <td></td> <td></td> </tr> <td></td> <td></td> <td colspan=2></td> </tr> </table> </body>
26
결과
27
HOMEWORK #2 다음의 각 과제에 맞는 HTML 문서를 작성하여
public_html/homework/hw2 디렉토리로 전송 모든 파일을 TLS에 탑재 MyHTML.html MyTimeTable.html MyAlbum.html
28
Homework #2 (1) 오늘(3월 16일)까지 실습 및 과제2까지의 목록을 오른쪽 그림과 같이 중첩 리스트를 사용하여 나타내고, 각 파일에 링크를 거는 문서를 작성하여 MyHTML.html로 저장.
29
Homework #2 (2) 오른쪽 그림과 같이 자신의 시간표를 작성하여 MyTimeTable.html로 저장.
다음의 스타일 사용(head에 삽입) <head> <title>Time Table</title> <style> td {width:120px; text-align:center} table,th,td {border:1px solid black;border-collapse:collapse;} </style> </head>
30
Homework #2 (3) 이력서 양식 만들기 MyVitae.html로 저장. 다음과 그림과 같이 이력서 양식을 만든다.
사진란에 자신의 사진을 적당한 크기로 넣는다. 각 칸을 채운다.
31
Homework #2 (4) 자신의 앨범 만들기 MyAlbum.html로 저장.
5장(또는 그 이상)의 사진을 thumbnail로 크기를 줄여 table로 만든다. 각 사진의 설명을 붙인다. 사진을 클릭하면 원래 사이즈의 사진을 볼 수 있도록 링크를 건다.
Similar presentations
