사이드바 영역으로 건너뛰기

게시물에서 찾기분류 전체보기

25개의 게시물을 찾았습니다.

  1. 2004/07/29
    2-3. 문단 꾸미기
    진보호스팅
  2. 2004/07/29
    2-2. 홈페이지의 구조
    진보호스팅
  3. 2004/07/29
    2-1. 홈페이지와 HTML
    진보호스팅
  4. 2004/07/27
    1-2. Ftp 프로그램으로 웹에 올리기
    진보호스팅
  5. 2004/07/27
    1-1. html문서 작성하기
    진보호스팅

2-3. 문단 꾸미기

 

 

 

3. 문단 꾸미기

 

3.1. 제목 - HEADER 요소

3.2. 문단 나누기 -

와

3.3. 목록 만들기

 3.3.1. 순서없는 목록 만들기
 3.3.2. 순서있는 목록 만들기
3.4. 인용문 처리 -

3.5. 있는 그대로 보여주기 - 


3.6. Line Break 태그 - 


3.7. 수평선 긋기(Horizonal Rule) - 


3.8 특수문자 입력하기

 

3.1. 제목 - HEADER 요소 
은 웹페이지의 제목으로 사용될 텍스트의 크기를 지정할 때 사용하는 요소입니다. n 값은 1∼6까지 사용할 수 있는데 다른 속성값과는 달리 숫자가 커질수록 글자의 크기는 작아집니다. 글자체가 고딕체임을 유의해서 보도록 합니다. 


 align 속성
문서의 제목을 웹브라우저 화면의 좌, 우 또는 중간에 배열할 수 있는데 이런 기능을 위해 사용하는 속성이 align 속성입니다. align 속성은 right, center, left의 값을 가질 수 있으며 이 속성의 기본값은 left입니다. 즉 이 속성을 사용하지 않은 경우 제목은 화면의 왼쪽에 나타나게 됩니다. 







 


This is a heading1 



This is a heading2 



This is a heading3 



This is a heading4 



This is a heading5 



This is a heading6 




 



3.2. 문단 나누기 - 
와 

태그를 이용하여 문단과 문단 사이의 간격을 줄 수 있습니다. 뒤에서 배우게 되는 
태그가 줄바꿈의 기능만을 하는데 비해 



태그는 줄바꿈과 한 개의 빈줄을 만들어주는 역할을 동시에 합니다. 
최근의 HTML 버전에서는 

태그도 컨테이너로 되어 있어, 끝내기 태그를 갖고 있지만 끝내기 태그 사용여부가 기능상의 차이가 있는 것은 아닙니다. 

태그는 문단을 나누지만 한 개의 빈줄을 만들어주지 않는 점에서 

태그와는 차이가 있습니다. 뒤에서 배우시게 되는 
태그를 사용하기보다는 

태그를 이용해서 되도록 줄을 나누시기 바랍니다. 

와 같이 쓰여서 문단을 정렬할 수 있다는 큰 장점이 있기 때문입니다. 

3.3. 목록 만들기
전달하고자 하는 내용을 일목 요연하게 전달하기 위한 아주 유용한 수단이 됩니다. 실제로 지금처럼 홈페이지들이 화려해지기 전에는 텍스트 위주의 홈페이지가 주가 되었고, 텍스트 편집을 위해서 자주 사용되었던 요소입니다. 물론 지금도 그 중요성은 결코 뒤지지 않죠. 

