HTML 기본 문법 (Basic HTML syntax)
HTML이란 무엇인가요? (What is HTML?)
HTML(HyperText Markup Language)은 여러분이 방문하는 웹 페이지의 구조를 웹 브라우저에게 어떻게 구성할지 알려주는 마크업 언어(markup language)입니다. HTML은 일련의 요소(elements)들로 이루어져 있으며, 이 요소들을 사용해 콘텐츠의 여러 부분을 감싸거나 마크업하여 특정 방식으로 보이게 하거나 동작하게 만듭니다.
감싸는 태그(tags)는 특정 텍스트를 다른 페이지로 연결되는 하이퍼링크로 만들거나, 단어를 기울임꼴로 강조하는 등의 역할을 할 수 있죠. 예를 들어, 다음과 같은 텍스트 한 줄이 있다고 생각해 봅시다.
My cat is very grumpy우리는 이 텍스트를 단락(paragraph) 요소인 <p> 태그로 감싸서, 이것이 하나의 '문단'임을 브라우저에 명시할 수 있습니다.
<p>My cat is very grumpy</p>또는 이 텍스트를 최상위 제목(top-level heading)으로 지정하고 싶다면 <h1> 태그로 감쌀 수도 있죠.
<h1>My cat is very grumpy</h1>HTML은 .html이라는 파일 확장자를 가진 HTML 문서(HTML documents), 줄여서 문서(documents)라고 부르는 텍스트 파일 안에 살아 숨 쉽니다. 우리가 흔히 말하는 '웹 페이지'가 바로 이 HTML 문서이며, 문서 안에는 웹 페이지의 실제 콘텐츠와 그 구조가 명시되어 있습니다.
가장 흔하게 접할 수 있는 HTML 파일은 index.html입니다. 이 파일은 일반적으로 웹사이트의 메인 홈 화면 콘텐츠를 담는 데 사용돼요. 웹사이트 내의 하위 폴더들 역시 각각 자신만의 index.html 파일을 가지고 있는 경우가 많아서, 하나의 웹사이트는 여러 위치에 다수의 인덱스 파일을 가질 수 있습니다.
참고 (Note):
HTML의 태그는 대소문자를 구분하지 않습니다. 즉, 대문자나 소문자 어떤 것으로 작성해도 동작한다는 뜻이에요. 예를 들어<title>태그는<title>,<TITLE>,<Title>,<TiTlE>등으로 작성해도 모두 정상적으로 인식됩니다. 하지만 코드의 일관성과 가독성을 높이기 위해 모든 태그는 소문자로 작성하는 것이 가장 좋은 관행(best practice)입니다.
💡 [강사의 실무/면접 팁]
기술 면접에서 종종 "HTML은 프로그래밍 언어인가요?"라는 질문이 나오곤 합니다. 이때 당황하지 마시고 "아닙니다. 조건문이나 반복문 같은 로직을 처리하는 프로그래밍 언어가 아니라, 웹 문서의 구조와 의미를 브라우저에 전달하는 마크업 언어입니다."라고 명확히 답변하시면 아주 좋은 인상을 줄 수 있습니다!
HTML 요소의 해부학 (Anatomy of an HTML element)
이전 섹션에서 살펴봤던 단락(paragraph) 요소를 조금 더 깊이 파헤쳐 볼까요?
하나의 완전한 요소(element)는 다음과 같은 구조로 이루어져 있습니다.
- 여는 태그 (The opening tag): 요소의 이름(이 예시에서는 단락을 뜻하는 p)을 여닫는 꺾쇠괄호(
< >)로 감싼 형태입니다. 이 여는 태그는 요소가 시작되거나 효과가 적용되기 시작하는 위치를 표시합니다. 이 예시에서는 단락 텍스트가 시작되기 직전에 위치하죠. - 콘텐츠 (The content): 요소의 실제 내용입니다. 이 예시에서는 "My cat is very grumpy"라는 텍스트 자체가 콘텐츠가 됩니다.
- 닫는 태그 (The closing tag): 여는 태그와 똑같이 생겼지만, 요소 이름 앞에 슬래시(
/)가 포함된다는 점이 다릅니다. 이것은 요소가 끝나는 위치를 표시합니다. 초보자들이 가장 흔하게 하는 실수 중 하나가 바로 이 닫는 태그를 빼먹는 것인데, 이럴 경우 화면이 완전히 깨지거나 기묘한 결과가 나올 수 있으니 주의해야 해요!
참고 (Note):
MDN의 학습 파트너인 Scrimba의 HTML tags에서 대화형으로 HTML 태그에 대한 설명을 직접 체험해 볼 수 있습니다.
여러분의 첫 번째 HTML 요소 만들기 (Creating your first HTML element)
이제 여러분이 직접 HTML 요소를 작성해 볼 시간입니다!
- 텍스트 라인을
<em>과</em>태그로 감싸보세요. 요소를 열려면 줄 맨 앞에 여는 태그(<em >)를 넣고, 요소를 닫으려면 줄 맨 끝에 닫는 태그(</em>)를 넣으면 됩니다. 이렇게 하면 텍스트가 렌더링될 때 기울임꼴(이탤릭체)로 포맷팅되어 나타날 거예요. - 조금 더 도전해보고 싶다면 더 많은 HTML 요소들을 검색해 보고 텍스트 예시에 다양하게 적용해 보세요.
This is my text.
<em>This is my text.</em>💡 [강사의 부연 설명]
<em> 태그는 단순히 글씨를 기울이는 시각적 효과뿐만 아니라, 스크린 리더기(시각 장애인용 화면 낭독기)가 해당 부분을 읽을 때 억양을 주어 강조해서 읽도록 하는 '의미론적(Semantic)' 역할도 합니다. 프론트엔드 개발자라면 항상 이런 접근성(Accessibility)을 염두에 두어야 해요.
요소의 중첩 (Nesting elements)
요소는 다른 요소의 내부에도 배치될 수 있습니다. 이를 가리켜 중첩(nesting)이라고 부릅니다. 만약 우리 고양이가 매우(very) 심술궂다는 것을 강조하고 싶다면, 'very'라는 단어를 텍스트에 강한(stronger) 포맷팅을 부여하는 <strong> 요소로 감쌀 수 있습니다.
<p>My cat is <strong>very</strong> grumpy.</p>이 코드 블록에서 "My cat is very grumpy."라는 텍스트 전체는 하나의 단락(paragraph)으로 정의되어 있습니다. 그리고 그 안에서 "very"라는 단어는 특별히 강한 중요성을 갖는 것으로 추가 정의된 것이죠.
중첩에는 올바른 방법과 잘못된 방법이 있습니다. 위 코드에서는 <p> 요소를 먼저 연 다음 <strong> 요소를 열었습니다. 올바르게 중첩하려면 안쪽에 열린 <strong> 요소를 먼저 닫고, 그 다음에 바깥쪽의 <p> 요소를 닫아야 합니다.
아래는 중첩을 잘못한 대표적인 예시입니다.
<p>My cat is <strong>very grumpy.</p></strong>태그들은 서로의 안이나 밖에 온전히 포함되도록 열리고 닫혀야 합니다. 이전 코드 블록처럼 요소들이 서로 교차해서 겹치게 되면, 브라우저는 여러분이 무슨 의도로 코드를 짰는지 '추측'해야만 합니다. 이런 추측은 의도치 않은 화면 깨짐이나 예상치 못한 렌더링 결과를 낳을 수 있습니다. DOM 트리 구조를 그릴 때 부모-자식 관계가 꼬이기 때문이죠.
빈 요소 (Void elements)
모든 요소가 '여는 태그 - 콘텐츠 - 닫는 태그'의 패턴을 따르는 것은 아닙니다. 어떤 요소들은 문서에 무언가를 삽입하거나 임베드(embed)하기 위해 사용되는 단일 태그로만 구성되기도 하죠. 이러한 요소를 빈 요소(void elements)라고 부르며, 말 그대로 "내부에 다른 HTML 콘텐츠를 담을 수 없는 요소"를 의미합니다.
대표적인 예로, 텍스트 줄에 줄바꿈을 삽입하여 텍스트를 여러 줄로 나누는 <br> 요소가 있습니다.
<p>
This is a single paragraph, but we are going to <br />break it onto two lines.
</p>이 코드는 화면에 다음과 같이 렌더링됩니다. (한 줄이었던 문장이 두 줄로 나뉩니다.)
참고 (Note):
일부 HTML 예제들을 보다 보면 빈 요소의 태그 끝에/가 추가된 것(예:<br />)을 볼 수 있습니다. 이것은 틀린 문법은 아니며 또 다른 스타일의 마크업 문법(XHTML 시절의 잔재)일 뿐입니다. 현재의 HTML5 환경에서는 이 "닫는 슬래시(closing slash)"가 굳이 필요하지 않습니다.
속성 (Attributes)
요소는 속성(attributes)을 가질 수도 있습니다. 속성은 아래 이미지와 같이 생겼습니다.
속성은 해당 요소에 대한 추가적인 정보를 담고 있지만, 화면에 표시되는 콘텐츠의 일부는 아닙니다. 위 예시에서 class 속성은 요소를 식별할 수 있는 이름을 제공하여, 이후에 스타일(CSS)을 적용하거나 자바스크립트(JavaScript)로 해당 요소를 제어할 때 타겟팅할 수 있게 해줍니다.
올바른 속성 작성을 위해서는 다음 규칙을 지켜야 합니다.
- 요소의 이름과 속성 사이에 공백이 있어야 합니다. 하나의 요소에 두 개 이상의 속성을 넣을 때도 속성들 사이에 공백을 두어 구분해야 합니다.
- 속성 이름 뒤에 등호(
=)가 와야 합니다. - 속성의 값은 여는 따옴표와 닫는 따옴표(
" ")로 감싸야 합니다.
요소에 속성 추가해보기 (Adding attributes to an element)
자, 다시 여러분의 차례입니다! 이번 섹션에서는 페이지에 이미지를 표시할 때 사용하는 <img> 요소를 살펴볼 거예요. <img> 요소는 다음과 같은 여러 가지 속성을 가질 수 있습니다.
src: 이미지의 URL(웹 주소)을 지정하는 필수 속성입니다. (예:src="https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png")alt: 이미지를 볼 수 없는 사용자(시각 장애인 등)나 이미지가 로드되지 않았을 때를 대비해 이미지를 설명하는 대체 텍스트를 지정합니다. (예:alt="The Firefox Nightly icon") 기술적으로 필수는 아니지만, 단순히 장식용이 아니라 의미를 전달하는 모든 이미지에는 반드시 제공해야 하는 아주 중요한 속성입니다.width: 이미지의 가로 너비를 픽셀 단위로 지정합니다. (예:width="300")height: 이미지의 세로 높이를 픽셀 단위로 지정합니다. (예:height="300")
아래 단계에 따라 직접 이미지를 넣어보세요!
- 온라인에서 좋아하는 이미지를 찾아 우클릭한 뒤 이미지 링크 복사를 누르세요.
<img>요소에src속성을 추가하고, 값으로 방금 복사한 URL을 넣습니다.alt속성에 이미지에 대한 적절한 설명을 적어줍니다.width속성을 300 정도로 설정해서 화면에 너무 크게 나오지 않도록 조절해 봅니다.
<img
src="https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png"
alt="A description of the image"
width="300" />불리언 속성 (Boolean attributes)
가끔 값이 작성되지 않은 채로 이름만 덩그러니 있는 HTML 속성들을 보게 될 것입니다. 이를 가리켜 불리언 속성(Boolean attributes)이라고 부릅니다. 불리언 속성이 태그에 추가되면, 거기에 어떤 값을 할당하든(심지어 값을 아예 적지 않더라도) 그 속성값은 true로 설정된 것으로 간주됩니다. 반대로 태그에 해당 속성이 포함되지 않았다면 그 값은 false가 됩니다.
예를 들어, 폼(form)의 <input> 요소에 사용자가 데이터를 입력하지 못하도록 막을 때 사용하는 disabled 속성을 생각해보세요.
<label for="first-input">This input is disabled</label>
<input id="first-input" type="text" disabled="disabled" />
<br />위처럼 적어도 되지만, 짧게 줄여서 아래와 같이 값 없이 속성 이름만 적는 것이 허용되며 실무에서도 훨씬 더 많이 쓰입니다.
<label for="second-input">This input is also disabled</label>
<input id="second-input" type="text" disabled />
<br />비교를 위해 disabled 속성이 없는 입력칸도 함께 살펴봅시다. (비활성화된 입력칸은 화면에 회색으로 표시되어 입력을 막습니다.)
<label for="third-input">This input isn't disabled; you can type into it</label>
<input id="third-input" type="text" />참고 (Note):
위 코드에 포함된<label>요소는 폼 입력 요소와 설명 텍스트(라벨)를 서로 연결해주는 역할을 합니다. 웹 접근성을 위한 베스트 프랙티스이기도 하고, 폼 요소들 사이의 구분을 명확히 해주기 때문에 예제에 포함시켰습니다.
속성 값의 따옴표 생략하기 (Omitting quotes around attribute values)
특정 상황에서는 속성 값 주변의 따옴표를 생략해도 코드가 동작합니다. 하지만 상황에 따라 마크업이 완전히 깨질 위험이 있기 때문에, 항상 따옴표를 포함하는 것을 강력히 권장합니다. 왜 그런지 이유를 살펴볼까요?
아래 코드 스니펫에 있는 <a> 요소는 앵커(anchor)라고 불립니다. 텍스트를 감싸서 하이퍼링크로 만들어주는 역할을 하죠. href 속성은 링크가 가리키는 URL을 지정합니다. 아래 예시에서는 href의 속성 값에 띄어쓰기(공백)가 없기 때문에 따옴표를 생략해도 아무런 문제가 생기지 않습니다.
<a href=https://www.mozilla.org/>favorite website</a>하지만 속성 값에 공백이 있는 경우 따옴표를 생략하면 곧바로 문제에 부딪히게 됩니다. 링크에 마우스를 올렸을 때 툴팁으로 설명을 띄워주는 title 속성("The Mozilla homepage")을 예로 들어볼게요.
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>title 속성 값 주변에 따옴표를 넣지 않았기 때문에, 브라우저는 이것을 값이 The인 title 속성 한 개와, Mozilla, homepage라는 두 개의 불리언 속성으로 잘못 해석해 버립니다. 마우스를 올려보면 "The Mozilla homepage"가 아니라 "The"라는 글자만 툴팁으로 뜨는 것을 볼 수 있을 겁니다. 여러분의 의도와는 완전히 다르죠!
따라서 속성 값에는 항상 따옴표를 씌우는 습관을 들이세요. 오류와 의도치 않은 동작을 방지할 뿐만 아니라, 코드를 훨씬 읽기 쉽게 만들어 줍니다. 면접관이나 동료 개발자가 여러분의 코드를 볼 때도 훨씬 깔끔하고 전문적으로 보일 수 있습니다.
작은따옴표를 쓸까요, 큰따옴표를 쓸까요? (Single or double quotes?)
이 글에서는 모든 속성 값을 큰따옴표(")로 감쌌습니다. 하지만 다른 사람의 HTML 코드를 보다 보면 작은따옴표(')가 사용된 것을 볼 수도 있습니다. 이것은 전적으로 '스타일'의 차이이므로 어떤 것을 사용할지는 여러분의 자유입니다. 아래 두 줄의 코드는 완전히 똑같이 동작합니다.
<a href='https://www.example.com'>A link to my example.</a>
<a href="https://www.example.com">A link to my example.</a>단, 작은따옴표와 큰따옴표를 섞어서 쓰는 것은 절대 안 됩니다! 아래 예시처럼 시작과 끝을 다른 따옴표로 섞어 쓰면 에러가 발생합니다. 브라우저 입장에서는 href 속성 값이 아직 끝나지 않았다고 판단하기 때문입니다.
<a href="https://www.example.com'>A link to my example.</a>만약 하나의 따옴표 스타일을 기본으로 사용하고 있다면, 속성 값 내부에서 다른 종류의 따옴표를 사용하는 것은 가능합니다. 아래 코드는 정상적으로 동작합니다.
<a href="https://www.example.com" title="Isn't this fun?">
A link to my example.
</a>만약 큰따옴표로 감싸진 속성 값 안에서 또다시 큰따옴표를 사용해야 한다면 (또는 작은따옴표 안에서 작은따옴표), 문자 참조(character references)라는 것을 사용해야 합니다. 그냥 똑같은 따옴표를 쓰면 마크업이 깨집니다.
<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>
<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>HTML 문서의 해부학 (Anatomy of an HTML document)
HTML 요소 하나하나만 덩그러니 있다면 별로 쓸모가 없겠죠. 이제 개별 요소들이 모여서 어떻게 전체 HTML 페이지를 형성하는지 문서 전체의 뼈대를 살펴봅시다.
아래는 매우 간단하지만 완벽하게 동작하는 웹페이지 예시입니다.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>이 예시의 각 부분은 다음과 같습니다.
<!doctype html>: 문서 형식 정의(doctype)입니다. HTML이 막 태동했던 아주 옛날(1991~1992년경), doctype은 이 페이지가 '좋은 HTML'로 인정받기 위해 따라야 하는 규칙 세트로 연결되는 링크 역할을 했습니다. 예전에는 이렇게 생겼었죠.
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">현대 시대에 doctype은 다른 모든 것이 올바르게 작동하도록 포함되어야 하는 역사적인 유물입니다. <!doctype html>은 유효한 doctype으로 간주되는 가장 짧은 문자열이며, 모든 웹페이지의 맨 윗줄에 반드시 포함되어야 합니다. 여러분이 아셔야 할 것은 이것이 전부입니다!
-
<html></html>:<html>요소입니다. 이 요소는 페이지의 모든 콘텐츠를 감싸는 역할을 합니다. 루트 요소(root element)라고도 알려져 있습니다. -
<head></head>:<head>요소입니다. 이 요소는 사용자가 보게 될 콘텐츠의 일부가 아닌, 페이지에 대한 정보를 담는 컨테이너 역할을 합니다. 여기에는 검색 결과에 표시될 키워드 및 페이지 설명, 콘텐츠를 꾸미는 CSS, 문자 세트 선언 등이 포함될 수 있습니다. 다음 문서에서 페이지의 head 부분에 대해 더 자세히 배우게 될 것입니다. -
<meta charset="utf-8">:<meta>요소입니다. 이 요소는 페이지를 설명하는 메타데이터를 나타냅니다.charset속성은 여러분의 문서가 사용할 문자 인코딩을 지정합니다. UTF-8은 대부분의 인류 문자의 문자를 포함하고 있으므로, 페이지가 다양한 언어를 성공적으로 표시할 수 있습니다. 이것을 설정하지 않을 이유가 없으며, 나중에 발생할 수 있는 일부 문제를 피하는 데 도움이 됩니다. -
<title></title>:<title>요소입니다. 페이지가 로드되는 브라우저 탭에 나타나는 제목을 설정합니다. 페이지 제목은 페이지가 북마크될 때 페이지를 설명하는 데에도 사용됩니다. -
<body></body>:<body>요소입니다. 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등 페이지에 표시되는 모든 콘텐츠가 포함됩니다.
💡 [강사의 면접 팁]
코딩 테스트나 기술 면접을 준비하다 보면 DOM(Document Object Model)이나 트리 구조 순회 알고리즘(예: BFS, DFS)을 공부하게 되죠? 브라우저가 위 HTML 코드를 읽으면 바로 이 <html lang="en-US">를 루트(Root) 노드로 삼고, 그 아래에 <head>와 <body>라는 두 개의 자식 노드를 갖는 트리 자료구조를 메모리에 생성합니다. 여러분이 코딩 문제를 풀 때 다뤘던 그래프 탐색 개념이 브라우저에서도 그대로 쓰인다는 점을 연관 지어 생각하시면 훨씬 더 깊이 있게 프론트엔드 개념을 잡으실 수 있을 거예요!
HTML 문서에 몇 가지 기능 추가해보기 (Adding some features to an HTML document)
이 시점에서, 여러분이 약간 더 실질적인 HTML 콘텐츠를 작성하는 연습을 해보기를 바랍니다. 이를 위해 두 가지 옵션이 있습니다. 로컬 컴퓨터에서 HTML을 생성하거나, 이전 예제들처럼 MDN Playground를 사용할 수 있습니다.
예제 설정 (Example setup)
- 로컬 컴퓨터에서 하는 방법:
- 이전 섹션에 나열된 HTML 페이지 예제를 복사하여 코드 편집기의 새 파일에 붙여넣습니다. 또는 저희의 GitHub 저장소에서 이 기본 HTML 템플릿(basic HTML template)을 찾을 수도 있습니다.
- 아래의 지시사항(instructions)에 요약된 대로 페이지를 변경합니다.
- 파일을
index.html로 저장한 다음 새 브라우저 탭에서 로드하여 결과를 확인합니다.
- MDN Playground에서 하는 방법: 출력 패널 아래의 "Play"를 클릭하여 예제를 편집한 다음 지시사항(instructions)을 따르세요. 실수한 경우 MDN Playground의 Reset 버튼을 사용하여 작업을 지울 수 있습니다.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>예제 지시사항 (Example instructions)
따라야 할 지시사항은 다음과 같습니다.
<body>요소의 여는 태그 바로 아래에 문서의 메인 제목을 추가하세요. 이것은<h1></h1>여는 태그와 닫는 태그로 감싸야 합니다.- 흥미롭다고 생각하는 주제에 대한 텍스트를 포함하도록 단락 콘텐츠를 편집하세요.
- 중요한 단어들을
<strong>요소 안에 감싸서 굵게 눈에 띄게 만드세요. - 단락에 두 개의 링크를 추가하세요. 이것은
<a>요소를 사용하여 달성할 수 있습니다. - 앞서 설명한 대로 단락 아래의 문서에 이미지를 추가하세요. 보기에 너무 크면
width속성을 추가하여 축소하세요.
정말 막힌다면, 아래의 모범 답안 예시를 참고해 보세요.
여러분의 완성된 HTML 요소 body 내용은 이와 비슷하게 생겼을 것입니다:
<h1>Some music</h1>
<p>
I really enjoy <strong>playing the drums</strong>. One of my favorite drummers
is Neal Peart, who used to play in the band
<a href="https://en.wikipedia.org/wiki/Rush_%28band%29">Rush</a>. My favorite
Rush album is currently
<a href="https://www.deezer.com/album/942295">Moving Pictures</a>.
</p>
<img
src="https://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"
alt="Rush Moving Pictures album cover"
width="300" />HTML에서의 공백 (Whitespace in HTML)
지금까지 살펴본 예제들을 보면, 코드 내부에 공백(띄어쓰기나 줄바꿈)이 상당히 많이 포함되어 있는 것을 볼 수 있습니다. 사실 이 공백들은 대부분 선택 사항이며, 주된 목적은 코드를 읽기 쉽게(가독성을 높이게) 만드는 것입니다. 예를 들어, 아래의 두 코드 조각은 브라우저에서 완전히 동일하게 처리됩니다.
<p id="noWhitespace">Dogs are silly.</p>
<p id="whitespace">Dogs
are
silly.</p>어떤가요? 결과물은 완전히 똑같습니다!
거의 모든 요소 내부에서(사전 서식을 유지하는 <pre> 요소와 같은 특수한 예외를 제외하고) 여러분이 코드에 공백을 아무리 많이 연달아 넣더라도, HTML 파서는 코드를 렌더링할 때 연속된 공백 문자열을 단 하나의 스페이스(공백)로 취급하여 줄여버립니다.
따라서 코드를 어떤 스타일로 정렬할지는 전적으로 여러분의 몫입니다. 실무에서는 보통 부모 요소 안에 중첩된 자식 요소를 작성할 때 '2칸 공백(스페이스바 두 번)' 또는 '탭(Tab)'으로 들여쓰기(Indentation)를 하는 것이 일반적입니다. (MDN 예제들 또한 2칸 들여쓰기 스타일을 사용합니다.) 이렇게 계층 구조를 명확히 해야 나중에 코드를 유지보수하기 편하거든요.
<section>
<div>
<p>A paragraph of content.</p>
</div>
</section>문자 참조: HTML에 특수 문자 포함하기 (Character references: including special characters in HTML)
HTML에서 <, >, ", ', 그리고 & 기호는 특별한 역할을 하는 문자입니다. 이 기호들은 HTML 문법 그 자체를 구성하는 데 사용되죠. 그렇다면, 우리가 코드 문법이 아니라 실제 화면에 보여주고 싶은 텍스트로서 앰퍼샌드(&)나 꺾쇠괄호(< >)를 사용하고 싶다면 어떻게 해야 할까요? 브라우저가 이것을 태그나 속성으로 오해하지 않게 말이죠.
이때 사용하는 것이 바로 문자 참조(character references)입니다. 이는 특정 문자를 나타내기 위한 특수 코드로, 딱 이런 상황을 위해 존재합니다. 모든 문자 참조 코드는 앰퍼샌드(&)로 시작해서 세미콜론(;)으로 끝납니다.
| 실제 문자 (Literal) | 문자 참조 코드 (Character reference) |
|---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
문자 참조 코드는 해당 기호의 영어 이름을 줄인 것이라 외우기 쉽습니다. 예를 들어, lt는 "less than(보다 작음)", quot는 "quotation(인용 부호)", amp는 "ampersand(앰퍼샌드)"를 의미합니다. 더 많은 엔티티를 알고 싶다면 위키피디아의 XML 및 HTML 문자 엔티티 참조 목록을 확인해 보세요.
아래 예제를 볼까요? 두 개의 단락이 있습니다.
<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> element.</p>이 코드를 실행해보면, 첫 번째 단락은 글자가 중간에 잘리거나 레이아웃이 깨지게 됩니다. 브라우저가 텍스트 중간에 있는 <p>를 '아, 새로운 문단을 시작하라는 거구나!'라고 해석해 버리기 때문이죠. 반면 두 번째 문단은 꺾쇠괄호를 문자 참조로 대체했기 때문에, 우리가 의도한 대로 텍스트 모양 그대로 정상 출력됩니다.
참고 (Note):
위에 나열된 5가지 특수기호를 제외한 다른 기호들은 굳이 문자 참조를 사용할 필요가 없습니다. 여러분의 HTML 문서 문자 인코딩이 UTF-8로 잘 설정되어 있다면, 현대 브라우저들은 키보드에 있는 거의 모든 특수 기호를 정상적으로 화면에 그려냅니다.
HTML 주석 (HTML comments)
HTML에는 코드 안에 주석(comments)을 작성할 수 있는 메커니즘이 있습니다. 웹 브라우저는 코드를 해석할 때 주석을 완전히 무시하기 때문에, 화면을 보는 사용자에게는 주석 내용이 전혀 보이지 않습니다.
주석의 목적은 코드가 어떻게 동작하는지 설명하는 메모를 남기는 것입니다. 코드를 짜고 오랜 시간이 지나서 내가 짠 코드조차 기억나지 않을 때, 혹은 프로젝트에 새로 합류한 동료 개발자가 여러분의 코드를 처음 분석할 때 이 주석은 가뭄에 단비처럼 엄청나게 유용하게 쓰입니다.
HTML 주석을 작성하려면, 메모하고 싶은 내용을 특별한 마커인 <!--, --> 사이에 넣으면 됩니다.
<p>I'm not inside a comment</p>
<!-- 화면에 렌더링되지 않음 -->이 코드를 실행하면 화면에는 첫 번째 줄인 "I'm not inside a comment"만 나타납니다. 두 번째 줄은 HTML 주석 마커 안에 들어있으므로 화면에 렌더링되지 않습니다.
💡 [강사의 실무 팁]
초보자분들이 실수로 API 키나 비밀번호 같은 민감한 정보를 주석에 남겨둔 채 서버에 배포하는 경우가 종종 있습니다. 브라우저 화면에는 보이지 않지만, 개발자 도구(F12)나 '페이지 소스 보기'를 통해 누구나 주석 내용을 들여다볼 수 있으므로 민감한 정보는 절대 주석으로 남기지 마세요!
