|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가? |
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?
#1. HTML이란?
HTML처음이니 잠시 몰라도 되는 개념 설명부터.
저희가 보는 (거의) 모든 웹페이지는 기본적으로 HTML이라는 언어에 의해서 만들어져있습니다.
하이퍼 텍스트 마크업 랭귀지(Hyper Text Mark-up Language)라는 건데 아실 필요없구요.
HTML이 만들어진 이유는 웹 환경에서 문서와 문서를 연결하는 툴이 필요했기 때문입니다.
모든 웹이란 것이 거미줄 처럼 연결되어있는데 이를 구현할 기본 개념이죠.
이렇게 연결된 링크를 하이퍼링크(Hyper Link)라고 부릅니다.
예를 들어 저희가 인터넷에서 하는 모든 행위는 어떤 링크를 클릭해서 이동을 하는 것이 기본입니다.
검색어를 입력하고 버튼을 클릭하든, 검색 결과를 눌러서 웹페이지로 이동을 하든, 사이트 내의 메뉴를 누르든,
심지어는 웹브라우져의 즐겨찾기 목록을 클릭하는 것 조차도 이 기본 개념을 이용한 것이죠.
HTML이 할 수 있는 거의 유일한 기능이 이것입니다.
문서와 문서. 즉, 웹페이지와 웹페이지를 연결해주는 기능이죠.
이 기능 외에 HTML이 할 수 있는 것은 '태그'라는 것을 순서대로 써서 문서의 내용을 레고처럼 쌓아올리는 것입니다.
HTML이 할 수 있는 모든 것이 이 두 가지 기능입니다.
#2. HTML 문서를 만들어 보자
그러면 HTML문서를 어떻게 만들까요?
그냥 메모장(notepad) 열고서 파일 저장 할 때 확장자를 html로 붙이면 됩니다.
(예) 파일이름.html
확장자가 뭐냐구요?
파일의 이름은 "파일이름.확장자"의 형태를 갖고 있습니다. 여기서 "." 뒤의 부분이 확장자입니다.
컴퓨터는 이 확장자를 보고서 파일의 종류를 처음 판단합니다.
(그래서 이걸 아무렇게나 막 바꾸면 파일 실행이 안 되죠.)
파일 확장자가 안보인다구요?
윈도우 설정이 컴맹한테는 확장자를 안 보여주게 되어있어서 그렇습니다.
(윈도우XP기준입니다만) 아무 폴더나 클릭해서 여시구요.
위의 메뉴 보시면 '도구'에 '폴더 옵션'이 있으니 클릭하세요.
상단의 '보기'탭을 클릭하시면 아래 내용의 중간보다 좀 더 아래쪽에 '알려진 파일 형식의 확장명 숨기기'가 체크되어있을겁니다.
이걸 체크를 풀어버리시고 확인 누르시면 보일겁니다.
확장자가 htm인 HTML문서는 뭐냐구요? 묻지마시고 그냥 html씁니다.
괜히 편하려고 이상한 짓 하지말고 많이 쓰는 걸로 가요 우리.
참고로 저도 HTML 등의 문서 작업 시에 그냥 메모장 씁니다.
나모나 Editplus 이런 거 다 필요없어요. 괜히 머리만 더 복잡해집니다. 쉽게 갑시다.
만일 HTML파일을 메모장으로 못 여시겠으면 아래와 같이 해보세요.
( HTML파일 우클릭 → 연결 프로그램 → 메모장(혹은 Notepad) )
* 만일 메모장이 목록에 없다면 '연결 프로그램'에서 찾으면 나옵니다.
#3. 태그란 무엇인가?
그럼 이제 태그에 대해서 설명해보겠습니다.
저희가 간혹 보는 <태그이름> 이렇게 써 있는 모양의 것들을 HTML에선 태그라고 부릅니다.
화살표 모양의 괄호<>를 표식으로 해서 특정한 명령들을 받아들이고 실행하는 것이죠.
웹페이지는 이 태그들을 순서대로 나열해서 만듭니다.
어떤 계산이나 원리가 필요한 것도 아니고 그냥 눈에 보이는 순서대로 위에서부터 쌓는 것이죠.
위에 보시는 것 처럼 두 개의 태그를 입력하니까 두 개가 순서대로 보여지는 것을 확인할 수 있습니다.
HTML 태그는 이렇게 순서대로 쓰면 순서대로 나옵니다. 이게 거의 전부입니다.
태그에 대한 기본 개념을 하나만 더 설명하겠습니다.
어떤 태그는 '열고' '닫는' 개념이 있습니다.
예를 들어 <태그이름></태그이름> 이런 구문이 있으면,
<태그이름> ← 이건 태그를 연 것이고
</태그이름> ← 이건 태그를 닫은 것입니다.
열고 닫는 태그는 일반적으로 그 사이에 있는 부분에 영향을 끼칩니다.
예를 들어서 <center>내용</center>라는 태그는
열고 닫는 사이의 내용을 페이지 한 가운데로 정렬 시킵니다. (가로방향)
(예)
<center>가운데 정렬 테스트</center>
| (결과)
가운데 정렬 테스트 |
다른 거 필요없이 태그가 무엇인지랑, 태그를 열고 닫는다는 말이 뭔지만 알면 이번 강의는 OK.
참 쉽죠? 이번 강의 너무 어려우면 댓글 주세요-_-; |
|
[PREV] [1] ... [34][35][36][37][38][39][40] ... [50] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|