* main *

* BBS *

* gallery *

* profile *

* link *



[카테고리]

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

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

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


[최근 댓글]

아니, 따로 공부한 건 아닌데 우리...
  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

성분 표시는 모든 성분을 다 표시하...
  by 아이어스
 
2019-07-24

ㄷㄷㄷㄷㄷ 성분표시에 낚이셨군요....
  by 아리무스
 
2019-07-24

hi hi
  by 아이어스
 
2019-05-17


추억의 상자


Category List admin  
강아지랑 송아지도 만들 수 있는 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에선 태그라고 부릅니다.
화살표 모양의 괄호<>를 표식으로 해서 특정한 명령들을 받아들이고 실행하는 것이죠.
웹페이지는 이 태그들을 순서대로 나열해서 만듭니다.
어떤 계산이나 원리가 필요한 것도 아니고 그냥 눈에 보이는 순서대로 위에서부터 쌓는 것이죠.


(예)
(예) 텍스트입력 창과 버튼 태그
<input type="text" size="50">
<input type="button" value="버튼">
(결과)



위에 보시는 것 처럼 두 개의 태그를 입력하니까 두 개가 순서대로 보여지는 것을 확인할 수 있습니다.
HTML 태그는 이렇게 순서대로 쓰면 순서대로 나옵니다. 이게 거의 전부입니다.



태그에 대한 기본 개념을 하나만 더 설명하겠습니다.
어떤 태그는 '열고' '닫는' 개념이 있습니다.

예를 들어 <태그이름></태그이름> 이런 구문이 있으면,
<태그이름> ← 이건 태그를 연 것이고
</태그이름> ← 이건 태그를 닫은 것입니다.

열고 닫는 태그는 일반적으로 그 사이에 있는 부분에 영향을 끼칩니다.
예를 들어서 <center>내용</center>라는 태그는
열고 닫는 사이의 내용을 페이지 한 가운데로 정렬 시킵니다. (가로방향)
(예)
<center>가운데 정렬 테스트</center>
(결과)
가운데 정렬 테스트


다른 거 필요없이 태그가 무엇인지랑, 태그를 열고 닫는다는 말이 뭔지만 알면 이번 강의는 OK.

참 쉽죠? 이번 강의 너무 어려우면 댓글 주세요-_-;        


2012-08-17 05:01:23 | [Comment(0)]




   ☆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