PDF 다운로드
PDF 다운로드
HTML은 Hyper Text Markup Language 의 역자이며, 웹사이트를 만드는 데 쓰이는 코드 또는 언어 이다. 코드를 작성해 본 적이 없다면, 처음 봤을 때 조금 두렵겠지만, 텍스트 편집 프로그램과 인터넷 브라우저만 있으면 작성할 수 있다. 온라인 포럼이나 프로필 등에서 HTML을 본 적이 있을 것이다. HTML은 인터넷 사용자라면 알아 두면 좋은 도구이며, 기본을 배우는데에는 그렇게 오래 걸리지 않는다.
단계
-
HTML 문서 열기. Notepad++이나, MS Word 같은 윈도우 프로그램이나, TextEdit같은 맥용 텍스트 편집 프로그램을 사용하면 HTML 문서를 작성할 수 있다. 파일 → 다른 이름으로 저장 클릭 후에 웹 페이지를 선택한다. 또는 확장자를 ".doc", ".rtf"나 다른 것들 대신에 ".html"이나 ".htm"으로 바꾼다.
- "rich text"에서 일반 텍스트로 바뀐다는 경고가 뜨는 경우나 편집 기능 일부를 사용할 수 없거나 이미지 저장이 제대로 되지 않을 것이라는 경고 메시지가 뜨는 경우가 있는데, 무시해 준다. HTML 문서는 그런 것을 사용하지 않는다.
- .html과 .htm 사이에는 차이가 없다. 둘 다 잘 작동한다.
-
인터넷 브라우저에서 문서를 열어 보자. 문서를 저장한 후에 문서 아이콘을 찾아서 더블 클릭하자. 브라우저에 빈 화면이 뜰 것이다. 그렇지 않다면, 파일 아이콘을 끌어다가 주소 창에 내려 놓는다. 이 글의 내용을 따라하면서 HTML을 배울 때 이 방법을 쓰면서 HTML이 정상 작동하는지 확인할 수 있다.
- 이 방법은 인터넷으로 접속 가능한 HTML 페이지를 만드는 것이다. 이 페이지는 다른 사람이 접속 불가능하다. 확인하는데 인터넷 접속이 필요하지도 않다. 그냥 브라우저가 HTML 문서를 읽고 표시하게 하는 것일 뿐이다.
-
태그를 이해하자. 태그는 일반 문자들처럼 화면에 표시되지 않는다. 그 대신, 태그들은 브라우저에게 어떻게 페이지를 표시해야 하는지 알려 준다. "시작 태그"가 그런 명령을 알려 준다. 예를 들어서, 브라우저에다가 어떤 텍스트를 굵게 표시하라고 명령하고 싶으면, 시작 태그를 추가해서 태그를 달아 주면 된다. 그리고 "마침 태그"를 이용해서 어디에서 명령을 마치면 되는지 보여 주면 된다. 이 경우에는 <b> 태그가 된다. 마침 태그의 경우에는 시작 부분에 슬래시(/)가 붙는다.
- 각 괄호(<>) 안에 태그를 쓴다. 예:
<시작 태그> - 마침 태그 역시 각 괄호를 쓰지만, 시작 부분 앞에 슬래시가 있어야 한다. :
</마침 태그>) - 어떤 태그가 있는지 알고 싶다면 글을 계속 읽어 보자. 지금은 < >, </ > 사이에 태그가 들어간다는 것만 알면 된다.
- 다른 HTML 글에서는 태그를 요소(element)라고 하기도 한다. 또한 태그들 사이에 있는 애용을 "요소의 내용(element content)"라고 한다.
- 각 괄호(<>) 안에 태그를 쓴다. 예:
-
첫 <html> 태그를 작성하자. 모든 HTML 문서는
<html>로 시작해</html>로 마친다. 이렇게 하면 브라우저에게 이 태그들 사이에 있는 것은 전부 HTML이라는 것을 알릴 수 있다.- 대부분, HTML 파일은
<!DOCTYPE html>라인으로 시작한다. 이는, 브라우저에서 해당 파일 전체는 HTML으로 읽힌다는 것을 뜻한다. 꼭 필요한 건 아니지만 이렇게 함으로써 호환성 문제를 해결할 수 있다. - <html> 을 맨 위에 적자.
- enter 나 return 을 눌러서 공간을 띄운 다음에 </html> 을 적자.
- 모든 내용은 이 두 태그 사이에 들어가야 한다는 점을 잊지 말자.
- 대부분, HTML 파일은
-
<head> 부분을 채우자. <html>과 </html> 태그 사이에는 <head> 태그와 </head> 태그가 들어가야 한다. 이 둘 사이에도 공간을 주자. 이 두 태그 사이에 들어간 내용은 페이지에 나타나지는 않는다.
- <head>와 </head> 사이에 <title> 과 </title> 을 넣자.
- <title>과 </title> 사이에 HTML 공부 - wikiHow 라고 적자.
- 문서를 저장한 후에 브라우저를 이용해서 열어 보자. (또는 문서를 열어 놓은 상태라면, 저장한 후 새로고침을 해 보자.) 웹 페이지 제목 창에 자신이 적어 놓은 제목이 보이는지 확인해 보자.
-
<body> 부분을 작성하자. 이 글에서 배우는 나머지 부분은 전부 body 부분에 들어가게 될 것이다. 이 부분은 화면에 표시되는 부분이다. </head> 태그 뒤 그리고 </html> 태그 앞에 <body> 와 </body> 태그를 넣어 주자. 이제 문서는 다음과 같은 모양이 되었을 것이다. (점들은 무시하자.)
- <html>
- <head>
- <title>How to Learn HTML - wikiHow</title>
- </head>
- <body>
- </body>
- </html>
-
여러 가지 스타일의 텍스트를 추가해 주자. 브라우저 화면에 나타나는 것을 적어 볼 시간이다! body 태그 사이에 들어가는 내용은 문서를 저장한 후, 새로고침을 하면 브라우저에 나타나게 된다. 하지만 이 때에도 < 과 > 사이에 내용을 적으면 브라우저가 태그로 인식해서 아무 것도 보이지 않게 된다. Hello world! (또는 원하는 문구)를 입력해 보도록 하자. 새로운 태그를 입력해서 어떤 변화가 생기는지도 살펴 보자.
- 강조된 텍스트:
<em>Hello world!</em>-> Hello world! - 굵은 텍스트:
<strong>Hello world!</strong>-> Hello world! - 취소선이 그어진 텍스트:
<s>Hello world!</s>->Hello world! - 윗첨자로 표시된 텍스트:
<sup>Hello world!</sup>-> Hello world! - 아래첨자로 표시된 텍스트:
<sub>Hello world!</sub>-> Hello world! - 섞어 보자.
<em><strong>Hello world!</strong></em>는 무슨 코드가 될까?
- 강조된 텍스트:
-
문단을 표시해 보자. 여러 줄로 된 글을 적을 때, HTML 문서 상에서는 다른 줄로 나와도, 화면에서는 한 줄로 나오는 것을 볼 수 있을 것이다. 어떻게 문단을 표시하는지 배워 보자.
-
<p>문단입니다</p> -
이 줄 다음에 엔터를 눌러서 줄을 바꾸었습니다.<br>잘 바뀌었군요.
<br>의 경우에는 마침 태그가 필요 없다. 이런 태그를 "빈 태그"라고 부른다. - 소제목을 만들어 보자. 문단의 소제목을 표시하려면 h로 시작하는 태그를 쓰면 된다.
<h1>header text</h1>: 제일 큰 소제목
<h2>header text</h2>(2번째 소제목)
<h3>header text</h3>(3번째 소제목)
<h4>header text</h4>(4번째 소제목)
<h5>header text</h5>(5번째 소제목)
-
-
목록을 만드는 법을 알아 보자. 목록을 만드는 법은 여러 가지가 있다. 다음 방법들을 시도해 보고, 좋아하는 방법을 사용하자. 목록을 감싸는 태그는 <ul>, </ul>(ul은 unordered list(정렬되지 않은 목록)의 약자)이며, 각 항목은 <li>, </li>로 감싸야 한다.
- 점 목록 코드:
<ul><li>One item</li><li>Another item</li><li>Another item</li></ul> - 숫자 목록 코드:
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol> - 내용 정의 코드:
<dl><dt>커피</dt><dd>- 뜨거운 음료</dd><dt>콜라</dt><dd>- 차가운 음료</dd></dl>
- 점 목록 코드:
-
링크 걸기. 다른 페이지나 웹사이트의 링크를 걸 수 있다. 하지만, 웹사이트가 현재 없는 관계로 a 태그를 이용해서 문서의 다른 곳에 링크를 거는 법을 알아 보려고 한다.
- <a> 태그를 이용해서 이동할 지점을 만들어 보자. 보면 알 수 있는 이름을 짓고,
<a name="Tips">a 태그 내용</a>같이 코드를 작성해 주자. - href를 이용해서 내부 위치나 다른 사이트에 링크를 걸어 보자.
<a href="페이지 url 또는 페이지에 있는 위치">링크로 표현할 텍스트나 이미지</a> - a 태그가 있는 곳에 링크를 걸고 싶다면, # 표시를 url에 넣은 후에 anchor의 이름을 적어 주자. 예를 들면, http://www.wikihow.com/Learn-HTML#Tips 링크를 누르면 이 글의 영문판의 팁 부분으로 이동하게 된다.
광고 - <a> 태그를 이용해서 이동할 지점을 만들어 보자. 보면 알 수 있는 이름을 짓고,
-
특성에 대해 배워 두자. 특성이란 태그 안에 들어가는 정보를 의미한다. 이 정보를 이용해서 시작 및 마침 태그 안에 들어가는 내용에 대한 추가 정보를 줄 수 있다. 특성들은 절대 혼자서 쓰이지 않는다. 특성은 이름=값 형태를 가지고 있으며 이름 에는 특성의 이름(예, color(색깔)), 값 에는 원하는 설정이 들어간다(예: red(빨강색)).
- 사실 특성을 배우고 지나갔다. 설명만 안 했을 뿐이다. <img> 태그는 src 특성을 쓴다. 링크에는 href 특성이 있다.
-
HTML 표를 사용해 보자. 표를 만들려면, 여러 태그가 필요하다. 다음 태그들을 이용해 표를 만들어 보자.
- 표의 시작과 끝:
<table></table> - 열의 시작과 끝:
<tr> - 첫번째 열의 제목을 달기 위한 태그:
<th> - 열의 각 칸:
<td> - 전체 예:
<table><tr><th>Column 1: Month</th><th>Column 2: Money Saved</th></tr><tr><td>January</td><td>$100</td></tr></table>
- 표의 시작과 끝:
-
head 태그 안에 들어가는 기타 태그들을 배워 보자. 문서 시작 부분에 들어가는 head 태그에 대해 배웠다. 이제 title 태그 외에 사용할 수 있는 다른 태그들을 배워 보자.
- 메타 태그를 달아 보자. <meta>를 이용하면 페이지에 대한 정보를 추가해 줄 수 있다. 이 정보는 검색 엔진 로봇들이 웹을 수집할 때 사용된다. 검색 엔진에 노출이 더 많이 되기 위해서는 이 태그를 사용하면 된다. name 특성과 content 특성이 하나씩만 들어가야 한다. 예: <meta name="description" content="설명 기록">; or <meta name="keywords" content="쉼표로 분리된 키워드 목록">
- <link>를 이용하면 파일들을 연결할 수 있다. 이 태그는 주로 CSS 파일을 추가하기 위해 쓰인다. CSS 파일에는 HTML 페이지의 모습을 변경시키는 스타일 코드가 들어간다.
- <script> 태그를 이용해서 JavaScript 파일을 추가해 줄 수 있다. 사용자와 상호 작용하는 페이지를 만들려면 필수다.
-
웹사이트들에서 찾을 수 있는 HTML 파일들을 가지고 놀아 보자. HTML에 대한 지식을 넓힐 수 있는 방법은 다른 페이지들을 보는 것이다. 페이지에서 마우스 오른쪽 클릭 후 "소스 보기"를 클릭한다. 또는 "보기" 메뉴 아래 있는 메뉴를 골라도 된다. 못 보던 HTML 태그를 확인해 보자. 그리고 검색해 보자.
- 다른 사람의 웹사이트를 수정할 수는 없지만, HTML을 복사한 후에 바꾸어 볼 수 있다. CSS 링크가 제대로 연결이 되지 않을 경우, 색이나 정렬 등은 유지되지 않는다.
-
다른 글을 통해서 웹 디자인에 대해서 더 많이 배워보자. 인터넷에는 W3Schools , Codecademy 처럼 HTML을 배울 수 있는 곳이 많다. 책들도 많다. 하지만 최근 몇 년 내로 출판된 책을 고르도록 하자. 계속 바뀌고 있기 때문이다. 또한 CSS를 배워서 웹 페이지 레이아웃이나 겉모습을 바꾸어 보자. CSS를 배운 후에는 대개 JavaScript를 다루게 된다.광고
팁
- 인터넷에 있는 간단한 웹 페이지들을 찾아서 가지고 놀아 보자. 텍스트를 움직여 보고, 폰트, 이미지나 기타 등등 원하는대로 바꾸어 보자.
- Notepad++은 괜찮은 무료 프로그램이다. 메모장이랑 비슷하게 생겼지만, 저장하고 바로 브라우저에서 테스트 해 볼 수 있다. HTML, CSS, 파이썬, Javascript 등 거의 모든 프로그래밍 언어를 지원하는 것도 장점이다.
- XML과 RSS가 점점 더 흔히 쓰이고 있다. 사람이 읽기 어려운 구조로 되어 있지만(특히 HTML 사이에 들어간 경우), 각각의 장점이 있다.
- 코드를 작성할 때, 코드를 제대로 정렬하자. 그래야 자신이나 다른 사람이 읽기 쉽다. <!-- 주석 내용 --> 같은 형식을 이용해서 주석을 달자. 이 부분은 코드에는 있지만, 화면에는 나오지 않는다.
- 공책에 코드를 전부 적는 스타일이라면, 나중에 코드를 작성할 때 공책을 열어 놓고 보면서 하자. 또는 지금 읽고 있는 페이지를 인쇄해 놓고 해도 된다.
- HTML 태그에서는 대소문자 구별이 없다. 하지만 이 페이지에서 쓴 것처럼 소문자만 쓰는 것을 추천한다. 표준에도 맞고, XHTML과도 호환되기 때문이다. [1] X 출처 검색하기
광고
경고
- 몇몇 태그의 경우에는 지난 몇 년 새 폐지되었고, 같은 효과를 내는 다른 태그로 변경되었다. 또한 다른 느낌을 내는 태그로 바꾸어 줄 수 있다.
- 태그가 제대로 쓰였는지 확인하고 싶다면, W3 웹사이트에 가서 유효한 HTML이 무엇인지 배워 놓자. HTML 표준은 계속 바뀌고, 태그는 계속해서 다른 태그로 바뀌고 있다.
광고
필요한 것들
- 텍스트 편집기: 메모장(윈도우), TextEdit(맥), 등
- 종이 또는 공책 (선택 사항)
- HTML 편집 프로그램: Notepad++(윈도우), TextWrangler(맥) (선택 사항)
이 위키하우에 대하여
이 문서는 11,272 번 조회 되었습니다.
광고
