이 글은 프로그래밍 경험이 없는 분들을 대상으로 자바스크립트 웹 앱 제작법을 알려드리는 ‘웹 개발 배우기’ 시리즈의 일부인데요.
이번 시간에는 웹 페이지를 만드는 언어, 바로 HTML을 통해 웹 페이지를 만드는 방법에 대해 알아볼 겁니다.
이 챕터를 위해 필요한 지식 #
16진수 #
이 지식을 아주 자주 필요로 하지는 않겠지만, 웹 개발에서는 16진수가 정기적으로 등장하기 때문에 대략적인 개념이라도 알아두면 아주 큰 도움이 되는데요.
10진수가 10을 기반으로 하는 숫자 체계인 것처럼, 16진수는 16을 기반으로 하는 숫자 체계입니다.
자바스크립트에서는 숫자 리터럴이 0x로 시작하면 16진수로 해석하거든요.
0x9는 9, 0xA는 10, 0xF는 15, 0x10은 16, 0xFF는 255를 의미합니다.
왜 컴퓨팅에서 16진수가 편리할까요?
4비트의 숫자 범위가 바로 16(2 x 2 x 2 x 2)이기 때문입니다.
파일 경로 #
대략적으로 파일 시스템에는 두 종류의 항목이 있는데요.
디렉토리(폴더)와 파일이 바로 그것입니다.
‘경로(path)‘는 파일 시스템에서 특정 항목의 위치를 지정하는데요.
웹과 유닉스에서는 슬래시(/)를, 윈도우에서는 역슬래시(\)를 이름 구분자로 사용합니다.
경로에는 루트 수준에서 시작하는 ‘절대 경로’와, 특정 디렉토리나 파일을 기준으로 한 상대적인 위치를 알려주는 ‘상대 경로’가 있습니다.
URL은 어떻게 동작할까요? #
https://exploringjs.com/js/와 같은 웹 주소를 우리는 ‘URL(Uniform Resource Locator)‘이라고 부르는데요.
URL은 서버에 있는 리소스(웹 페이지 등)를 식별합니다.
단순한 URL은 다음과 같은 부분들로 구성되거든요.
-
프로토콜: https:
-
호스트: exploringjs.com
-
경로 이름: /js/
이는 ’exploringjs.com’이라는 이름의 서버에 있는 /js/ 경로의 리소스에 ‘HTTPS’ 프로토콜을 통해 접근할 수 있다는 의미입니다.
프로토콜은 그 서버와 어떻게 대화할지를 지정하는 약속인데요.
월드 와이드 웹에서 사용되는 프로토콜은 ‘HTTP’와 그 암호화 버전인 ‘HTTPS’입니다.
file: URL
#
웹 페이지는 우리 컴퓨터의 드라이브에 로컬로 위치할 수도 있는데요.
이 경우 URL은 file: 프로토콜을 사용합니다.
우리 드라이브에 있는 파일을 ‘로컬 파일’, 서버에 있는 파일을 ‘원격 파일’이라고 부릅니다.
상대 참조 #
웹 페이지 내부에서는 다른 리소스를 참조할 때 전체 URL을 사용할 필요 없이 ‘상대 참조’를 사용할 수 있는데요.
기본적으로 현재 웹 페이지의 URL을 기준으로 해석되는 파일 경로입니다.
예를 들어, 현재 페이지 URL이 http://example.com/book/chap/index.html일 때, 상대 참조 ../toc.html은 http://example.com/book/toc.html과 동일한 URL을 가리킵니다.
URL 프래그먼트 #
URL 참조 뒤에는 선택적으로 ‘URL 프래그먼트’가 따라올 수 있는데요.
해시 기호(#)와 식별자로 구성되며, 웹 페이지의 특정 섹션과 같은 리소스의 일부를 참조합니다.
웹 서버는 어떻게 동작할까요? #
웹 서버는 보통 자신의 드라이브에 있는 디렉토리를 웹에 접근 가능하게 만드는데요.
브라우저에 URL을 입력하면, 해당 URL에 명시된 서버로 ‘GET 요청’을 보냅니다.
서버는 그 경로를 사용해 자신의 디렉토리에서 파일을 식별하고 브라우저에 전달하거든요.
만약 브라우저가 디렉토리를 가리키면, 대부분의 서버는 그 디렉토리 안에 있는 index.html 파일을 전달합니다.
웹 페이지란 무엇일까요? #
웹 페이지는 바로 ‘HTML 파일’인데요.
HTML은 제목, 단락, 글머리 기호 목록 등 구조화된 콘텐츠를 인코딩하는 특별한 문법을 가진 텍스트 파일이고, 웹 브라우저는 그런 콘텐츠를 표시하는 앱입니다.
HTML은 ‘Hypertext Markup Language’의 약자인데요.
‘하이퍼텍스트’는 링크가 있는 구조화된 텍스트를 의미합니다.
HTML은 마크업 언어입니다 #
컴퓨터 이전 시대에 작가들이 타자기로 책을 쓸 때, 제목이나 단락 등을 나타내기 위한 규칙들이 있었는데요.
그런 규칙들을 ‘마크업 언어’라고 볼 수 있습니다.
HTML에는 두 가지 언어 수준이 있거든요.
<h1>, </h1>처럼 <와 > 안의 문자들이 텍스트의 구조를 지정하는 ‘마크업 레벨’과, 그 구조 안에 있는 “This is a level 1 heading"과 같은 실제 ‘텍스트 레벨’이 있습니다.
HTML의 문법 #
태그로 구분되는 요소 #
<h1>This is a level 1 heading</h1>와 같은 구조를 ‘HTML 요소’라고 부르는데요.
그 시작은 시작 태그 <h1>으로, 끝은 종료 태그 </h1>로 표시됩니다.
대부분의 HTML 요소는 시작 태그와 종료 태그를 가지고 더 많은 요소를 포함할 수 있는 ‘일반 요소’인데요.
단락 안에서 줄 바꿈을 나타내는 <br>처럼 시작 태그만 있고 내용이 없는 ‘빈 요소(void element)‘도 있습니다.
블록 요소 vs. 인라인 요소 #
HTML은 또한 ‘블록 요소’와 ‘인라인 요소’를 구분하는데요.
페이지의 수직 차원은 <h1>, <p>와 같은 블록 요소로 나뉘고, 이 블록 요소들은 <strong>과 같은 인라인 요소를 포함합니다.
공백 (Whitespace) #
공백, 탭, 줄 바꿈 등 눈에 보이지 않는 문자들을 ‘공백’이라고 하는데요.
HTML은 일반적으로 하나 이상의 연속된 공백 문자를 단일 공백으로 ‘축소’합니다.
속성 (Attributes) #
속성은 HTML 요소에 더 많은 정보를 제공하는데요.
예를 들어, 하이퍼링크는 이렇게 작성됩니다.
<a href="https://example.com">Examples</a>
이 경우 속성은 키 href와 값 https://example.com으로 구성됩니다.
문자 참조 #
‘문자 참조’는 화면에 특정 문자를 표시하기 위한 HTML 문법인데요.
<와 같이 HTML에서 특별한 의미를 가진 문자를 화면에 표시하려면, 그 문자를 ‘이스케이프(escape)‘해야 합니다.
예를 들어, 작다는 기호(<)를 나타내는 문자 참조는 세 가지 종류가 있습니다.
-
이름 있는 문자 참조:
< -
10진수 숫자 문자 참조:
< -
16진수 숫자 문자 참조:
<
이제 우리는 HTML 안에서도 HTML에 대해 쓸 수 있게 되는 겁니다.
This is a tag: <body>
‘메타(meta)‘라는 용어 #
‘메타’라는 접두사는 ‘초월’을 의미하는데요.
컴퓨팅에서 파일은 데이터를 포함하고, ‘메타데이터’는 그 파일에 대한 데이터(예: 생성 날짜)를 의미합니다.
HTML의 기본 뼈대 #
모든 HTML 문서는 다음과 같은 기본 뼈대 구조를 가지고 있는데요.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My web page</title>
</head>
<body>
</body>
</html>
-
<!doctype html>은 이 문서가 최신 HTML 문서임을 나타내는 표준 표시입니다. -
<html>은 문서 전체를 포함하는 최상위 요소입니다. -
<head>는 문서에 대한 메타데이터를 포함합니다. -
<body>는 문서의 실제 데이터를 포함합니다.
lang 속성은 문서의 언어를 지정하여 음성 합성 도구나 번역 도구에 도움을 줍니다.
컴퓨팅에서의 트리 #
‘트리’는 컴퓨팅에서 자주 볼 수 있는 구조인데요.
단일 ‘루트 노드’에서 시작하여 각각 0개 이상의 ‘자식’을 가진 노드들로 구성됩니다.
파일 시스템은 트리 구조의 한 예이고, HTML 문서 역시 <html> 요소를 루트로 하는 트리입니다.
콘텐츠를 위한 HTML 요소들 #
이 섹션에서는 콘텐츠를 위한 HTML 요소들을 탐색하는데요.
주석 #
주석은 화면에 표시되지 않는, 자신을 위한 노트를 HTML 코드에 추가할 수 있게 해줍니다.
<!--This is a comment-->
보통 이탤릭체로 렌더링되는 텍스트 #
<em>은 텍스트를 강조할 때, <dfn>은 새로운 용어를 정의할 때, <cite>는 이름이나 책 제목 등을 인용할 때, <i>는 외국어 텍스트를 언급할 때 사용합니다.
보통 굵은 글씨로 렌더링되는 텍스트 #
<strong>은 강한 중요성을 나타낼 때, <b>는 특별한 의미 없이 텍스트를 강조할 때 사용합니다.
하이퍼링크 #
href 속성이 있는 하이퍼링크를 클릭하면, 브라우저는 해당 속성으로 지정된 위치로 이동하는데요.
다른 웹사이트, 현재 웹사이트의 다른 페이지, 또는 현재 페이지의 특정 ID로 연결할 수 있습니다.
이미지와 피규어 #
이미지 요소는 다음과 같은데요.
<img
src="html-content/html5-logo.svg"
width="128" height="128"
alt="HTML5 logo: “HTML” above a shield with a 5"
>
src는 표시할 이미지 파일을 가리키고, width와 height는 이미지의 크기를, alt는 이미지를 찾을 수 없을 때 표시될 대체 텍스트를 포함합니다.
<figure> 요소를 사용하면 이미지를 블록 요소처럼 다루고, <figcaption>으로 캡션을 추가할 수 있습니다.
코드 표시 <code>와 <pre>
#
<code>는 인라인 코드를, <pre>는 여러 줄의 코드 블록을 표시하는 데 사용되는데요.
<pre> 태그 안에서는 공백 문자가 축소되지 않고 그대로 표시됩니다.
단락과 줄 바꿈 #
<p>는 다른 블록 요소와 작은 수직 간격으로 구분되는 단락을 나타내고, <br>은 단락 내에서 줄 바꿈을 만듭니다.
일반 컨테이너 <span>과 <div>
#
특별한 의미 없이 인라인 콘텐츠를 그룹화해야 할 때는 <span>을, 블록 콘텐츠를 그룹화해야 할 때는 <div>를 사용합니다.
블록 인용 #
<blockquote>는 다른 출처에서 가져온 블록 콘텐츠를 인용할 때 사용합니다.
제목 #
<h1>부터 <h6>까지의 제목 태그는 콘텐츠를 구조화하는 데 사용됩니다.
목록 #
HTML은 <ul>(순서 없는 목록)과 <ol>(순서 있는 목록) 두 종류의 목록을 지원하는데요.
목록의 항목은 항상 <li> 요소를 사용합니다.
표 #
HTML에서 표는 <table>, <thead>, <tbody>, <tr>, <th>, <td> 요소들을 조합하여 구조화된 데이터를 나타냅니다.
사용자 인터페이스 요소를 위한 HTML #
이 섹션에서는 UI 요소(컨트롤)로 표시되는 HTML 요소들을 탐색하는데요.
-
<label>: 체크박스와 같은 UI 요소에 설명 텍스트를 붙입니다. -
<input>:type속성에 따라 텍스트 필드, 비밀번호 필드, 날짜 선택기 등 다양한 데이터를 입력받습니다. -
<button>: 누를 수 있는 버튼을 표시합니다. -
<textarea>: 여러 줄의 텍스트를 입력받습니다. -
disabled속성: 컨트롤을 일시적으로 비활성화합니다. -
<form>: 여러 컨트롤을 그룹화하여 데이터를 서버로 전송하거나 자바스크립트로 처리합니다.
HTML, CSS, JavaScript의 연결 #
HTML이 콘텐츠의 고정된 구조를 정의한다면, CSS는 색상, 글꼴, 레이아웃 등 콘텐츠의 ‘스타일’을 변경하고, 프로그래밍 언어인 자바스크립트는 웹 페이지를 ‘상호작용’ 가능하게 만드는데요.
이 세 가지 웹 개발 기술은 각각 1991년, 1994년, 1995년에 만들어졌습니다.
콘텐츠와 표현의 분리 #
HTML은 콘텐츠를, CSS는 표현을 담당한다고 하는데요.
이러한 역할 분리는 콘텐츠의 접근성을 높이고, 화면 크기나 출력 매체(화면, 프린터)에 따라 동일한 콘텐츠를 다르게 포맷팅하는 것을 가능하게 합니다.
HTML 속성 id와 class
#
id와 class라는 두 HTML 속성은 HTML의 세계를 CSS와 자바스크립트의 세계와 연결하는 데 중요한 역할을 하는데요.
id는 단일 HTML 요소를 선택하기 위한 것이고, class는 하나 이상의 HTML 요소를 선택하기 위한 것입니다.
CSS에서는 #my-id와 .my-class 같은 문법으로 이들을 참조하고, 자바스크립트에서는 document.querySelector()를 사용해 HTML 요소를 가져올 수 있습니다.
브라우저에서 HTML 검사하고 수정하기 #
브라우저의 개발자 도구를 사용하면 HTML 요소를 검사할 수 있는데요.
이를 통해 HTML을 탐색하고, 브라우저 내에서 HTML을 직접 편집하여 즉시 변경 사항을 확인할 수 있습니다.
HTML은 문법에 매우 관대합니다 #
HTML은 문법 오류에 대해 불평하지 않고 어떻게든 페이지를 표시하려고 하는데요.
하지만 그렇다고 해서 올바른 문법을 지키지 않는 것이 권장되지는 않습니다.
HTML에 대해 더 알아보기 #
WHATWG HTML 표준은 초보자에게도 흥미로울 만큼 잘 작성되어 있고요.
MDN의 “HTML로 콘텐츠 구조화하기"나 구글의 web.dev 사이트에 있는 HTML 강좌도 훌륭한 자료입니다.