3.3.1. 순서없는 목록 만들기
순서가 없는 목록을 만들 때 사용하는 요소는 

    이며 시작태그와 끝내기 태그 사이에 각 항목을 표시하는 태그인 

  • 를 사용하게 됩니다. 각 항목들이 
    태그를 사용하지 않아도 다음 줄에 표현되는 점에 유의합니다. 

     type 속성
    목록의 각 항목 앞에 사용할 부호의 종류를 결정짓는 속성입니다. 속성값으로는 disc, square, circle을 가질 수 있으며, 각각 검은 점, 사각형, 원으로 표현됩니다. 

    3.3.2. 순서있는 목록 만들기
    

      요소를 사용하며 각 항목을 나타낼 때 사용하는 태그는 순서없는 목록에서와 동일하게 g 태그를 사용합니다. g내에는 Type과 Start 두 개의 속성을 사용할 수 있습니다. 

       type 속성
      순서가 없는 목록을 설명드릴 때 말씀드린 것과 같이 각 항목 앞에 표시할 부호의 종류를 지정할 때 사용하는 속성으로 이 속성은 속성값으로 1, A, a, I, i를 가질 수 있습니다. 각각 숫자, 알파벳 대문자, 알파벳 소문자, 로마숫자 대문자, 로마숫자 소문자를 표현하게 됩니다. 

       start 속성
      목록의 각 항목 앞에 붙여질 부호가 몇 번째부터 시작할 것인지를 지정할 때 사용합니다. 다음에 보일 예제에서처럼 목록번호를 이어서 사용해야 할 때 이용되는 속성입니다. 

      3.3.3. 정의 목록(Definition List) 만들기
      정의 목록이란 용어를 정의할 때와 같이 용어와 용어를 설명 한 부분을 구분되게 표현할 수 있는 방법입니다. 정의목록을 만들 때 사용하는 요소는 

      이며 항목을 나타내는 태그는 

      와 

      두 가지가 있습니다. 설명하고자 하는 용어 부분에 사용하는 태그가 

      , 설명문에 사용할 태그가 

      입니다. 

      

      


      






      도종환님의 시집
      


        

      1. 고두미 마을에서
        

      2. 접시꽃 당신

      강은교님의 시집
      


        

      • 虛無集
        

      • 貧者日記
        

      • 그대는 깊디깊은 강

      도종환님의 시집(계속...)
      


        

      1. 내가 사랑하는 당신은
        

      2. 지금 비록 너희 곁을 떠나지만

      


      

      순서있는 목록
      

        태그 사용
        

        순서없는 목록
        

          태그 사용


      		
 
      

      3.4. 인용문 처리 - 


      다른 출처로부터 인용된 문서를 나타낼 때 쓰이는 요소입니다. 문서의 내용이 아래와 같을 때 화면상으로는 다음과 같이 나타나게 됩니다. 

      

      


      
 
