'홈페이지제작'에 해당되는 글 3건

오늘은 홈페이지 뿐만아니라 블러그 등을 운영할 때
최소한 알아야 할 HTLM 기본지식과 이를 위한 HTML편집기에 대하여 학습합니다.

웹을 하기 위해서는 꼭 필요하기 때문이다.

 애초에 우리가 다루는 언어는 웹 사이트에 관한 언어이기 때문에 깊게 들어가지는 않아도 기본적인 배경은 알고 있어야 한다고 생각했다.

웹 주소의 의미

보통 사이트 주소의 www.itworldkorea.tistory.com의 www는 "World wide web"의 약자다. 세계를 엮는 거미줄과 같은 의미... 목적 또한 이와 같다. 애초에 모든 사이트의 최초 목적은 정보의 공유!

우리가 인터넷을 사용하다 보면 자주 접하는 단어들이 있다. IP, DNS, Port. Protocol(프로토콜).. 자주 접하지만 솔직히 의미는 생소하다. 과연 뭘까?

보통 사이트 주소는 이렇게 되어 있다. http://itworldkorea.tistory.com

http:// <- 이 부분을 프로토콜 이라 한다. 프로토콜은 통신 규약이라고 보면 된다. 우리가 인터넷을 사용할때 사용자의 컴퓨터와 웹 사이트가 구축된 서버 컴퓨터 사이의 통신이 있을것이다. 이때 이 통신들 끼리 미리 규칙을 만든것을 프로토콜이라 한다. http는 '정보만' 받는다. FTP는 '파일도' 받는다. 이런 형식으로 되어 있다.

따라서 보통 주소창에 직접 쳐서 다운 받는 경우 ftp://로 시작 한다. 경험한 사람도 있을 것이다.

IP는 뭘까? 보통 인터넷 상에 컴퓨터 주소를 IP라 한다. 즉 어떤 건물의 몇동 몇 호가 있다면 몇 호에 해당하는게 IP라 할 수 있다. 여기서 보통의 가정집 IP는 그 수가 너무 많아 DHCP라는 규약을 같이 사용하는데 이 DHCP가 각 가정 집에 IP를 분할에서 할당해준다. 정도만 알아도 무방하다.

이 IP 주소를 인간이 알아보기 쉽게 문자로 바꾼것을 DNS라 한다. 위 주소에 itworldkorea.tistory.com 이 이에 해당된다.

Port는 같은 서버내의 프로그램 주소이다. 보통 기준이 80으로 되어 있다. 80이면 생략이 가능하다. 실제로 주소후 :80을 붙이면 제대로 사이트에 들어가지지만 포트번호를 : 470 이런식으로 다르게 지정하면 사이트에 들어가지 못하는 현상을 확인 가능하다.

HTML 편집기

Html 편집기는 거창하게 갈거 없이 말 그대로 HTMl을 작성할 수 있는 편집기를 말한다.

간단하게 노트패드 프로그램을 써도 되고. 기타 좋은 편집기들이 많으니 하나 골라서 사용하면 된다.

대표적인 몇개를 소개 하겠다.

http://www.editplus.com/kr/

에디트 플러스라는 프로그램으로 우리나라 사람이 만든 편집기 이다. 꽤나 사용하는 유저가 많다. 30일 평가판으로 제공된다.

http://software.naver.com/software/summary.nhn?softwareId=GWS_000218&categoryId=A0100000

노트패드 + 라는 편집기로 html5를 코딩하는 무료 편집기중 굉장한 호평을 받고 있다. 무료

http://aptana.com/

개발자들이 좋아하는 강력한 프로그램 입니다.

https://www.sublimetext.com/

서브라임 텍스트 또한 인기있는 프로그램으로 이 편집기를 이용한 강의가 꽤나 있습니다.

각 사이트와 네이버 검색을 통해 자신에게 맞는 프로그램을 찾아서 사용해보세요

자 이제 본격적으로 HTMl 공부에 대한 기본 준비가 완료 됐다고 볼 수 있겠습니다.

 홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.

그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.

예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.

div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.

지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의

색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.

이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.

요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.

예를 들어서 다음페이지를 봐보겠습니다.

인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.

메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.

저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.

만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의

사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐  말씀 드렸습니다.

 테이블에 대해서 말씀드리면

<table> <-- 테이블 태그의 시작

<tr> <-- 줄(열)의 시작

<td>A <-- 칸(행)의 시작

</td> <-- 칸(행)의 끝

</tr> <-- 줄(열)의 끝

</table> <-- 테이블 태그의 끝

위에서 tr을 열고 td를 1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.

결과는

 

홈페지를 만들기 위해서 필수적으로 알아야할 할

html 명령어입니다. 다는 기억할 수 없다고 하더라고

기능은 어떠한지는 아셔합니다.

