이 글은 편집 검토가 필요합니다. 도울을 줄 수 있는 방법을 살펴보세요.
Hypertext Markup Language (HTML) 는 웹 컨텐트를 조직화 하고, 그것에 의미와 목적을 주기 위해 사용하는 코드입니다. 예를 들면, 여러분의 컨텐트는 여러 개의 문단, 또는 중요 항목의 리스트를 포함할 수 있습니다. 또는 사진이나 자료 테이블을 포함할 수도 있습니다. 여러분이 어렵지 않도록, HTML 기본 은 HTML에 익숙해질 수 있도록 충분한 정보를 제공할 것입니다.
그래서 HTML이 정말 무엇일까요?
HTML 은 진짜 프로그래밍 언어가 아닙니다; 이것은 웹사이트의 구조나 의미를 주기 위한 내용을 주기 위해 사용되는 마크업 언어입니다. 이것은 특정한 일이나 역할을 하는 컨텐트의 각 부분을 감싸는 연속적인 엘리먼트 로 구성되어 있습니다. 예를 들면, 다음 컨텐트에 대해서:
My cat is very grumpy
만약 우리가 이것이 문단이라고 구체화하길 원한다면, 이 문단을 (<p>) 엘리먼트로 감싸면 됩니다:
<p>My cat is very grumpy</p>
HTML 요소 분석
이 문단 요소에 대해 조금 더 탐구해봅시다.
이 요소의 주요 부분은 이렇습니다:
- 여는 태그 (Opening tag): 이것은 엘리먼트의 이름으로 구성되고 (여기에서는, p), 열고 닫는 꺾쇠괄호로 감싸집니다. 이것은 엘리먼트를 시작하는 곳, 또는 효과를 시작하는 곳을 나타냅니다 — 이 예제에서는 문단이 시작하는 위치를 나타냅니다.
- 닫는 태그 (closing tag): 이것은 여는 태그와 같지만, 엘리먼트의 이름 앞에 슬래시가 포함된다는 점이 다릅니다. 이것은 엘리먼트의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다.
- 내용 (content): 이것은 엘리먼트의 컨텐트이고, 이 예제에서는 그냥 문자입니다.
- 요소 (element): 여는 태그 + 닫는 태그 + 컨텐트는 엘리먼트와 같습니다.
요소들은 속성들도 가질 수 있고, 다음과 같이 사용합니다:
속성은 엘리먼트에 대해 실제 컨텐트에 나타나길 원하지 않는 추가적인 정보를 포함합니다. 이 예제에서, 클래스 속성은 나중에 여러분이 스타일 정보 등으로 이 엘리먼트를 지정할 수 있도록 엘리먼트에게 이름을 지정해 줍니다.
속성이 항상 가져야 하는 것:
- 엘리먼트 이름과 속성 사이에 공백 (또는 이 전의 속성, 만약 엘리먼트가 이미 하나 또는 여러 개의 속성을 가진다면)
- = 표시가 따라오는 속성 이름
- 속성 값을 감싸는 열고 닫는 따옴표
요소 중첩
여러분은 요소를 다른 앨리먼트의 안에 놓을 수도 있습니다 — 이것을 중첩이라고 부릅니다. 만약 우리가 우리 고양이가 아주 까다롭다고 나타내길 원한다면, "아주"를 강하게 강조해 주는 <strong> 엘리먼트로 감싸면 됩니다:
<p>My cat is <strong>very</strong> grumpy.</p>
하지만 여러분은 엘리먼트가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 <p> 엘리먼트를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 엘리먼트를 먼저 닫고, 다음으로 p를 닫아야 합니다. 이것은 잘못된 예제 입니다:
<p>My cat is <strong>very grumpy.</p></strong>
엘리먼트들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 할 것입니다, 하지만 예상치 못한 결과를 얻을수도 있습니다. 그러니까 이렇게 하지 마세요!
빈 요소
어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소라고 합니다. <img> 요소는 이미 우리 HTML 코드에 있습니다.
<img src="images/firefox-icon.png" alt="My test image">
이것은 두 개의 속성을 포함하는데, 닫는 </img> 태그가 없습니다. 이미지 엘리먼트는 효과를 주기 위해 컨텐트를 감싸지 않기 때문입니다. 그 목적은 HTML 페이지에서 이미지가 나타나는 위치에 끼워 넣기 위해서 입니다.
HTML 문서 분석
각각의 HTML 엘리먼트의 기본들은 끝냈지만, 그것만으로는 아주 유용하지 않습니다. 이제 어떻게 각각의 엘리먼트들이 전체 HTML 페이지로 결합되었는지 보게 될 것입니다. index.html 예제 코드(파일들 다루기 편에서 처음 봤던)로 다시 가 봅시다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
살펴볼 것들:
<!DOCTYPE html>— doctype. 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 HTML 페이지가 좋은 HTML, 자동 에러 검사와 여러 유용한 것들을 의미하는, 로 여겨지기 위해 따라야 할 규칙들의 집합으로 연결되는 연결로를 의미했습니다. 하지만, 최근에는 아무도 그런것들에 대해 신경쓰지않습니다, 그리고 그것들은 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.<html></html>—<html>엘리먼트. 이 엘리먼트는 전체 페이지이의 모든 컨텐트를 감싸고, 루트 엘리먼트로 알려져 있습니다.<head></head>—<head>엘리먼트. 이 엘리먼트는 HTML 페이지에 포함되길 원하는 페이지 방문자에게 보여주고 있는 컨텐트가 아닌 모든 것들을 위한 컨테이너로써 작동합니다. 이것은 키워드와 검색 결과로 보여지길 원하는 페이지 설명, 컨텐트를 꾸미기 위한 CSS, 문자 집합, 선언 등과 같은 것들을 포함합니다.<body></body>—<body>엘리먼트. 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 포함합니다. 문자, 이미지, 비디오, 게임, 실행 가능한 음성, 또는 그 외 등등.<meta charset="utf-8">— 이 엘리먼트는 여러분의 문서가 사용해야하는 문자 집합을 utf-8, 인간의 언어로 알려진 매우 많은 대부분의 문자를 포함한, 로 설정합니다. 기본적으로 여러분이 사용할 수 있는 어떠한 문자적인 컨텐트를 다룰 수 있습니다. 이것을 설정하지 않을 이유가 없고, 나중에 발생할 문제를 피할 수 있게 도와줄 수도 있습니다.<title></title>— 이것은 페이지가 불려질 때 브라우저 탭에 나타나는 제목을 설정하고, 북마크 할 때 페이지를 설명하기 위해 사용되기도 합니다.
이미지
이미지 요소를 살펴봅시다:
<img src="images/firefox-icon.png" alt="My test image">
앞서 말해드렸듯이, 이것은 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 src (source) 를 통해 이러한 일을 합니다.
하지만 우리는 alt (alternative) 엘리먼트도 갖고 있습니다 — 이것은 이미지를 볼 수 없는 사용자들도 접근 가능하도록 이미지를 설명할 수 있는 어떤 문자를 포함합니다. 이미지를 볼 수 없는 이유는 아마도:
- 그들은 시각장애인입니다. 시각 장애를 가진 사용자들은 그들에게 alt 문자를 읽어주는 스크린 리더라는 도구를 종종 사용합니다.
- 코드에 무언가 잘못되어서 이미지를 표시할 수 없습니다. 예를 들면, src 속성안의 경로를 일부러 틀리게 변경해보세요. 저장하고 페이지를 다시 불러오면, 여러분은 이미지의 위치에 이와 같은 것을 보게 될 것입니다.
alt 문자에 대한 주요어는 "설명적인 문자" 입니다. 여러분이 작성하는 alt 문자는 독자에게 이미지가 무엇을 보여주는지 충분히 알려 줄 수 있어야 합니다. 그러므로 현재 문자인 "My test image" 는 완전히 좋지 않습니다. 파이어폭스 로고를 위한 훨씬 나은 문자는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우" 가 될 수 있을 것입니다.
지금 여러분의 이미지를 위한 더 나은 alt 문자를 만들어보세요.
노트: 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.
문자 나타내기
여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.
제목
제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, <h1>–<h6> 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:
<h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4>
지금 한번 해보세요, 여러분의 HTML 페이지에 있는 <img> 요소 위에 적당한 제목을 추가합시다.
문단
위에서 설명했듯이, <p> 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:
<p>This is a single paragraph</p>
간단한 문자 (웹사이트의 외관은 어떻게 할까요? 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, <img> 요소 바로 아래 둡시다.
목록
많은 웹의 내용은 목록이기 때문에, HTML 은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.
- 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다.
<ul>요소로 둘러 쌓여 있습니다. - 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다.
<ol>요소로 둘러 쌓여 있습니다.
목록의 각 항목은 <li> (목록 항목) 요소 안에 놓여야 합니다.
그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
이렇게 해볼 수 있습니다:
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.
연결
연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — <a> — a 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:
- 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
- 문자를 <a> 요소로 감쌉니다, 이렇게요:
<a>Mozilla Manifesto</a>
- <a> 요소에 href 속성을 줍니다, 이렇게요:
<a href="">Mozilla Manifesto</a>
- 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
만약 웹 주소의 시작부분에 프로토콜이라 불리는 https:// 또는 https:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.
처음에는 href 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 hypertext reference 를 나타낸다는 것을 기억하세요.
아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.
마무리
이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (여기서 확인할 수도 있습니다):
혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.
여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 많은 것이 필요하시면, HTML 배우기 페이지로 가보세요.