충남대학 농업과학대학 학과교육

35
충충충충 충충충충충충 충충충충 충충충충 충충충충충충 충충충충 충충충충충충 충충충충충충

Upload: fuller-stanton

Post on 31-Dec-2015

27 views

Category:

Documents


0 download

DESCRIPTION

충남대학 농업과학대학 학과교육. 주안정보산업. 순서. 1 교시 자주 사용되는 HTML 태그 ………..……….………..40’ 홈페이지에서 수정할 파일 확인 ………………….….5’ 2 교시 SFTP 를 이용한 파일 다운로드 ………………..……..5’ MS Front Page 이용한 홈페이지 수정 ………...…..35’ SFTP 를 이용한 파일 업로드 …………………………5’ 3 교시 실습 …………………………………………….……..45’. 자주 사용되는 HTML 태그. HTML 문서의 특징 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 충남대학 농업과학대학 학과교육

충남대학 농업과학대학 학과교육충남대학 농업과학대학 학과교육

주안정보산업주안정보산업

Page 2: 충남대학 농업과학대학 학과교육

순서순서11 교시교시

자주 사용되는 자주 사용되는 HTML HTML 태그………태그……… ..……….………..40’..……….………..40’

홈페이지에서 수정할 파일 확인…………………홈페이지에서 수정할 파일 확인………………… .….5’.….5’

22 교시교시SFTPSFTP 를 이용한 파일 다운로드………………를 이용한 파일 다운로드……………… ..……..5’..……..5’

MS Front Page MS Front Page 이용한 홈페이지 수정………이용한 홈페이지 수정……… ...…..35’...…..35’

SFTPSFTP 를 이용한 파일 업로드…………………………를 이용한 파일 업로드………………………… 5’5’

33 교시교시실습……………………………………………실습…………………………………………… .……..45’.……..45’

Page 3: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그HTML HTML 문서의 특징문서의 특징

HTMLHTML 이란 이란 Hyper Text Markup LanguageHyper Text Markup Language 의 약자의 약자인터넷에서 정보를 보여주기 위한 하이퍼 텍스트를 만드는 인터넷에서 정보를 보여주기 위한 하이퍼 텍스트를 만드는 표준적인 언어이며 홈페이지를 만들때 쓰이는 언어표준적인 언어이며 홈페이지를 만들때 쓰이는 언어htmlhtml 문서는 각각의 명령어를 말하는 태그로 구성문서는 각각의 명령어를 말하는 태그로 구성태그는 대소문자 구분이 없음태그는 대소문자 구분이 없음단단 , , 파일 이름은 소문자파일 이름은 소문자HTML HTML 문자열 사이에 있는 하나 이상의 공백은 무시문자열 사이에 있는 하나 이상의 공백은 무시태그가 중복 되지 않도록 주의태그가 중복 되지 않도록 주의HTML HTML 태그를 잘못 사용해도 브라우저에서는 에러가 발생하지 태그를 잘못 사용해도 브라우저에서는 에러가 발생하지 않음않음시작 태그와 종료 태그가 존재시작 태그와 종료 태그가 존재 (<html>, </html>)(<html>, </html>)반드시 종료 태그가 존재하는 것은 아님반드시 종료 태그가 존재하는 것은 아님 (<br>, <img>, <hr>)(<br>, <img>, <hr>)

Page 4: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그HTML HTML 문서의 구성문서의 구성 <html><html>

<head><head><title><title>제목표시줄에 표시될 문서의 제목제목표시줄에 표시될 문서의 제목</title></title>

</head></head><body><body>

본문의 내용본문의 내용</body></body>