다음은 안도현님의 겨울밤의 시쓰기 중 한 구절입니다. 


      

      다시 볼펜을 잡아야겠다.
      낮은 곳으로 자꾸 제몸을 들이미는 눈발이

      오늘밤 내 사랑하는 사람의 이불이 되었으면 좋겠다라고

      나는 써야겠다, 이 세상의 한복판에서

      지금 내가 쓰는 시가 밥이 되고 국물이 되도록

      끝없이 쓰다보면 겨울밤 세 시나 네 시쯤

      내방의 꺼지지 않는 불빛을 보고 누군가 중얼거릴 것이다

      살아야겠다고, 흰 종이 위에다 꼭꼭 눌러

      이 세상을 사랑해야겠다고 쓰고 또 쓸 것이다. 

      

      
 

      

      3.5. 있는 그대로 보여주기 - 

       
      사이에 위치한 문서의 내용을 공백과 빈줄, 탭이 인식되어 있는 문서를 그대로 보여줍니다. 일반적인 HTML문서에서의 공백과 빈줄은 그리 중요하지 않다고 앞서 말한 바 있는데, 필요에 의해서 공백과 빈줄을 넣어 줘야 할 경우에는 
       태그를 사용하여 표시하면 아주 편하지요. 그러나, 태그 형태로 되어 있는 것은 태그로 인식한다는 점을 반드시 기억하시기 바랍니다. 

      

       

      문서의 내용을 공백과 빈줄, 탭이 인식되어 있는 문서 

      그대로 보여준다.
       
      

      3.6. Line Break 태그 - 

      HTML 문서에서는 가 공란의 의미밖에 없으며 줄바꿈의 기능을 하지 않습니다. HTML 문서에서 줄을 바꾸기 위해서는 
      태그를 사용하여야 합니다. 

      3.7. 수평선 긋기(Horizonal Rule) - 

      단락을 구분하는 방법은 빈줄을 만들어 놓는 것도 좋은 방법이지만 내용이 달라질 때는 확실한 구분선을 그어줄 필요가 있는 경우도 있습니다. 그런 경우에 사용하는 것이 
      태그이다. 즉 
       태그는 수평선을 그어주는 기능을 하게 되며 이 태그는 align, size, width, noshade 네 개의 속성을 가질 수 있습니다. 

       size 속성
      Size 속성은 수평선의 굵기를 표현해 주는 속성입니다. 속성의 값으로 사용하는 숫자는 픽셀값이며 이 속성을 사용하지 않았을 경우 선의 굵기는 2 픽셀이 됩니다. 

       width 속성
      수평선의 가로 크기를 지정할 때 사용하는 속성입니다. 값을 표현하는 방법에는 두가지 방법이 있는데, 픽셀값으로 나타내는 방법(절대크기 지정)과 화면에 대한 비율로 나타내는 방법(상대크기 지정)이 그것이죠. 픽셀을 지정할 경우 어떤 웹브라우저에서든 동일한 폭으로 수평선이 그어지지만 %값을 사용한 경우는 웹브라우저 화면의 해상도에 따라 수평선의 크기가 변화될 수 있습니다. 

       align 속성
      수평선도 역시 align 속성을 사용하여 원하는 위치에 배열할 수 있는데 값으로 left, right, center, justify 등을 가질 수 있으며 이들은 각각 수평선을 화면의 왼쪽, 오른쪽, 중앙 및 앞의 배열방식에 따라 위치시키게 됩니다. 

       noshade 속성
      이 속성은 웹브라우저 화면에 그어진 수평선이 먹선이 되게 하는 기능이며 이 속성은 속성값을 갖지 않는다는 점에 주의합니다. 

      다음 예제를 보면서 각 효과의 차이점을 살펴보도록 합니다. 

      

       

       
      

      3.8 특수문자 입력하기
      html문서에서는 빈칸이나 태그에 쓰이는 <, > 등은 특수문자로 취급하고 있습니다. 빈칸은  으로 입력하고 <는 <, >는 >로 나타냅니다. 

      1. 진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
      
						
      
						
      
							
							
        
								
      • 태그
        • 
								
      • 글쓴이
        진보호스팅
        • 
								
      • 등록일
        2004/07/29 14:54
        • 
								
      • 수정일
        2004/07/29 14:54
        • 
								
      • 분류
        웹페이지 제작
        • 
								
      • 트랙백
        0개
        • 
								
      • 댓글
        0개
        •

      2-2. 홈페이지의 구조

       

       

      2. 홈페이지의 구조

       

      2.1. HEAD 요소
      2.2. BODY 요소



      2. 홈페이지의 구조

       



        여기에 웹페이지에 보이는 본문이 들어갑니다.

      홈페이지는 로 시작하여 로 끝나게 됩니다. 반드시 사용해야 하는 것은 아니지만 일반적으로 사용하는 것이 좋습니다.

      2.1. HEAD 요소
      문서의 머리부분은 로 시작하여 로 끝나고 제목(요소)은 반드시 이 요소 내에 사용하여야 합니다. 제목은 웹브라우저 상단의 제목표시줄에 나타나는데 문서의 특징을 가장 적절히 표현할 수 있는 제목을 사용하는 것이 좋겠죠. 이 외에도 뒤에서 배우시게 될 스타일시트와 자바스크립트 요소들이 이 안에서 사용됩니다.<BR>타이틀태그는 head 부분에 입력하며,이렇게 쓸 수 있습니다. 타이틀 요소는 웹페이지에 본문이 아니라 제목표시줄에 보여집니다. <P> <TABLE width="100%" border=0> <TBODY> <TR> <TD width=15> </TD> <TD bgColor=#ecefc2><head><BR><table>html 연습페이지입니다.</table><BR></head> </TD></TR> <TR> <TD> </TD> <TD><IMG height=86 alt="" src="http://education.jinbo.net/website/html/2_title.gif" width=389 border=0></TD></TR></TBODY></TABLE> <P><B>2.2. BODY 요소</B><BR><BODY> </BODY> 요소 내에는 브라우저에서 보이게 되는 문서의 모든 내용이 들어가게 됩니다. 그리고 <BODY> 태그 내에는 다음과 같은 몇 가지 속성을 사용하여 웹브라우저 화면에 나타날 텍스트의 색상과 배경그림을 정의할 수 있습니다. <TABLE width="100%" border=0> <TBODY> <TR> <TD width=15> </TD> <TD bgColor=#ecefc2><BODY bgcolor="#FFFF80" text="#FF00FF" link="#000000" vlink="#808080" alink="#00FF00"><BR></BODY> </TD></TR></TBODY></TABLE> <P>여기서 각 속성이 나타내는 것은 다음과 같습니다. <P> <UL> <LI>bgcolor 웹브라우저 화면의 바탕색입니다. <LI>text 화면에 나타나는 글자의 색깔입니다. <LI>link 링크로 연결된 하이퍼텍스트 글자의 색깔입니다. 그림에 링크를 걸었을 경우 테두리의 색깔로 나타납니다. <LI>vlink 한번 방문했던 링크의 색깔을 나타냅니다. <LI>alink 링크를 마우스로 클릭했을 때의 색깔을 나타냅니다. </LI></UL>이들 속성과 속성값은 = 부호로 연결되며 " " 내에 사용하는 속성값으로는 RGB값을 사용하게 됩니다. RGB값 앞에 # 기호를 넣어준다는 것에 유의합니다. text의 기본값은 000000이며 link의 기본 색상은 0000FF, vlink의 기본값은 808080입니다. 즉 이 속성들을 사용하지 않았다면 웹브라우저 상에 텍스트는 검은색으로 링크는 파란색으로, 한번 방문했던 링크는 보라색으로 나타나게 된다는 것을 의미하죠. 보다 정확하게 말하자면 웹브라우저의 설정값을 기본값으로 합니다. RGB값에 대한 자세한 설명은 다음으로 미루도록 하죠. <br /></div><div class="buttons-bottom center jinboblog-i-like-this-buttons"><a class="button-jinboblog" href="javascript:void(0);" title="스크랩으로 글 링크를 저장하세요" onclick="recommend('52',4,'/support','');"><img src="/plugins/../jplugins/ILikeThis/images/mini_chuchon.png" alt="진보블로그 공감 버튼" /></a><a class="button-twitter" href="http://twitter.com/home?status=https%3A%2F%2Fblog.jinbo.net%2Fsupport%2F4+%222-2.%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98%20%EA%B5%AC%EC%A1%B0%22" target="_blank" title="트위터로 리트윗합니다"><img src="/plugins/../jplugins/ILikeThis/images/twitter.png" alt="트위터로 리트윗하기" /></a><a class="button-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fblog.jinbo.net%2Fsupport%2F4&t=2-2.%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98%20%EA%B5%AC%EC%A1%B0" target="_blank" title="페이스북에 공유합니다"><img src="/plugins/../jplugins/ILikeThis/images/facebook.png" alt="페이스북에 공유하기" /></a><a class="button-delicious" href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=https%3A%2F%2Fblog.jinbo.net%2Fsupport%2F4&title=2-2.%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98%20%EA%B5%AC%EC%A1%B0','delicious','toolbar=no,width=550,height=550'); return false;" title="딜리셔스에 북마크합니다"><img src="/plugins/../jplugins/ILikeThis/images/delicious.png" alt="딜리셔스에 북마크" /></a></div> </div><!--/.text--> <div class="metadata"> <h3 class="title hidden">부가 정보</h3> <ul> <li class="tags"><dl><dt>태그</dt><dd></dd></dl></li> <li class="author"><dl><dt>글쓴이</dt><dd><cite>진보호스팅</cite></dd></dl></li> <li class="created"><dl><dt>등록일</dt><dd>2004/07/29 14:53</dd></dl></li> <li class="updated"><dl><dt>수정일</dt><dd>2004/07/29 14:53</dd></dl></li> <li class="category"><dl><dt>분류</dt><dd><a href="/support/category/4" title="웹페이지 제작">웹페이지 제작</a></dd></dl></li> <li class="trackback-count"><dl><dt>트랙백</dt><dd><a id="trackbackCount4" href="#tb" onclick="toggleLayer('entry4Trackback'); return false" title="트랙백 목록 보이기/감추기"><span class="count">0</span>개</a></dd></dl></li> <li class="comment-count"><dl><dt>댓글</dt><dd><a id="commentCount4" href="#rp" onclick="loadComment(4,1,false); return false" title="댓글 목록 보이기/감추기"><span class="count">0</span>개</a></dd></dl></li> </ul> </div><!--/.metadata--> <div class="feedbacks"> <div id="entry4Trackback" style="display:block"> <div class="feedback trackback-address"> <h3 class="title">이 글의 트랙백 주소</h3> <div class="text"><span onclick="copyUrl('https://blog.jinbo.net/support/trackback/4', this)">https://blog.jinbo.net/support/trackback/4</span></div> </div><!--/.trackback-address--> </div> <div id="entry4Comment" style="display:block"> <form id="entry4WriteComment" method="post" action="/support/comment/add/4" onsubmit="return false" style="margin: 0"> <div class="feedback comment-form"> <h3 class="title">댓글 남기기</h3> <div class="comment-form-item name"> <label for="name_4">이름</label> <input type="text" id="name_4" name="name" value="" maxlength="20" /> </div> <div class="comment-form-item password"> <label for="password_4">암호</label> <input type="password" id="password_4" name="password" value="" /> </div> <div class="comment-form-item homepage"> <label for="homepage_4">주소</label> <input type="text" id="homepage_4" name="homepage" value="http://" /> </div> <div class="comment-form-item secret"> <label for="secret_4">비밀</label> <input type="checkbox" id="secret_4" name="secret" value="1" onchange="checkJinboMainOpen(this);" /> <label for="onlyblog_4">진보블로그 메인에 공개하지 않음</label> <input type="checkbox" id="onlyblog_4" name="onlyblog" value="1" onchange="checkJinboMainOpen(this);" /> </div> <div class="comment-form-item content"> <label for="comment_4">내용</label> <textarea id="comment_4" name="comment" rows="10" cols="65"></textarea> </div> <div class="buttons"> <input type="submit" value="저장하기" onclick="addComment(this, 4); return false;" /> </div> </div><!--/.comment-form--> </form> </div> </div><!--/.feedback--> </div><div class="entry-wrap-close"></div></div><!--/.entry--> <hr class="hidden" /> <!--게시물 영역 마침--> </div><a id="entry_3"></a> <div class="hentry"> <!--게시물 영역 시작--> <div class="entry tt-body-category"><div class="entry-wrap-open"></div><div class="entry-wrap-body"> <h2 class="title"><a href="/support/3" rel="bookmark" title="2-1. 홈페이지와 HTML"><span class="entry-title">2-1. 홈페이지와 HTML</span></a></h2> <div class="toolbox"> <h3 class="title hidden">관리 메뉴</h3> <ul> <li class="feed rss"><a href="https://blog.jinbo.net/support/rss/response/3" title="이 글의 최근 응답 (RSS)"><span>응답 <abbr title="Really Simple Syndication">RSS</abbr></span></a></li> </ul> </div><!--/.toolbox--> <div class="text"> <h3 class="title hidden">본문</h3> <P align=right><A href="http://education.jinbo.net/website" target=_top><IMG src="http://education.jinbo.net/images/title_course_website.gif" border=0></A></P> <P> </P> <P><A name=up><IMG src="http://education.jinbo.net/website/html/website2.gif" border=0></A></P> <P> </P> <P> </P> <P><FONT size=2><SPAN class=head1>1. 홈페이지와 HTML</SPAN> </FONT></P> <P><B></B> </P> <P><B>1.1. 요소(Elements)</B><BR><B>1.2. 태그(Tags)</B><BR><B>1.3. 속성(Attributes)</B><BR><B>1.4. 속성값(values)</B><BR></P><br /><p><span class="toggle-text" onclick="toggleMore(this)" style="cursor: pointer; display: none;">계속 보기...</span></p> <div class="more-content" style="border: 1px dashed black; background: none repeat scroll 0% 0% rgb(239,255,175); padding: 1px; margin: 1px;"><br /><FONT size=2><SPAN class=head1>1. 홈페이지와 HTML</SPAN> </FONT> <P>인터넷이란 단어에 대한 정의는 딱히 규정된 것은 없지만 전세계에 존재하는 수많은 컴퓨터들이 서로 연결된 컴퓨터 네트워크를 말한다고 생각하면 됩니다. 흔히들 인터넷이란 단어와 혼동되어 사용하는 WWW(World Wide Web)은 인터넷에 연결된 각 컴퓨터에 저장된 정보들을 거미줄(Web)처럼 연결하여 쉽고 빠르게 원하는 정보들(텍스트, 그래픽, 사운드, 동영상 등)을 찾도록 하기 위해 고안된 서비스 방식을 의미합니다. 그외의 인터넷 서비스 중에서 우리가 주로 사용하는 것은 Email과 FTP 서비스가 있지요. WWW는 웹페이지 또는 홈페이지라고 불리는 문서를 기본 구성단위로 합니다.<BR>웹페이지에는 정보 전달의 가장 기본이 되는 텍스트는 물론 그래픽, 소리, 동영상, 소프트웨어, 프로그램 등 컴퓨터로 제작된 거의 모든 정보들을 삽입하거나 연결할 수 있습니다. 그렇게 됨으로써 우리는 집에 앉아 전세계의 사람들이 만들어 놓은 정보들 중에 우리에게 필요한 정보를 웹브라우저 - 웹페이지를 보여주는 소프트웨어, 인터넷 익스플로러나 넷스케이프 네비게이터 - 라는 소프트웨어를 통해 손쉽게 얻을 수 있게 되는 것이죠.<BR>이러한 웹페이지를 만든다는 것은 HTML(HyperText Markup Language)이라는 프로그래밍 언어를 사용하여 문서를 제작함을 의미합니다. 비록 HTML이 프로그래밍 언어라고는 하지만 전문 프로그래머들이 사용하는 C 언어와 같이 까다로운 언어와는 성격이 다르며, 단순히 정해진 기능을 하는 코드들을 나열하고 원하는 텍스트를 입력하는 것에 불과합니다. <P>HTML은 다음 4가지 종류의 코드들로 구성된 하나의 집합체를 의미합니다. <IMG alt="" src="http://education.jinbo.net/website/html/1_htmltag.gif" border=0> <P><B>1.1. 요소(Elements)</B><BR>HTML 명령을 의미합니다. 시작태그와 끝내기 태그를 가질 수 있으며 컨테이너(시작태그와 더불어 끝내기 태그로 둘러싸인 요소)라면 시작태그와 끝내기 태그 사이에 텍스트나 다른 요소를 가질 수 있습니다. 예를 들어 <TITLE>이라는 요소는 웹브라우저에게 제작된 웹페이지의 제목을 웹브라우저가 제목표시줄에 표시하도록 하는 컨테이너 요소입니다. 물론 처럼 시작 태그만 있는 요소도 있습니다.

      1.2. 태그(Tags)
      태그는 요소의 일부로서 시작태그와 끝내기 태그 두 종류가 있습니다. 시작태그는 요소를 시작하며 끝내기 태그는 요소를 끝낸다는 것은 쉽게 짐작할 수 있겠죠? 앞에서도 이야기했지만 모든 요소들이 끝내기 태그로 끝나는 것은 아닙니다.

      1.3. 속성(Attributes)
      속성은 요소의 시작 태그 내에 사용하는 것으로 명령을 구체화시키는 것입니다. 예를 들어 텍스트의 폰트 지정을 위해 사용하는 요소는 size, color, face 등의 속성을 갖는데 FONT 처럼 시작태그 내에 사용되며 속성과 속성값 사이에는 = 이라는 부호를 사용하여 연결합니다. 속성은 보통 속성값을 갖지만 noshade 등 일부 속성은 속성값을 갖지 않으니 유의하시기 바랍니다.

      1.4. 속성값(values)
      속성값은 속성과 관련된 값을 말합니다.
      에서 " "내에는 right나 all도 사용될 수 있는데 이들은 속성 clear의 속성값이며 속성과 속성값은 등호 '='에 의해 구분됩니다. 속성값 중에는 속성값을 " " 내에 넣는 것과 size=5처럼 넣지 않는 것이 있으므로 속성마다 사용여부를 잘 알아두어야 합니다.


      진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
      • 태그
      • 글쓴이
        진보호스팅
      • 등록일
        2004/07/29 14:51
      • 수정일
        2004/07/29 14:51
      • 분류
        웹페이지 제작
      • 트랙백
        0개
      • 댓글
        0개

      1-2. Ftp 프로그램으로 웹에 올리기

       

       

      2. Ftp 프로그램으로 웹에 올리기



      웹에 문서를 올리려면 자기 계정이 있어야 합니다. 계정을 받으려면 호스팅서비스를 이용할 수도 있고, 무료로 계정을 주는 사이트들을 이용할 수도 있습니다. 여기서는 진보네트워크센터 회원계정을 예로 들어보겠습니다. 다른 호스팅서비스를 받고 있더라도 웹에 올리는 과정은 비슷합니다. =)

      자신의 컴퓨터에서 홈페이지를 제작합니다. 위에서 연습해 본 것처럼 웹에 올릴 html문서와 그림파일들을 만들면 됩니다. 가장 처음에 보여줄 페이지는 index.html이라는 이름으로 저장해야 합니다.

      FTP 프로그램을 열고 서버에 접속을 합니다. 아래의 예는 개인은 무료로 쓸 수 있는 AlFtp프로그램입니다. 여기에서 다운받아서 설치하면 됩니다. 계정에 접속하기 위해 접속하기를 클릭합니다. 사이트맵은 자주 접속하는 계정을 등록하여 사용할 수 있습니다.

      FTP 프로그램에서 Host Address라고 되어있는 부분을 "member.jinbo.net"으로 적어주고, User ID에는 회원 아이디를, password에는 비밀번호를 적습니다.

      접속에 성공하면, 자신의 계정 안에 http라는 디렉토리가 있습니다. 호스팅서버에 따라 http계정이 아니고 public_html등의 디렉토리가 있을 수도 있습니다. 위쪽은 서버에 있는 자신의 계정의 디렉토리이고, 아래쪽은 내 컴퓨터에 있는 디렉토리입니다. 위쪽에서는 http디렉토리를 더블클릭해서 들어가고, 아래쪽에서는 내가 작성한 홈페이지 문서가 있는 폴더로 들어갑니다.

      이 http 디렉토리안에 제작한 홈페이지 화일들을 넣습니다. 내 컴퓨터에 있는 파일을 선택하고 아이콘중에서 업로드를 클릭하면 됩니다. 파일을 서버에 올리는 것을 업로드라고 합니다. 업로드 작업이 끝나면 오른쪽 아래의 상태표시창에 "Transfer complete"라고 표시됩니다. 그중에 index.html이라는 화일이 있으면 " http://member.jinbo.net/~아이디 " 라고 홈페이지주소를 쳤을때 보이게 됩니다.

      파일 업로드가 모두 끝나면 아이콘중에서 접속끊기를 클릭하여 접속을 끊고 Ftp프로그램을 끝냅니다. 인터넷으로 접속하여 자기 계정을 찾아보면 업로드한 파일이 보일 것입니다. 예제보기


      진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
      • 태그
      • 글쓴이
        진보호스팅
      • 등록일
        2004/07/27 16:46
      • 수정일
        2004/07/27 16:46
      • 분류
        웹페이지 제작
      • 트랙백
        0개
      • 댓글
        0개

      1-1. html문서 작성하기

      * 웹페이지 제작과정은 예전 진보넷  온라인교육센터의 강좌를

      재출판+수정보강할 예정입니다.

       

       

       

      1. html문서 작성하기



      1. html문서 작성하기

      html문서는 윈도우의 메모장으로 간단하게 작성할 수 있습니다. 리눅스의 경우에는 vi 에디터로 작성하면 됩니다.

      문서작성하기
      메모장을 열고 아래와 같이 입력합니다.

      문서저장하기
      파일>새이름으로 저장을 클릭한 후 파일이름을 연습.html이라고 적고, 파일형식은 꼭 모든파일로 하여 저장합니다. 파일형식은 *.html이어야 합니다. *자리의 파일이름은 아무거나 해도 됩니다.

      문서열어보기
      인터넷 익스플로러등의 웹브라우저 프로그램을 열고 파일>열어보기에서 찾아보기를 클릭한 후 작성한 파일을 찾아서 더블클릭하면 작성한 문서를 웹브라우저에서 볼 수 있습니다. 이 경우는 내 컴퓨터에 저장되어 있는 문서를 열어보는 것이기 때문에 인터넷에 연결되어 있지 않아도 메모장과 웹브라우저만 설치되어 있다면 연습해 볼 수 있습니다. 하지만 서버에 있는 것이 아니기 때문에 다른 곳에서는 볼 수 없습니다.

      와 사이에 쓴 것이 본문에 나타난 것을 볼 수 있습니다. 위의 예제는 매우 간단한 것이고, HTML과정에서 배운 다른 태그들도 입력해 봅니다. 그리고 인터넷에서는 다른 사람이 작성한 HTML소스도 볼 수 있습니다. 웹페이지의 본문부분에서 오른쪽 마우스버튼을 클릭하면 메뉴중에 소스보기가 있습니다. 소스보기를 클릭하면 해당 웹페이지의 소스를 볼 수 있습니다.



      진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
      • 태그
      • 글쓴이
        진보호스팅
      • 등록일
        2004/07/27 16:43
      • 수정일
        2004/07/27 16:43
      • 분류
        웹페이지 제작
      • 트랙백
        0개
      • 댓글
        0개