|
http://www.hackerschool.org/HS_Boards/zboard.php?id=Free_Lectures&no=1395 [복사]
/* 강의를 써보는 것은 이게 처음이네요... 뭐 어떤식으로 써야 할지는 모르지만, 배운 내용을 복습하는 차원으로 그냥 한번 써봅니다. */
1. HTML 이란?
HyperText Markup Language의 약자로서, 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다. - 네이버 백과사전 참조
2. HTML 기초
예제(1)
<html> - html소스라는 것을 알림과 시작
<head> - 머리 부분의 시작을 알림
<title>Hello, HTML!</title> - 머리 부분안에 제목 태그를 시작과 종료
</head> - 머리 부분의 종료를 알림
<body> - 몸체 부분의 시작을 알림
<h1>What is HTML?</h1> - 몸체안의 부제목 태그를 시작과 종료
<p>HyperText Markup Language</p> - 문단의 시작과 종료
</body> - 몸체 부분의 종료를 알림
</html> - html소스 종료
위를 보시면 아주 간단한 HTML소스가 있습니다. 이 HTML소스를 보시면 각이 진 괄호( < > )들이 많이 보일텐데, 이것을 태그라고 부릅니다. 태그는 많은 기능을 하는데 태그 중, 대표적인 것이 <html>,<head>,
<title>,<body> 입니다. 이 태그들은 html 소스내의 구조를 잡아주는 역할을 하기에 아주 중요한 요소라고 볼 수 있습니다. <html>은 이 소스코드가 html이라는 것을 알리고 시작을 위한 표시의 역할을 합니다. <head>는 머리 부분의 시작을 알리는 태그입니다. 해커스쿨에 접속하여 제목표시줄을 보면 "+해커스쿨 커뮤니티+ by HACKERSCHOOL.org"를 볼 수 있습니다. 이게 html소스의 <head>부분 입니다. 그러므로 Hello,HTML!이라는 문장은 <head>부분 이므로 웹을 생성한다면 제목표시줄에 표시가 되겠죠. 그러나 <head>부분만을 선언해서는 안되고, <title>이라는 태그도 선언하여야 합니다. <title>을 선언하지 않게된다면, 제목은 없고 대신해서 만약 XP를 사용한다면 Internet Explorer만 표시가 될 것입니다. 중요한 내용이니 꼭 알아두시길 바랍니다.
그리고 <body>도 구조를 잡아주는 중요한 역할에 한 몫을 합니다. <body>는 웹에 표시될 내용을 담고 있는 태그입니다. <body>안의 내용에는 <h1>과 <p>라는 것이 존재하는데, 여기서 h는 heading(제목)을, p는 paragraph(문단)이라고 해석하시면 됩니다. 즉 이 정의와 같이 각각의 역할을 수행합니다. <h1>은 제목1을 뜻하며 <h*>(*는 1부터 6까지의 자연수)부제목을 여러개의 숫자로 h뒤에 붙여서 표현할 수 있는데 숫자가 커질수록 글꼴의 크기는 작아집니다. 또 <p>는 문단으로서, 웹에 평범한 문단을 출력하는 기능을 합니다.
예제 (2)
<html>
<head>
<title>Hello, HTML!</title>
</head>
<body>
<h1>What is HTML?</h1>
<p>HyperText Markup Language</p>
<h1>What is HTML?</h1>
<p>
HyperText Markup Language
</p>
<h2>What is HTML?</h2>
<p>HyperText Markup Language</p>
</body>
</html>
예제1의 소스보다 훨씬 복잡해 졌습니다. 하지만 전혀 어렵지 않습니다. 태그는 꼭 한 줄에만 위치 하여야 하는 것이 아니고 같은 줄에 있던 다른 줄에 있던 상관은 없습니다. 다만, 종료태그를 꼭 뒤에 붙여주어야 한다는 것입니다.(예외도 있습니다.)
*종료 태그란?
</p>와 같이 태그안에 '/'가 앞에 붙는 태그를 뜻합니다. 이것은 한 태그를 끝낸다는 표시로 <p>와 </p>를 '매치 태그' 라고 합니다.
* 엘리먼트란?
엘리먼트는 세가지로 이루어집니다. 시작태그와 내용그리고 종료태그. 이 말은
<p>HyperText Markup Language</p> 를 예로 들자면 <p>,HyperText Markup Language,</p>로 나누어집니다. 이 세가지를 통틀어 줄여 엘리먼트라고 줄여 부르는 것입니다.
마지막으로 <h2>라는 태그가 있습니다. 새로운게 아닙니다. 단지 h뒤에 2를 붙여주었을 뿐입니다. <h>는 부제목으로서 뒤에 붙은 숫자가 커질수록 웹에 표시되는 글자가 작아진다고 하였죠.
3. 연습문제
<html>
<head>
<title>Who am I</title>
</head>
<body>
<h1>What is your name?</h1>
<p>xxx</p>
<h1>How old are you?</h1>
<p>
xx
</p>
<h2>Where do you live?</h2>
<p>xxx</p>
</body>
</html>
그냥 만들어 보았습니다. 한번 분석해보세요! 이상으로 허접한 강의 였습니다.
|
Hit : 6493 Date : 2010/02/18 12:50
|
1606, 
9/81 
별빛을담아
CodeAche