</html> </html> <HTML> <HTML> 태그 태그 :: HTML HTML 문서 시작 문서 시작 <HEAD> <HEAD> 태그 태그 :: 정의 태그입니다정의 태그입니다 ..<<TITLE> TITLE> 태그 태그 :: 문서 제목 정의문서 제목 정의 (( 브라우저 타이틀바에 표시됨브라우저 타이틀바에 표시됨 ). ). <</TITLE> /TITLE> 태그 태그 :: 문서의 제목 끝문서의 제목 끝 . . </HEAD> </HEAD> 태그 태그 :: 정의 태그 끝정의 태그 끝 . . <body> <body> 태그 태그 :: HTML HTML 문서의 본문 부분문서의 본문 부분</body> </body> 태그 태그 :: 본문 내용 태그 끝본문 내용 태그 끝 . . </HTML> </HTML> 태그 태그 :: HTML HTML 문서 마무리 문서 마무리

Page 5: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그htmlhtml

headhead

bodybody

Page 6: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<font><font>

ffont tagont tag 는 글자를 제어하는 는 글자를 제어하는 tagtag속성으로는 속성으로는 size, color, face size, color, face 등등sizesize 는 글자크기를 지정하는 속성는 글자크기를 지정하는 속성(1~7(1~7 까지의 값까지의 값 ))color color 속성은 글자의 색상 제어속성은 글자의 색상 제어face face 속성은 글씨체 제어속성은 글씨체 제어

<br><br>보통의 문서를 작성할 때 보통의 문서를 작성할 때 enterenter 기능을 하는 태그기능을 하는 태그br br 태그를 써주지 않으면 모든 문장이 브라우저의 태그를 써주지 않으면 모든 문장이 브라우저의 넓이 까지 한줄로 나열넓이 까지 한줄로 나열br br 태그는 종료 태그가 없음태그는 종료 태그가 없음

Page 7: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<p><p>

ParagraphParagraph 라는 뜻으로 문단을 구분할 때 쓰는 태그라는 뜻으로 문단을 구분할 때 쓰는 태그앞의 문장과 한줄을 띈 후에 다음 문단을 시작하므로 앞의 문장과 한줄을 띈 후에 다음 문단을 시작하므로 한줄을 띄는 효과한줄을 띄는 효과속성으로는 속성으로는 alignalign 이 존재이 존재AlignAlign 의 속성값으로는 의 속성값으로는 left, center, rightleft, center, right 가 있음가 있음

<pre><pre>HTMLHTML 문서를 작성할 때 칸 띄우기는 한번밖에 문서를 작성할 때 칸 띄우기는 한번밖에 적용되지 않음적용되지 않음space barspace bar 가 한번밖에 안된다는 뜻가 한번밖에 안된다는 뜻작성할때 여러칸을 띄웠다고 해도 브라우저 상에서는 작성할때 여러칸을 띄웠다고 해도 브라우저 상에서는 한칸만 표시한칸만 표시이때 이때 pre tagpre tag 를 쓰면 유용를 쓰면 유용prepre 란 란 preformattedpreformatted 의 약자로 공백이나 줄바꿈을 의 약자로 공백이나 줄바꿈을 에디터에서 보는 그대로 브라우저 상에서 표시 가능에디터에서 보는 그대로 브라우저 상에서 표시 가능

Page 8: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<i> <em> <var> <cite><i> <em> <var> <cite>

글자를 이탤릭체로 표현글자를 이탤릭체로 표현<sub><sub>

글자를 아래 첨자로 표현글자를 아래 첨자로 표현<sup><sup>

글자를 위 첨자로 표현글자를 위 첨자로 표현<strong> <b><strong> <b>

두가지 태그가 모두 글자를 두껍게 표현두가지 태그가 모두 글자를 두껍게 표현강조할 단어나 문장에 많이 사용강조할 단어나 문장에 많이 사용

<u><u>밑줄 그은 글자체로 표현밑줄 그은 글자체로 표현

Page 9: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<!--   --><!--   -->

