HTML Tag
HTML은 태그로 이루어진 명령어들로 구성되어 있으며 각각의 태그는 웹페이지의 디자인이나 기능을 결정하는데 사용된다.
태그는 <태그 이름> 으로 시작하고 </태그 이름>으로 종료한다.
하지만 모든 태그가 종료 태그가 필요 한 부분은 아니며 시작 태그만 있어도 사용되는 태그들이 있다.
HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
<p>내용</p>
</body>
</html>
기본적으로 위 구조로 사용하며 기본적인 태그들을 간단히 설명해보려고 한다.
태그들을 <head> 태그 안에 작성한다.HTML말고도 웹 페이지를 같이 구성하는게 CSS와 JS라고 할 수 있다.
HTML로 웹 페이지의 구조를 작성하게 되면 CSS와 JS로 HTML 구조를 꾸며줄 수 있게 된다.
CSS는 서식이나 레이아웃을 제어하는데 사용되며 웹 페이지를 좀 더 시각화 하여 표현할 수 있다.
JS는 자바스크립트라고도 하며 객체 기반의 스크립트 프로그래밍 언어이며 다른 요소들의 동작을 제어하는데 사용된다.
이곳을 들어가게 되면 HTML, CSS, JS의 역할이 시각적으로 잘 표현되어 있다.
HTML, CSS, JS는 사용자가 직접 상호 작용하는 웹 사이트의 구조이기 때문에 웹 페이지를 만들기 위해서는 필수로 익혀야될 언어들이다.
태그의 기본 사용법
HTML은 웹 페이지에 콘텐츠를 표시하기 위해 사용하는 언어입니다. 어느 부분에 텍스트가 있어야 할지, 어느 부분에 이미지가 있어야 할지 등을 나타내는 것이 HTML의 역할입니다. 이러한 역할을 수행하기 위해 HTML은 '태그(tag)'라는 표기법을 사용합니다. 다음은 태그를 이용해 콘텐츠를 표시할 때의 기본적인 형태를 나타낸 것인데, 이를 통해 태그를 구성하는 각 요소의 역할을 살펴보겠습니다.
<태그의이름>콘텐츠</태그의이름>
부등호(<>)
위 형태에서, < 기호와 > 기호로 묶인 부분이 바로 태그입니다. 태그는 여는 태그와 닫는 태그로 구분할 수 있는데, 여는 태그는 콘텐츠의 시작을 나타내고 닫는 태그는 콘텐츠의 끝을 나타냅니다. 여는 태그와 닫는 태그가 짝을 이루기 위해서는 태그의 이름이 같아야 하며, 닫는 태그에는 < 기호 바로 뒤에 / 기호를 붙여 여는 태그와 구별해야 합니다.
태그의 이름
태그의 이름은 해당 태그가 웹페이지에 어떤 콘텐츠를 표시하는지를 의미합니다. 예를 들어 텍스트 문단을 표시할 때는 'paragraph'의 약자인 'p'를 태그의 이름으로 사용하고, 이미지를 표시할 때는 'image'의 약자인 'img'를 태그의 이름으로 사용합니다.
콘텐츠
여는 태그와 닫는 태그 사이에는 태그가 실제로 표시할 콘텐츠가 작성되어야 합니다. 태그를 위해 사용된 기호와 태그의 이름은 실제 웹페이지에는 표시되지 않습니다. 웹 브라우저는 여는 태그와 닫는 태그 사이에 작성된 콘텐츠를 태그의 이름에 맞게 해석한 후 화면에 표시합니다. 아래는 텍스트 문단을 표시하기 위해 작성된 태그의 예와 이를 웹 브라우저 화면에서 확인한 결과입니다.
<p>p 태그는 텍스트 문단을 표시할 때 사용합니다.</p>단일 태그
앞서 살펴 본 형태 외에, 태그는 닫는 태그를 생략한 '단일 태그' 형태로도 사용할 수 있습니다. 여는 태그와 닫는 태그를 짝 지어 사용하는 것은 그 사이에 콘텐츠를 표시하기 위함입니다. 단일 태그는 콘텐츠를 표시하지 않습니다. 단일 태그는 태그 그 자체만으로도 콘텐츠가 되거나, 태그가 문서 내에서 별도의 기능을 수행하는 경우에 사용하는 형태입니다. 단일 태그는 다음의 두 가지 형태로 작성할 수 있습니다.
<태그의이름>
<태그의이름/>단일 태그 사용 시에는 위 두 가지 형태 중 어떤 형태로도 작성 가능합니다. 두 번째 형태에서 사용된 / 기호는 태그가 닫혔다(끝났다)는 의미로 사용하는 것입니다. HTML의 이전 버전 중에는 단일 태그에 이 기호를 반드시 포함시키도록 강제한 경우도 있었는데, HTML5에서는 이전 버전의 규칙을 수용함과 동시에 코드 작성 시 자유도를 높이기 위해 두 가지 형태를 모두 허용합니다.
앞으로 이 책에서 단일 태그를 사용할 때는 / 기호를 생략하겠습니다.
태그 작성 전 알아야 할 추가사항
작성 형태를 아는 것 외에도, 올바른 태그 작성을 위해서 알아두어야 할 사항들이 몇 가지 더 있습니다.
태그는 소문자로 쓴다
HTML 태그의 이름은 모두 알파벳으로 구성되는데, HTML5에서는 태그를 작성할 때 대문자를 사용할지 소문자를 사용할지 여부가 전적으로 사용자(작성자)에게 달려 있습니다. HTML5는 코드 작성 규칙이 엄격하지 않다는 점이 드러나는 특징입니다. 그러나 태그를 작성할 때는 소문자로 작성하는 것이 널리 사용되는 관례이며, 가능하면 이를 따르는 것이 바람직합니다.
여는 태그와 닫는 태그를 정확히 입력해야 한다
여는 태그는 콘텐츠의 시작을, 닫는 태그는 콘텐츠의 끝을 나타냅니다. 따라서 시작과 끝을 정확하게 입력하지 않으면 웹페이지의 모습이 의도한 바와 다르게 출력될 수 있습니다. 여는 태그와 닫는 태그의 짝이 맞지 않거나 일부 누락된 경우에도 웹 브라우저는 웹페이지를 렌더링할 수 있으므로 태그 작성 단계에서부터 실수를 잘 점검해가며 작업할 필요가 있습니다.
태그의 콘텐츠로 태그를 포함시킬 수 있다
여는 태그와 닫는 태그 사이에는 태그가 표시할 콘텐츠가 포함되는데, 이때 또 하나의 새로운 태그가 콘텐츠로써 태그 안에 포함될 수도 있습니다. 예를 들면 다음과 같은 형태의 태그를 작성할 수도 있습니다.
<p><i>태그 안에 태그를 포함하다</i></p> 위와 같은 형태에서는 p태그를 상위 태그 또는 부모 태그라 하고 i태그를 하위 태그 또는 자식 태그라 합니다.
p태그나 i태그의 구체적인 역할은 책의 뒷부분에서 자세히 다루겠습니다.
들여쓰기를 적절하게 사용하는 것이 좋다
바로 위에서 살펴 본 태그의 포함 관계는 몇 번이고 겹쳐질 수 있습니다. 그런데 그러다 보면 코드의 가독성이 나빠져 코딩 작업에 불편을 초래합니다. 따라서 HTML 소스 코드를 작성할 때는 태그 사이의 포함 관계에 따라 적절한 공백을 두어 표현하는 것을 권장합니다. 아래 코드는 앞서 살펴 본 p태그가 i태그를 포함하는 코드 예에 적절한 들여쓰기를 추가하여 표현한 예입니다.
<p>
<i>태그 안에 태그를 포함하다</i>
</p> 위 코드처럼 하위 태그의 앞에 적절한 공백, 즉 들여쓰기를 추가하면 태그의 포함 관계가 명확해져 코드의 가독성이 향상됩니다. 들여쓰기는 주로 키보드의 Tab 키를 눌러 추가하곤 합니다.
비주얼 스튜디오 코드에서는 HTML 태그에 자동으로 들여쓰기를 추가해주는 기능이 포함되어 있어 무척 편리합니다.
속성
속성(attribute)은 태그에 부가 기능을 추가하기 위해 작성하는 것으로, 선택사항입니다. 다음은 속성을 한 개 추가한 태그의 형태를 나타낸 것입니다.
<태그의이름 속성명="속성값">콘텐츠</태그의이름>
<태그의이름 속성명="속성값">
위처럼 속성은 여는 태그의 태그 이름 옆에 공백을 두고 작성해야 합니다. 이때 속성명은 특별한 기호를 사용하지 않고 속성명만 정확히 입력하면 되는데, 이어서 속성값을 입력할 때는 속성값에 해당하는 영역을 따옴표로 묶어서 표현해주어야 합니다. 속성명과 속성값 사이의 = 기호는 둘을 짝 지어주는 역할을 합니다.
태그에 속성을 추가하는 작업에는 따로 개수 제한이 정해져 있지 않습니다. 따라서 사용자는 하나의 태그에 여러 개의 속성을 필요한 만큼 추가할 수 있습니다. 단 이때 주의할 점은 태그의 이름이나 각 속성 간의 구분을 정확하게 할 수 있도록 공백 문자(space)를 적절히 추가해 주어야 한다는 점입니다. 태그 안의 텍스트들이 공백 없이 이어서 쓰여있는 경우 웹 브라우저가 이를 제대로 해석하지 못 할 수도 있습니다. 아래 코드는 속성이 두 개 추가된 img태그의 예입니다(지금은 아래 코드의 의미를 몰라도 괜찮습니다).
<img src="dog.png" alt="강아지 이미지">
주석
주석(comment)은 사람에게는 보이지만, 웹 브라우저에게는 보이지 않는 코드입니다. 주석은 주로 코드 작성자가 자신이 작성한 코드에 설명 또는 메모를 추가하기 위해 사용합니다. 주석을 작성하는 방법은 다음과 같습니다.
주석 또한 태그 형태로 작성되는데, 이때 총 7개의 기호를 사용합니다. 앞의 4개와 뒤의 3개는 모두 붙여서 작성해야 하고, 그 사이에 들어가는 모든 내용은 주석으로 처리되어 웹페이지의 결과물에는 아무런 영향을 주지 않습니다.
작성한 코드의 양이 많은 경우, 시간이 지나면 이를 직접 작성한 사람조차도 코드를 읽는 데 어려움을 겪는 경우가 많습니다. 이때 적절한 양의 주석은 코드 작성자 또는 함께 작업하는 팀에게 많은 도움이 됩니다. 그러나 과유불급이라는 말이 있듯, 주석의 양이 지나치게 많을 경우에는 오히려 가독성을 저해하는 역효과가 발생할 수 있으므로 주석은 코드의 중요한 부분에 한줄 정도씩만 써 주는 것이 좋습니다.
문서 기본 구조
태그, 속성, 그리고 주석 등 HTML 코드 작성에 필요한 기본 사항들에 대해 알아보았습니다. 이제 태그의 종류를 학습해가며 실제로 웹페이지에 콘텐츠를 표시해보는 일만 남았습니다. 이를 위해 가장 먼저 HTML 문서의 기본 구조를 살펴보겠습니다. 기본 구조를 작성해 두는 것은 HTML 문서를 '웹 콘텐츠를 작성할 준비가 되어있는 상태'로 만드는 작업입니다. 일반적으로 HTML 문서는 다음과 같은 기본 구조를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
위 코드가 바로 HTML 문서의 기본 구조인데, 이를 구성하는 각 태그의 역할에 대해서 자세히 살펴보겠습니다.
문서 형식 선언,
문서 형식 선언, 줄여서 DOCTYPE은 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 역할을 합니다. DOCTYPE의 뒤에 html이라고 쓰여 있는 것은 '이 문서는 HTML5로 작성되었습니다'라는 뜻입니다. 과거 HTML의 이전 버전들의 문서 형식은 비교적 표기법이 복잡한데 반해, HTML5는 웹 표준 기술로써 이전 버전들을 수용하고 계속적으로 발전하고 있으므로 표기법이 무척 단순합니다. 문서 형식 선언은 웹 브라우저가 해당 문서를 해석할 때나 문서의 유효성 검사 등을 할 때 참고 사항 역할을 합니다.
참고 삼아 다른 버전의 문서 형식 선언 표기법을 추가할지를 고민했지만, 불필요하다고 판단해 생략합니다.
문서의 시작과 끝,
문서 형식 선언 이후 실제 문서의 내용을 표시하는 태그가 바로 태그입니다. 여는 태그가 문서의 시작을, 닫는 태그가 문서의 끝을 의미합니다. 이 태그에는 선택적으로 lang이라는 속성을 추가할 수 있는데, 이는 문서의 주요 언어를 표기하기 위해 추가하는 속성입니다. 한국어를 사용한 경우에는 위 예시에서 표기한 것처럼 "ko"를 입력하고, 영어를 뜻하는 "en"이나 일본어를 의미하는 "ja" 등 다양한 언어 코드를 속성값으로 입력할 수 있습니다.
문서의 정보,
앞서 살펴 본 태그의 안에는 와 라는 두 개의 하위 태그가 자리하고 있습니다. 그 중 의 역할은 브라우저에게 문서의 정보를 전달하는 것입니다. 의 안에 작성되는 태그들은 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들입니다. 위에서 확인해 본 기본 구조를 보면 태그 안에는 두 개의 설정 관련 태그가 입력되어 있는데, 이 외에도 다양한 설정 태그를 추가 입력할 수 있습니다.