<*head*><*/head*> 홈페이지의 머리 부분입니다.
<*title*><*/title*>익스플로러 맨 윗부분에 뜨는 부분입니다.(네이버, 이런식으로)
<*body*><*/body*>홈페이지의 몸통 부분입니다.
<*img src="그림경로"*>이미지 링크 태그입니다.
<*a href="파일주소"*><*/a*> 파일 링크 태그입니다.(다운 가능)
<*iframe*><*/iframe*>iframe을 사용하는 태그입니다.
<*frameset rows/cols"화면을 나눌비율"*><*/frameset*> frame을 사용하는 태그입니다.
<*embed src="음악경로"*> 음악 재생 태그 입니다.
<*b*><*/b*>글씨체를 굵게 해줍니다.
<*i*><*/i*>글씨를 눕게 해줍니다.
<*u*><*/u*>글씨에 밑줄을 긋습니다.
<*font*><*/font*>글씨에 대한 사항을 지정합니다.
- color=글씨색 : 글씨의 색 지정
- size=번호 : 글씨의 크기를 지정합니다.(1~7까지가 있고, 7이 가장 큽니다.)
- face=글씨체 : 글씨의 체를 지정합니다.
<*marque*><*/marque*>글씨에 옆으로 지나가도록 합니다.
<*center*><*/center*>글씨를 가운데 정렬로 합니다.
<*sub*><*/sub*>아래 첨자로 표현합니다.
<*sup*><*/sup*>위 첨자로 표현합니다.
<*pre*><*/pre*>입력한 내용과 형식을 그대로 표현합니다.
<*p*><*/p*> 문단을 띄어줍니다.
<*br*>[enter]키와 동일한 효과입니다.
<*hr*>수평선을 긋습니다.
<*ul type=disc/circle/square*><*/ul*>disc는 ●, circle은 ○, square는 ■로써 무순서 목록앞에 붙음
<*ol start=번호*><*/ol*> 문서에 숫자 순서를 지정한다.
<*caption*><*/caption*>도표 바로 위에 도표의 제목을 지정한다.
<*table*><*/table*>테이블을 만든다.
- <*tr*><*/tr*>도표의 가로줄을 정한다.
- <*td*><*/td*>도표의 새로줄을 정한다.
<*em*><*/em*> 이탤릭체로 표현
<*strong*><*/strong*> 굵은 글자로 표현
<*cite*><*/cite*> 인용문구처럼 표현
<*kbd*><*/kbd*>키보드로 입력받는 것처럼 표현
<*h숫자*><*/h숫자*> 본문에서 제목의 글자를 크게 하기 위해서 사용
- 1~6 1이 가장큼.
<*au*><*/au*>저자의 이름을 표현할때 사용
<*blink*><*/blink*>글씨를 깜빡 거리게 함
<*code*><*/code*>영어 타자체로 표현
<*blockquote*><*/blockquote*>다른 글을 인용할 때 주로 사용하느데, 적당한 왼쪽 여백을 주어서 표현한다.

이 정도의 태그만 알고 계시면 간단한 홈페이지를 만드시는데는 큰 지장이 없다고 봅니다.
만약 더 알고 싶으시다면 인터넷 사이트를 찾아보시구요
사용하실 때에는
* 표시는 제외하셔야 합니다.

태그고 머고 전혀 모르는 님을 위한 기초 전 강좌 임다.
대부분은 아시는 내용이지만, 행여 알짜 초보를 위해
기본적인 내용을 먼저 써 놓습니다.

1. 태그란(Tag)

태그(tag)는 HTML 문에서 쓰이는 일종의 명령언어를 지칭하는
명령문이다.( 영어로 따지면 스펠링 쯤 되겠네욤?? )

예)
1) <html></html>
2) <head></head>
3) <br>
...

2. HTML ( Hyper Text Markup Language )

HTML이란 하이퍼 텍스트 마크업 랭귀지의 줄임말로써
태그들로 조합된 하나의 문장이다.
( 영어로 따지면 문장 쯤 되겠네욤?? :; 장문도 있고 단문도 있듯 )
우리가 흔히 인터넷 사이트에서 보여지는 모든 내용들을
HTML로 표현할수 있다.

예)
<html></html>
<head></head>
<!--edt:htmlhead:s-->
<title>야후! 코리아</title>
<link rel="SHORTCUT ICON" href="http://kr.yahoo.com/favicon.ico">
<meta http-equiv="Content-type" content="text/html; charset=euc-kr">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Wed, 04 Jul 1973 16:00:00 GMT">
<script language=javascript>
<!--
function popWin(url, w, h, t, l) {
var win = null;
win = window.open('','_popup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width='+w+',height='+h+',top='+t+',left='+l);
if (win == null) return;
win.location.href = url;
}
//-->
</script>
.....

</html>

3. 태그의 형식

태그는 태그의 시작과 종료를 알리는 한쌍의 구문으로 이루어진다.
시작은 걍 < > 요거 안에 태그쓰면 시작이구
끝은 </ > 요렇게 하고 태그를 쓰면 끝을 알립니다.