본문의 주석을 달 때 사용하는 태그본문의 주석을 달 때 사용하는 태그작업을 하다 문서가 길어지면 자신이 만든 소스라고 작업을 하다 문서가 길어지면 자신이 만든 소스라고 해도 쉽게 알아보기 힘듦해도 쉽게 알아보기 힘듦따라서 주석을 닮으로 해서 쉽고 빠르게 어떤 따라서 주석을 닮으로 해서 쉽고 빠르게 어떤 작업이었는지 파악 가능작업이었는지 파악 가능주석은 브라우저 상에 표시되지 않음주석은 브라우저 상에 표시되지 않음예예<!-- <!-- 메뉴시작 메뉴시작 -->-->html html 소스소스<!-- <!-- 메뉴 끝 메뉴 끝 -->-->

Page 10: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<img><img>

속성중의 하나인 속성중의 하나인 src src 를 사용하여 문서에 를 사용하여 문서에 그림을 삽입그림을 삽입기본 형태는 기본 형태는 <img src= "<img src= " 경로나 파일명경로나 파일명 ">">종료 태그는 없음종료 태그는 없음속성속성

Src : Src : 가장 기본이 되는 속성으로 이미지의 경로와 가장 기본이 되는 속성으로 이미지의 경로와 파일명을 지정파일명을 지정Border : Border : 테이블의 테두리의 두께를 지정테이블의 테두리의 두께를 지정width / height : width / height : 이미지의 폭과 높이 지정이미지의 폭과 높이 지정 , , 픽셀이나 퍼센트픽셀이나 퍼센트 (%)(%) 로 설정로 설정Hspace : Hspace : 이미지의 좌우 여백 설정이미지의 좌우 여백 설정Vspace : Vspace : 이미지의 위이미지의 위 , , 아래 여백을 설정아래 여백을 설정

Page 11: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그Alt : Alt : 이미지의 설명을 지정할 수 있는 속성이미지의 설명을 지정할 수 있는 속성Align : Align : 이미지를 표시할 경우 이미지와 글자와의 위치 이미지를 표시할 경우 이미지와 글자와의 위치 관계 관계

toptop 이미지의 상단과 글자의 윗 부분을 정렬이미지의 상단과 글자의 윗 부분을 정렬middlemiddle 이미지의 중심과 글자의 밑 부분을 정렬이미지의 중심과 글자의 밑 부분을 정렬bottombottom 이미지의 하단과 글자의 아래 부분을 정렬이미지의 하단과 글자의 아래 부분을 정렬leftleft 이미지의 왼쪽에 문자를 정렬이미지의 왼쪽에 문자를 정렬rightright 이미지의 오른쪽에 문자를 정렬이미지의 오른쪽에 문자를 정렬

Page 12: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<table><table>

표를 나타내는 태그표를 나타내는 태그단독으로 사용되지 않고 단독으로 사용되지 않고 <tr>, <td><tr>, <td> 태그와 태그와 함께 사용함께 사용<tr><tr> 은 행을 나타내는 태그은 행을 나타내는 태그<td><td> 는 열을 나타내는 태그는 열을 나타내는 태그하나의 하나의 <table><table> 안에 여러 개의 안에 여러 개의 <tr>, <td><tr>, <td>태그가 존재할 수 있으나 태그가 존재할 수 있으나 <td><td> 는 항상 는 항상 <tr><tr>태그 안에 존재해야 함태그 안에 존재해야 함

Page 13: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<table><table> <tr><tr> <td><td> </td></td> </tr></tr></table></table>

위와 같이 작성하면 한칸짜리 표가 만들어지는데 이때 위와 같이 작성하면 한칸짜리 표가 만들어지는데 이때 trtr 태그 사이에 태그 사이에 tdtd 태그를 몇 개 더 써주면 가로로 칸이 태그를 몇 개 더 써주면 가로로 칸이 더 생김더 생김TrTr 태그를 더 써주면 세로로 칸이 더 생김태그를 더 써주면 세로로 칸이 더 생김쉽게 말해 표와 행은 화면에 보이지 않는 영역을 쉽게 말해 표와 행은 화면에 보이지 않는 영역을 설정하는 것이고 셀이 모여 이뤄진 열이 화면에 보이는 설정하는 것이고 셀이 모여 이뤄진 열이 화면에 보이는 것임것임

