HTML 문서 작성 PART 3 Chapter 2 Part 3

Slides:



Advertisements
Similar presentations
1 파일 및 폴더 다루기 A. 파일이란 : 응용프로그램을 이용해서 만든 사용자가 만든 정보의 집합 - 파일 형식 : 이름과 확장자로 이뤄짐 예 sample.txt 샘플.txt - 복원하려면 휴지통에서 파일선택 후 드래그해서 밖으로 이동 혹은 RESTORE B. 확장자의.
Advertisements

1/37 한글에는 전문적인 문서 편집을 위한 고급 기능이 있다. 문서를 편리하게 수 정할 수 있도록 도와주는 찾기 / 찾아 바꾸기, 다른 위치로 이동할 수 있는 책 갈피와 하이퍼링크에 대해 알아보자. 그리고 자주 사용하는 서식을 미리 정 해 놓고 쓰는 스타일 활용법과 스타일이.
406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
Chapter05 HTML 홈페이지 만들기
파워포인트 2007.
2002/3/20 HTML 2002/3/20
Chapter04 HTML 회원 정보 입력 양식 만들기
149개의 실습예제로 배우는 Flash 8.
파워포인트 장 | 슬라이드 작성 및 편집.
HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세
피티라인 파워포인트 템플릿.
예제모음.
Chapter04 HTML 회원 정보 입력 양식 만들기
HTML and CSS for Designer
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
14장 질의응답 한빛미디어(주).
WEB 프로그래밍 실습 환경 구축 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게.
7. 프레젠테이션 제품 소개나 홍보 등을 보다 효율적으로 하기 위하여 Presentation Software를 사용하고 있다.
학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.
PowerPoint 2007 소개 새 기능 살펴보기.
홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어
07장. <TABLE> 태그로 표 디자인하기
Raster 애니메이션은 GIF Animator로 만들면 쉽다
iframe 사용하기 Chapter 3 Part 2
16장 설문조사 한빛미디어(주).
프리젠테이션 활용 및 데이터활용 Chapter 1 파워포인트의 개요 김 정 석
로고 화면 만들기 자료번호 애니메이션 기본 화면 구성 및 설명 기본 화면 구성 설명
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
CHAP 12. 리소스와 보안.
JavaScript BOM(Browser Object Model)
HTML.
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
Chapter03 캔버스(1) HTML5 Programming.
게임웹사이트운영 [9] div & span.
7가지 방법 PowerPoint에서 공동 작업하는 다른 사용자와 함께 편집 작업 중인 사용자 보기
9장 웹 사이트 초기 화면 제작 한빛미디어(주).
PowerPoint 2007 소개 새 기능 살펴보기.
Microsoft SharePoint를 사용자 지정하는 방법 온라인 웹 사이트
Web & Internet [03] HTML5 다양한 태그
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
4 넷째마당.
Microsoft Word 2002 제4장 그리기와 그림 삽입하기.
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript.
ROBOT-c ROBOT-m 이 서식 파일을 프로젝트 중요 시점의 업데이트를 제공하는 시작 파일로 사용할 수 있습니다. 구역
- 18차시 - 엔딩 크레딧 영상 만들기 - Leading 기능 사용하기 -.
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
Chapter03 HTML 포토앨범 만들기
1월 일 월 화 수 목 금 토 신정 / / / /16.
문서의 제목 나눔명조R, 40pt 소속 / 작성자 이 문서는 나눔글꼴로 작성되었습니다. 설치하기.
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
기초C언어 제2주 실습 프로그래밍의 개념, 프로그램 작성 과정 컴퓨터시뮬레이션학과 2016년 봄학기 담당교수 : 이형원
Ms-Office PowerPoint 한순희 한순희.
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
파워포인트 10/10/15 유 태승.
“Poster Main Title” Author and co-author names
Homework #3 - 페이지 모듈화 및 로그인처리 -
피티라인 파워포인트 템플릿.
Chapter 28: Creating Web Pages by Using Web Page Editors
이 프레젠테이션은 PowerPoint의 새로운 기능에 대해 안내하며, 슬라이드 쇼에서 가장 잘 보입니다
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
오늘의 강의 제목을 입력하세요 소 속 : 인문대학 국어국문학과 이 름 : 홍길동 교수 1.
Chapter 11. 문서 인쇄 및 파일 형식.
타이머를 시작하려면 슬라이드 쇼 메뉴에서 쇼 보기를 클릭하십시오.
Presentation transcript:

HTML 문서 작성 PART 3 Chapter 2 Part 3 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 2 Part 3

이미지 삽입하기 - <img> 이미지 파일을 다음과 같이 삽입한다. – 원래 크기 <img src=“이미지파일이름”> <img src=“kulong.jpg”>

이미지 크기 조정 – width, height 속성 이미지 크기를 다음과 같이 지정한다. 단위: 픽셀 <img src=“이미지파일이름” width=크기 height=크기> <img src=“kulogo.jpg” width=300 height=200>

이미지 타이틀 – title 속성 이미지 위에 마우스가 올려지면 나타나는 타이틀 <img src=“이미지파일이름” title=“타이틀”> <img src=“kulogo.jpg” title=“컴퓨터공학과”>

