|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조 |
#1. HTML문서의 기본 구조
앞에서도 이야기 했지만 HTML문서는 태그의 나열로 이루어집니다.
기본적으로는 마음대로 순서를 정해서 쌓으면 되지만,
HTML문서 전체의 기본 구조가 단 한가지 존재합니다. 아래를 보시죠.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
처음 나온 소스인데 겁먹지 말고 침착하게 보세요.
우선 앞에 빈 공백이 있는 것들은 '보기 쉽게' 표현하기 위한 공백입니다.
이렇게 되어있을 때보면 '내용'만 안으로 들어가있죠?
body태그의 사이에 내용이 들어가있다는 것을 직관적으로 보여주기 위함입니다.
앞의 공백은 없어도 됩니다. 아무 의미도 없죠. 단지 내용이 많아지면 헷갈리니까 저렇게 하는 것입니다.
저 공백은 실재로도 저렇게 사용하며 파일이 실행되는데 아무 문제도 없습니다.
공백을 넣는 방법은 메모장 기준으로 키보드의 'tab'키를 누르는 것입니다.
내용으로 돌아가죠. 다시 한 번 쓰겠습니다.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
모든 HTML문서는 이 기본 구조를 갖습니다. 물론 우리가 직접 손으로 쳐줘야합니다.
가장 바깥에는 html태그가 열리고 닫혀있는데, 그 안의 내용이 HTML이란 것을 뜻합니다.
그 안에 보면 head태그가 열리고 닫혔고, 다시 body태그가 열리고 닫혔습니다.
head태그는 그 안에 웹페이지의 설정이 들어갑니다.
일반적으로 이 부분은 웹브라우져에서는 보여지지 않습니다. 하지만 아래의 body태그에 들어가는 내용에 영향을 미치죠.
body태그는 그 안에 저희가 실재로 눈으로 보는 내용이 들어갑니다.
저희가 앞으로 태그와 내용을 쓰면서 상자쌓기 놀이를 할 부분이 바로 여기입니다.
이 기본 구조는 사실 생략해도 되는 부분이 많지만, 특별한 이유가 없는 한 그러지마세요.
태그 또한 마찬가지인데 열었다가 닫지 않아도 문제가 없는 태그도 많습니다. 대표적으로 방금 본 html태그도 그렇죠.
하지만 이건 아주 안 좋은 습관입니다. 웹브라우져의 종류에 따라서는 문제가 생길 수도 있고,
내용이 길어질 경우에는 닫지 않은 태그 때문에 전체 내용이 오작동 할 수도 있습니다.
만약에 앞으로 작업을 하시다가 별거 안 했는데 페이지 전체, 혹은 일부가 아예 안 보이는 등의 문제가 생기면
십중팔구는 무언가를 열었다가 안 닫았을 경우일 것입니다.
#2. 태그 사용 시 주의사항
끝내기 전에 태그의 사용법에 대해서 간단히 주의사항을 알아봅시다.
위에서 보셨듯이 태그 안에 태그가 들어갈 수 있다는 것을 아셨을 겁니다. 이것은 얼마든지 가능합니다.
태그 안에 태그 안에 태그 안에... 태그가 있어도 되죠.
하지만 이렇게 쓰시면 안됩니다. 아래의 예를 보시죠.
(예)
<태그1><태그2></태그1></태그2> |
이렇게 태그가 서로 교차되면 안됩니다. 반드시 열고 닫힌 태그 안에 열고 닫힌 태그가 있어야합니다. 아래처럼요.
(예)
<태그1><태그2></태그2></태그1>
|
이건 틀리면 안 되는 부분이니 주의하세요.
이번에는 여기까지만 하죠.
앞으로 body태그 안에서 작업을 할 거라는 것만 알아두시면 OK.
특별한 언급이 없는 한 그냥 body태그 안에서 작업한다고 생각하세요.
물론 위의 기본 형태는 항상 잡아주셔야합니다.
(설마 '설정'이나 '내용'이라는 글자까지 그대로 쓰시지는 않겠죠?)
여기까지 보셨으면 HTML에 대해서 이해하는 것에 아무 문제 없을 겁니다. 참 쉽죠?
다음부터는 이제 안 봐주고 본격적으로 진도 나갑니다.
|
|
| 강아지랑 송아지도 만들 수 있는 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.
참 쉽죠? 이번 강의 너무 어려우면 댓글 주세요-_-;
|
|
| 강아지랑 송아지도 만들 수 있는 홈페이지 강좌 - 인트로 |
사실 블로그조차 SNS에 위협을 받는 시대인데 손으로 만드는 홈페이지의 시대는 이미 사라졌죠.
하지만 블로그이건 SNS이건 모두 홈페이지와 마찬가지로 사람이 손으로 만든 프로그램이라는 것에는 변함이 없습니다.
저처럼 직접 홈페이지를 만들고서 관리하는 것을 좋아하는 분이 계실 수도 있고,
취미이든 관심이든 한번쯤은 알아보고 싶다는 분이 계실 수도 있고,
무엇보다 모처럼 만든 카테고리의 내용을 적당히 채우기 위해서
앞으로 '강아지랑 송아지도 만들 수 있는 홈페이지' 기획연재를 할까 합니다.
제목처럼 강아지랑 송아지는 물론 고양이도 만들 수 있는 홈페이지 강의이기 때문에
체계적인 어떤 강의를 할 생각은 없습니다. 홈페이지를 만들 때 필요한 최소한의 지식, 하지만 강력한 지식만을. 조금이라도 필요없는건 가차없이 다 빼버린 내용만 올릴 것입니다. 아마 연재가 그리 길지도 않겠죠.
처음 접하시는 분들에겐 그래도 생소한 내용이겠지만,
알고보면 웹프로그래밍의 입문은 정말 쉽습니다. 취미선에서는 말이죠.
저 또한 웹프로그래밍을 정식으로 배운 적은 없는데요 뭐.
혹여 체계적으로 더 공부를 하고 싶으신 분은 책을 사서 공부하시는 것을 추천드립니다.
그리고 웹에도 좋은 사이트가 많이 있습니다. 블로그 같은 강의 올리는 사이트 말구요.
해당 언어의 웹표준에 대한 설명이 들어있는 공식/비공식 사이트가 다 있답니다.
이런 곳에서 찾는 게 가장 정확하죠.
더불어서 질문은 웬만하면 하지마세요. 어차피 저도 취미수준이라 잘 모릅니다.
질문을 하시고 싶으신 분은 PHP스쿨 같은데서 검색하거나 질문하시기 바랍니다.
아무튼 앞으로 잘 부탁드립니다.
|
|
[PREV] [1] ... [276][277][278][279][280][281][282] ... [379] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|