Page 14: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<table><table>

</</table>table>

<tr><tr>

</tr></tr>

<td><td></</

td>td>

<td><td></</

td>td>

<td><td></</

td>td>

<td><td></</

td>td>

<tr><tr>

</tr></tr>

<td><td></</

td>td>

<td><td></</

td>td>

<td><td></</

td>td>

<td><td></</

td>td>

Page 15: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<table> <table> 속성속성

Align : Align : 거의 모든 태그에 쓸수있는 속성거의 모든 태그에 쓸수있는 속성table table 태그에 삽입하면 문서내에서 테이블의 태그에 삽입하면 문서내에서 테이블의 위치를 결정하며 위치를 결정하며 tr tr 태그나 태그나 td td 태그에 쓰이면 태그에 쓰이면 셀안의 문자들의 위치를 결정셀안의 문자들의 위치를 결정속성값 속성값 : left(: left(왼쪽정렬왼쪽정렬 ), center(), center( 가운데정렬가운데정렬 ), right), right((오른쪽정렬오른쪽정렬 ))

Border : Border : 테이블의 테두리 두께 지정테이블의 테두리 두께 지정 , , 기본기본값 값 : 1: 1Bordercolor : Bordercolor : 테두리의 색상을 적용테두리의 색상을 적용Bordercolorlight : table Bordercolorlight : table 테두리의 밝은 부분의 테두리의 밝은 부분의 색상 지정색상 지정Bordercolordark : table Bordercolordark : table 어두운 부분의 색상을 어두운 부분의 색상을 지정지정

Page 16: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그Bgcolor : Bgcolor : 테이블의 배경색 지정테이블의 배경색 지정Background : Background : 테이블에 배경그림 지정테이블에 배경그림 지정Width : Width : 테이블의 폭 설정테이블의 폭 설정Height : Height : 테이블의 높이 설정테이블의 높이 설정Cellpadding : table Cellpadding : table 태그에만 쓰이는 속성태그에만 쓰이는 속성 , , 셀과 셀안의 문자와의 여백 설정셀과 셀안의 문자와의 여백 설정Cellspacing : table Cellspacing : table 태그에만 쓰이는 속성으로 태그에만 쓰이는 속성으로 셀과 셀사이의 여백 설정셀과 셀사이의 여백 설정

Page 17: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그<a><a>

텍스트텍스트 , , 이미지 등에 링크를 적용 시킬 때 이미지 등에 링크를 적용 시킬 때 사용하는 태그사용하는 태그기본 형태는 기본 형태는 <a href=“<a href=“주소”주소” >>링크대상링크대상 </a></a>속성속성

href : hyper reference href : hyper reference 의 약자로서 링크 의 약자로서 링크 할려고하는 문서명이나 다른 홈페이지의 할려고하는 문서명이나 다른 홈페이지의 URLURL 을 을 지정할 수 있는 속성지정할 수 있는 속성target : target : 문서를 열때 어떤 위치에 문서를 출력할지 문서를 열때 어떤 위치에 문서를 출력할지 지정해 주는 속성지정해 주는 속성 , , 속성값으로는 속성값으로는 _self, _top, _blan_self, _top, _blank, _parent k, _parent 등등

Page 18: 충남대학 농업과학대학 학과교육

자주 사용되는 자주 사용되는 HTML HTML 태그태그예제예제