참고 – imgaes 디렉토리를 만들자 HTML 문서를 작성할 때, 한 디렉토리(폴더)에 많은 파일을 작성하는 경우가 많다. 이러한 경우 이미지는 하위 디렉토리를 만들어 저장하는 것을 권장한다. <img src=“경로명/이미지파일이름”> <img src=“images/logo.png”>

이미지 예제 – 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>

이미지 정렬 – align 속성 이미지와 텍스트의 위치 지정 <img src=“이미지파일이름” align=left 또는 right> <img src=“kulogo.jpg” title=“컴퓨터공학과”>

이미지 예제 – practice/0316/image-align.html 이미지는 홈페이지 자료실에 <!doctype html> <html> <head> <style> p {overflow:auto}</style> </head> <body> <h1>[여행사진의 기술] 봄 사진 잘 찍는 법</h1> <p><img src="images/daum-20170309133434586aalb.jpg" align=left width=30% height=30%> 산수유를 비롯해 매화, 벚꽃 같은 대표적 봄꽃들은 꽃만 클로즈업해 촬영해도 예쁘지만 꽃과 더불어 다른 대상과 함께 담을 때 비로소 더 좋은 봄 사진이 탄생한다. 사찰은 전통적인 단청과 기와, 풍경 그리고 사찰을 찾은 사람들까지, 봄의 행복한 기운을 함께 표현할 대상이 많다. 그중 봉은사에서 가장 주목한 피사체는 인자한 표정의 대불상이었다. 노란 산수유와 함께 그 표정을 담는다면 뭔가 더 특별한 봄 사진이 나오지 않을까, 그런 아이디어로 접근했다. </p>

이미지 예제 – practice/0316/image-align.html (계속) <hr> <p><img src="images/daum-20170309133434586aalb.jpg" align=right width=30% height=30%> 산수유를 비롯해 매화, 벚꽃 같은 대표적 봄꽃들은 꽃만 클로즈업해 촬영해도 예쁘지만 꽃과 더불어 다른 대상과 함께 담을 때 비로소 더 좋은 봄 사진이 탄생한다. 사찰은 전통적인 단청과 기와, 풍경 그리고 사찰을 찾은 사람들까지, 봄의 행복한 기운을 함께 표현할 대상이 많다. 그중 봉은사에서 가장 주목한 피사체는 인자한 표정의 대불상이었다. 노란 산수유와 함께 그 표정을 담는다면 뭔가 더 특별한 봄 사진이 나오지 않을까, 그런 아이디어로 접근했다. </p> </body> </html>

이미지의 종류 JPEG PNG GIF 실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합 손실 압축 방식을 사용한다. PNG 클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합 무손실 압축 방식 GIF 로고나 클립아트 형태의 이미지에 적합 256 색상만을 지원 투명 배경과 애니메이션을 지원한다.

<img> 태그의 속성 속성 값 설명 src URL 그림 주소 width pixels 너비 height 높이 align top/bottom/middle/left/right 텍스트 위치 alt text 그림 설명 border 테두리 두께 hspace vspace 여백

테이블 만들기 - <table> … </table> 태그 내용 <table>…</table> 표 시작/끝 <tr> … </tr> 행 시작/끝 <th> … </th> 제목 셀 시작/끝 <td> … </td> 셀 시작/ 끝

테이블 예제 <table> <tr> <th>영화제목</th> <td>라이프 오브 파이</td> <td> 2013</td> <td>레미제라블</td> <td>2012</td> </table>

결과

테이블 경계선 - border 테이블에 경계선 추가 <table border=숫자> … </table>

테이블 예제-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>

결과 셀의 너비와 높이는 자동으로 텍스트에 맞추어 결정된다.

테이블 경계선이 맘에 안들어요 테이블의 경계선이 두겹인 이유는 아래 그림과 같이 <table>의 경계선과 <td>의 경계선이 겹쳐 스타일로 변경 가능

테이블 예제-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>

결과 width 50%는 창크기의 50%

<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

<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

셀병합 – 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

테이블 예제 – 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>

결과

HOMEWORK #2 다음의 각 과제에 맞는 HTML 문서를 작성하여 public_html/homework/hw2 디렉토리로 전송 모든 파일을 TLS에 탑재 MyHTML.html MyTimeTable.html MyAlbum.html

Homework #2 (1) 오늘(3월 16일)까지 실습 및 과제2까지의 목록을 오른쪽 그림과 같이 중첩 리스트를 사용하여 나타내고, 각 파일에 링크를 거는 문서를 작성하여 MyHTML.html로 저장.

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>

Homework #2 (3) 이력서 양식 만들기 MyVitae.html로 저장. 다음과 그림과 같이 이력서 양식을 만든다. 사진란에 자신의 사진을 적당한 크기로 넣는다. 각 칸을 채운다.

Homework #2 (4) 자신의 앨범 만들기 MyAlbum.html로 저장. 5장(또는 그 이상)의 사진을 thumbnail로 크기를 줄여 table로 만든다. 각 사진의 설명을 붙인다. 사진을 클릭하면 원래 사이즈의 사진을 볼 수 있도록 링크를 건다.