* main *

* BBS *

* gallery *

* profile *

* link *



[카테고리]

* 음악 *
* 잡담 *
* SOOL *
* 물건들 *
* 이런저런 추억 *
* 책 이야기 *
* 여행의 추억 *

* 잡다한 고찰 *
* 컴퓨터 관련 *
* 이런저런 메모 *
* 공지사항 *

* 추억의 게임 *
* 추억의 애니 *
* 만화책 이야기 *
* 미드 이야기 *
* 매직 더 개더링 *


[최근 댓글]

// 아리무스님살면서 느끼는 건데 ...
  by 아이어스
 
2019-11-10

앉는 자세가 매우 중요하죠....
  by perplex
 
2019-11-10

으음 제가 요새 미묘하게 허리가 아...
  by 아리무스
 
2019-11-09

아니, 따로 공부한 건 아닌데 우리...
  by 아이어스
 
2019-09-22

우와 놀랍네요! 혹시 이런 쪽으로 ...
  by perplex
 
2019-09-21

야외 운동의 단점이 기후의 영향을 ...
  by 아이어스
 
2019-09-08

오호 저에게도 도움이 되는 글이군...
  by 아리무스
 
2019-09-07

일립티컬이 정말 좋더라.모바일 스...
  by 아이어스
 
2019-09-06

오 역시 일립티칼을 써야 하는 군요...
  by perplex
 
2019-09-05

사실 기구가 좋긴 한데, 흠. 처음에...
  by 아이어스
 
2019-09-04

어이쿠!! 감사합니다. 일단 글 긁어...
  by perplex
 
2019-09-04

그랬구나... 우리나라는 약사 등 의...
  by 아이어스
 
2019-08-27

헉...;;; 네...쓴 경험으로 배우신 ...
  by perplex
 
2019-08-26

사실 레몬과 식초까지 다 해봤는데 ...
  by 아이어스
 
2019-07-26

생선요리 비린내에는 팬에 가루녹차...
  by 나무늼
 
2019-07-26


추억의 상자


Category List admin  
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조
 

#1. HTML문서의 기본 구조

앞에서도 이야기 했지만 HTML문서는 태그의 나열로 이루어집니다.
기본적으로는 마음대로 순서를 정해서 쌓으면 되지만,
HTML문서 전체의 기본 구조가 단 한가지 존재합니다. 아래를 보시죠.

(예)
<html>
       <head>
              설정
       </head>
       <body>
              내용
       </body>
</html>


처음 나온 소스인데 겁먹지 말고 침착하게 보세요.
우선 앞에 빈 공백이 있는 것들은 '보기 쉽게' 표현하기 위한 공백입니다.
(예)
<body>
       내용
</body>

이렇게 되어있을 때보면 '내용'만 안으로 들어가있죠?
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에 대해서 이해하는 것에 아무 문제 없을 겁니다. 참 쉽죠?
다음부터는 이제 안 봐주고 본격적으로 진도 나갑니다.


2012-08-17 05:08:00 | [Comment(2)]




   ☆computer

컴퓨터를 포맷했습니다-_-;  2014-01-21
SNS 플러그인 설치  2012-09-12
[JAVA SCRIPT] getElementById()  2012-09-05
[HTML] link 태그 숏 컷 아이콘 지정  2012-09-03
SEO - 검색엔진최적화  2012-08-22
강아지랑 송아지도 만들 수 있는 CSS 강좌  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 08편 : 그 외   2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 07편 : 폼  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 06편 : 메타 태그  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 05편 : 프레임  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 04편 : 테이블  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 03편 : 글자쓰기와 이미지 출력, 하이퍼링크  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조  2012-08-17
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?  2012-08-17
강아지랑 송아지도 만들 수 있는 홈페이지 강좌 - 인트로  2012-08-17
Chrome 브라우저 등에서의 style.display 속성문제  2012-08-07
사이트맵을 만들어보자  2012-07-31
robots.txt  2012-07-31
[JAVA SCRIPT] 코멘트 창 불러오기  2012-07-31
[mySQL] select로 검색  2012-07-31
[PHP] 따옴표 사용 문제  2012-07-31
[PHP] 정규표현식으로 깨진 문자 없애기  2012-07-31
[HTML] <nobr></nobr>  2012-07-31
컴퓨터 관련된 게시물을 정리하려고 합니다.  2012-07-31








猫愛 - MyoAe - Homepage Mode
Ver. 1.45

by Aierse