<html><html><head><head><title><title> 다른 문서에 링크 다른 문서에 링크 </title></title></head></head><body><body><a href=http://www.empas.com target=_blan<a href=http://www.empas.com target=_blank>k> 여기를 클릭여기를 클릭 </a></a> 하면 새 창을 띄우면서 하면 새 창을 띄우면서 엠파스로 갑니다엠파스로 갑니다 ..<a href=http://www.yahoo.co.kr target=_self><a href=http://www.yahoo.co.kr target=_self>여기를 클릭여기를 클릭 </a></a> 하면 현재의 위치에서 하면 현재의 위치에서 야후가 나타납니다야후가 나타납니다 ..</body></html> </body></html>

Page 19: 충남대학 농업과학대학 학과교육

수정 할 파일 확인수정 할 파일 확인인터넷 익스플로러 실행인터넷 익스플로러 실행

수정하고 싶은 페이지로 이동수정하고 싶은 페이지로 이동웹페이지의 주소 확인웹페이지의 주소 확인

위 그림처럼 주소 맨 끝에 있는위 그림처럼 주소 맨 끝에 있는 (?table=(?table=뒤에 뒤에 있는 것이 파일 이름있는 것이 파일 이름실제 서버에 저장되는 것은 파일이름실제 서버에 저장되는 것은 파일이름 .htm.htm

Page 20: 충남대학 농업과학대학 학과교육

SFTPSFTP 를 이용한 파일 다운로드를 이용한 파일 다운로드설치 및 접속설치 및 접속

홈페이지 홈페이지 FTPFTP접속 프로그램 접속 프로그램 DownloadDownload 클릭클릭((연구소 홈페이지 자료실에 등록연구소 홈페이지 자료실에 등록 ))설치프로그램 실행설치프로그램 실행

프로그램 설치후 바탕화면에 생성되는 아이콘프로그램 설치후 바탕화면에 생성되는 아이콘 를 실행를 실행

를 클릭를 클릭

Page 21: 충남대학 농업과학대학 학과교육

SFTPSFTP 를 이용한 파일 다운로드를 이용한 파일 다운로드오른쪽과 같은 창이 뜨면 오른쪽과 같은 창이 뜨면 Host NameHost Name 에 각 학과의 에 각 학과의 홈페이지 주소 입력홈페이지 주소 입력 , Us, User Nameer Name 에 학과 계정 에 학과 계정 입력후 입력후 Connect Connect 클릭클릭비밀번호 입력비밀번호 입력비밀번호 인증후 비밀번호 인증후 오른쪽과 같이 접속오른쪽과 같이 접속화면 오른쪽에 있는 화면 오른쪽에 있는 pubpublic_htmllic_html 로 이동로 이동

Page 22: 충남대학 농업과학대학 학과교육

SFTPSFTP 를 이용한 파일 다운로드를 이용한 파일 다운로드각 학과 계정 이름으로된 각 학과 계정 이름으로된 폴더로 이동폴더로 이동원하는 파일을 찾아서 원하는 파일을 찾아서 오른쪽버튼 클릭오른쪽버튼 클릭하거나하거나상단 도구 상자에상단 도구 상자에있는 화살표버튼있는 화살표버튼클릭클릭클릭후 다운로드 위치 클릭후 다운로드 위치 결정결정

Page 23: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

소개소개MSMS 사에서 개발한 웹에디터사에서 개발한 웹에디터나모나모 , , 드림위버 등과 함께 많이 사용되는드림위버 등과 함께 많이 사용되는웹 에디터 중 하나웹 에디터 중 하나MSMS 제품과의 완벽한 연동 가능제품과의 완벽한 연동 가능Office Office 제품군과 함께 제공 제품군과 함께 제공 (( 제품에 따라 다제품에 따라 다름름 ))쉬운 인터페이스와 간단한 사용법으로 쉽게 쉬운 인터페이스와 간단한 사용법으로 쉽게 사용 가능사용 가능

Page 24: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

메뉴메뉴파일파일

파일 열기 및 저장파일 열기 및 저장 , , 인쇄등인쇄등

편집편집잘라내기잘라내기 , , 붙이기붙이기 , , 복사복사 , , 실행취소실행취소

보기보기각종 도구상자각종 도구상자

삽입삽입그림 및 각종 개체그림 및 각종 개체 , , 양식등양식등

서식서식글꼴글꼴 , , 배경색배경색 , , 스타일 등스타일 등

도구도구맞춤법 검사 등맞춤법 검사 등

표표표 그리기표 그리기 , , 삽입삽입 , , 삭제 등삭제 등

Page 25: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

도구상자도구상자자주 사용되는 기능자주 사용되는 기능파일 열기파일 열기 , , 저장저장인쇄인쇄 , , 미리보기미리보기 , , 브라우저에서 미리보기브라우저에서 미리보기잘라내기잘라내기 , , 복사복사 , , 붙여넣기붙여넣기그림그림 , , 하이퍼링크 추가하이퍼링크 추가글꼴글꼴 , , 크기크기 , , 색상 변경색상 변경표 그리기표 그리기 , , 지우기지우기정렬정렬

Page 26: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

HTML HTML 문서 보기문서 보기기본기본WYSIWYG WYSIWYG 방식의 편집창방식의 편집창

HTMLHTMLHTML HTML 소스코드소스코드

미리보기미리보기사용자가 입력한 사용자가 입력한 HTML HTML 미리보기미리보기

Page 27: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

텍스트 입력텍스트 입력일반 워드처럼 텍스트 입력일반 워드처럼 텍스트 입력ENTERENTER 는 문단 나누기는 문단 나누기SHIFT+ENTERSHIFT+ENTER 는 줄 바꿈는 줄 바꿈문단을 나눴을 때는 소스코드에 문단을 나눴을 때는 소스코드에 <P><P> 태그 추가태그 추가

줄 바꿈일 때는 소스코드에 줄 바꿈일 때는 소스코드에 <BR> <BR> 태그 추가태그 추가

Page 28: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

이미지 입력이미지 입력삽입→그림 →그림파일 선택삽입→그림 →그림파일 선택파일 다이얼로그를 통해 파일 다이얼로그를 통해 그림파일 선택 및 페이지에 그림 그림파일 선택 및 페이지에 그림 파일 추가 가능파일 추가 가능

이미지 등록정보이미지 등록정보입력된 이미지를 클릭후 오른쪽 입력된 이미지를 클릭후 오른쪽 버튼을 클릭후 그림 등록정보 버튼을 클릭후 그림 등록정보 클릭클릭이미지 크기 및이미지 크기 및정렬방법등을 정렬방법등을 손쉽게 설정 가능손쉽게 설정 가능

Page 29: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

이미지 등록정보이미지 등록정보오른쪽 그림과 같은 창이 뜸오른쪽 그림과 같은 창이 뜸배치 스타일에서 간단한 배치 스타일에서 간단한 정렬방법 설정정렬방법 설정레이아웃에서 세부 정렬방법 레이아웃에서 세부 정렬방법 설정설정크기에서 이미지 크기 조절크기에서 이미지 크기 조절크기의 단위는 픽셀과 크기의 단위는 픽셀과 % % 사용 가능사용 가능가로세로 비율은 유지하는 가로세로 비율은 유지하는 것이 좋음것이 좋음

Page 30: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

표 입력표 입력표→삽입 →표 를 선택 하거나 표→삽입 →표 를 선택 하거나 표 그리기로 표 입력 가능표 그리기로 표 입력 가능메뉴에서 표를 입력하면 표 메뉴에서 표를 입력하면 표 삽입 창이 뜨면서 표의 행과 열 삽입 창이 뜨면서 표의 행과 열 정렬방법정렬방법 , , 테두리 등을 한번에 테두리 등을 한번에 설정가능설정가능표 그리기를 선택하면 마우스 표 그리기를 선택하면 마우스 포인터가 연필 모양으로 포인터가 연필 모양으로 바뀌면서 마우스를 이용하여 바뀌면서 마우스를 이용하여 직접 표 삽입 가능직접 표 삽입 가능행과 열을 마음대로 나눌 수 행과 열을 마음대로 나눌 수 있음있음

Page 31: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

표 등록정보표 등록정보표를 삽입한 후 표 위에서 오른쪽 버튼을 표를 삽입한 후 표 위에서 오른쪽 버튼을 클릭하고 표 등록정보를 클릭하면 클릭하고 표 등록정보를 클릭하면 설정가능설정가능

표의 크기 너비표의 크기 너비 , , 여백여백 , , 배경색배경색 , , 배경그림 등을 설정 가능배경그림 등을 설정 가능

색상 설정시 기본 리스트에 있는 색 뿐만 색상 설정시 기본 리스트에 있는 색 뿐만 아니라 사용자지정 클릭시 다양한 색상 아니라 사용자지정 클릭시 다양한 색상 선택 가능선택 가능

Page 32: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

셀 등록정보셀 등록정보표의 한 칸을 이루고 있는 표의 한 칸을 이루고 있는 셀에 대해서 여러가지 셀에 대해서 여러가지 설정을 변경 가능설정을 변경 가능

표 등록정보와 표 등록정보와 마찬가지로 크기 너비마찬가지로 크기 너비 , , 여백여백 , , 배경색배경색 , , 배경그림 배경그림 등을 설정 가능등을 설정 가능

Page 33: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

하이퍼링크하이퍼링크텍스트텍스트

텍스트 입력 후 마우스로 블록을 텍스트 입력 후 마우스로 블록을 지정한 다음 오른쪽 버튼을 지정한 다음 오른쪽 버튼을 클릭후 하이퍼 링크 클릭클릭후 하이퍼 링크 클릭하이퍼 링크 다이얼로그 창이 하이퍼 링크 다이얼로그 창이 뜨면 주소 부분에 링크 시킬 뜨면 주소 부분에 링크 시킬 주소를 입력주소를 입력대상 프레임은 링크가대상 프레임은 링크가열릴 대상을 지정하는열릴 대상을 지정하는것으로 같은 프레임것으로 같은 프레임 ,,전체 페이지전체 페이지 , , 새창새창 ,,상위 프레임상위 프레임등을 설정 가능등을 설정 가능

Page 34: 충남대학 농업과학대학 학과교육

Front PageFront Page 를 이용한 홈페이지 수정를 이용한 홈페이지 수정

이미지이미지

먼저 이미지를 삽입하고 텍스트의 경우처럼 마우스 먼저 이미지를 삽입하고 텍스트의 경우처럼 마우스 오른쪽 버튼 클릭후 하이퍼 링크 클릭오른쪽 버튼 클릭후 하이퍼 링크 클릭

이미지의 경우 링크를 걸고 나면 간혹 이미지 이미지의 경우 링크를 걸고 나면 간혹 이미지 테두리에 파란색 선이 생기는 경우가 있는데 이는 테두리에 파란색 선이 생기는 경우가 있는데 이는 그림 등록정보에서 테두리 값을 그림 등록정보에서 테두리 값을 00으로 설정하면 으로 설정하면 해결 가능해결 가능

Page 35: 충남대학 농업과학대학 학과교육

SFTPSFTP 를 이용한 파일 업로드를 이용한 파일 업로드업로드업로드

수정할 파일을 다운받았던 폴더로 이동수정할 파일을 다운받았던 폴더로 이동수정이 완료된 파일을 업로드수정이 완료된 파일을 업로드상단 도구 상자에 있는 화살표버튼 클릭상단 도구 상자에 있는 화살표버튼 클릭클릭 후 업로드 할 파일 선택클릭 후 업로드 할 파일 선택파일 선택 후 업로드 버튼을파일 선택 후 업로드 버튼을누르면 업로드 완료누르면 업로드 완료인터넷 익스플로러를 실행인터넷 익스플로러를 실행후 변경된 사항 확인후 변경된 사항 확인