오늘은 웹 개발의 출발점이라 불리는 HTML을 다뤄보려 한다.
HTML이 어떤 원리로 웹페이지를 구성하는지, 그리고 각각의 요소가 어떤 의미를 가지는지
실제로 사용해보며 차근차근 정리해보았다.
1. HTML이란 무엇인가?
[출처: 위키피디아_HTML]
HTML은 HyperText Markup Language의 줄임말이다.
이름 그대로 웹 문서를 구조화하는 언어다.
여기서 중요한 포인트는 바로 “프로그래밍 언어가 아니다”라는 점.
HTML은 어떤 계산을 하거나 조건을 판단하지 않는다.
대신 태그(tag) 라고 불리는 마크업(markup)을 이용해 문서의 구조를 표현하는 역할을 한다.
<h1>제목</h1>
<p>이것은 문단입니다.</p>이처럼 HTML의 목적은 “브라우저가 이해할 수 있는 문서의 골격을 만드는 것”이다.
cf) 기초 개념 📌
🔸 마크업 언어란?
마크업(markup) = “표식을 하다”
즉, 문서에 의미를 부여하기 위한 표식 언어
내용 그 자체가 아니라, 그 내용이 어떤 역할인지 설명하는 방식
🔸 렌더링(Rendering)이란?
브라우저가 HTML, CSS, JS 파일을 해석하여 화면에 실제 모습으로 그려내는 과정이다.
흐름은 아래와 같다:
- HTML → 문서의 구조를 파악
- CSS → 스타일을 적용
- JavaScript → 동작/인터랙션 적용
- 브라우저가 이것들을 종합해 화면에 표시
즉, 렌더링 결과는 코딩한 내용을 컴퓨터가 화면에 그리는 시각적 표현이라고 이해하면 된다.
2. 웹 문서를 구성하는 필수 요소 📌
🔸 부모 요소와 자식 요소
<body>
<h1>여기는 제목입니다.</h1>
<p>여기는 문단입니다.</p>
</body>위의 예시에서 <body>요소의 영역 안에 <h1>요소와 <p>요소가 들어 있다고 볼 수 있고,
<body>요소를 <h1>요소와 <p>요소의 부모 요소,
<h1>요소와 <p>요소를 <body>요소의 자식 요소라고 부를 수 있다.
🔸 블록 요소와 인라인 요소
- block 요소 - 한 줄 전체 차지 (ex. div, h1, p, section)
- inline 요소 - 내용만큼만 차지 (ex. span, a, strong)
🔸 여는 태그와 닫는 태그
<body>
<h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있다.</h1>
<div>
<h2>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있다.</h2>
</div>
</body>위의 예시에서 <body>요소를 예로 들면,
<body>가 여는 태그, </body>가 닫는 태그이다.
여는 태그와 닫는 태그 사이에는 텍스트를 넣을 수도 있고, 다른 요소를 자식 요소로 넣을 수도 있다.
예외로 <br>요소는 닫는 태그가 없이 단독으로 사용되며, 빈 공간을 만든다.
이제 아래 이미지에 사용된 코드를 기준으로 하나씩 해석해보자.
[캡쳐 1-1. 실습 결과 1]
2.1. <!DOCTYPE html>
HTML 문서의 첫 번째 줄에 위치하는 선언으로, 이 문서가 HTML5 문법을 사용한다는 의미이다.
브라우저는 이 선언을 보고
- 어떤 규칙(표준)에 따라 문서를 해석할지 결정
- 오래된 문서(예: HTML4)인지, 최신 문서인지 구분
즉, HTML의 “버전 정보”라고 보면 된다.
2.2. <html lang="en">
HTML 문서의 가장 바깥을 감싸는 루트 요소.
여기서 lang="en"은
이 문서의 기본 언어가 영어임을 의미한다.
한국어였다면, <html lang="ko"> 를 사용하면 된다.
2.3. <head>
눈에 보이는 콘텐츠는 아니지만, 문서 정보(메타데이터)를 포함한다.
- 문자 인코딩
- 화면(viewport) 설정
- 문서 탭 제목(title)
- CSS 연결
- 검색 엔진용 정보(meta tags)
즉, 브라우저가 문서를 제대로 이해하기 위해 필요한 정보들이 head 안에 들어간다.
2.4. <meta charset="UTF-8">
문서에서 사용하는 문자 체계를 지정한다.
UTF-8은 전 세계 대부분의 문자를 표현할 수 있어 표준처럼 쓰인다.
HTML에서 한글이 깨지는 문제는 대부분 이것이 없어서 발생한다.
2.5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 웹의 핵심.
모바일 기기에서 화면이 너무 작게 보이지 않도록 “뷰포트(화면 영역)”을 조정한다.
- width=device-width → 기기 화면 너비에 맞게 표시
- initial-scale=1.0 → 기본 확대/축소 비율
이 한 줄이 없으면 모바일에서 웹 사이트가 “축소된 풀버전”처럼 보여서 글씨가 거의 안 읽힌다.
2.6. <title>
브라우저 탭의 제목. 아래와 같이 사용한다.
<title>(내 첫 HTML 문서)</title>2.7. <body>
실제 화면에 보이는 모든 요소가 들어가는 영역.
텍스트, 이미지, 링크, 버튼, 섹션 구조
모든 UI 요소가 body 안에서 만들어진다.
3. 과제를 수행하며 사용한 요소들
3.1. <h1>, <p> 등의 태그
HTML은 문서의 구조적 의미를 나타내는 태그를 사용한다.
<h1>가장 큰 제목</h1>
<h2>부제목</h2>
<p>단락(문단)</p>이 태그들은 “어떻게 보인다”보다
무엇을 의미하는가(semantic) 가 더 중요하다.
3.2. <a href="(주소)">(웹에 보여지는 부분)</a>
하이퍼링크를 연결할 때 사용한다.
3.3. 리스트 관련 요소들
-
<ul></ul>- 순서가 없는 리스트를 정의한다. -
<ol></ol>- 순서가 있는 리스트를 정의한다. -
<li></li>- 리스트 목록을 정의한다. -
<dl></dl>- 설명 목록을 정의한다. -
<dt></dt>- 설명 목록에서 용어를 정의한다. -
<dd></dd>- 설명 목록에서 용어를 설명한다.
4. 추가로 연습해 본 요소들
4.1. 웹 페이지 꾸미기
[캡쳐 1-2. 나만의 웹 페이지 만들기]
(1) <body>요소의 여는 태그 안에 style을 지정해서 배경 색을 정할 수 있다.
style="background-color:(색 번호);"
(2) 여는 태그 안에 style을 지정해서 폰트의 스타일, 크기, 색, 위치를 지정할 수 있다.
style="font-family: (폰트 스타일); font-size:(숫자)%; color:(색 번호); text-align:(위치);"
(3) <div></div>를 사용하여 영역을 나눠줄 수 있다.
(4) &#x(이모지 번호);를 쓰면 이모지를 넣을 수 있다.
(5) <b>(텍스트)</b>로 볼드체 사용이 가능하다.
4.2. favicon 띄우기
[캡쳐 1-3. favicon 띄우기]
(1) 띄우고자 하는 favicon 파일을 준비한다.(아래 참고 사이트 확인)
[출처: w3school_Favicon]
(2) <title>요소 아래에 다음 요소 입력
- png 파일:
<link rel="icon" type="image/png" href="(파일이 위치한 경로)" sizes="(사이즈)" /> - .ico 파일:
<link rel="shortcut icon" href="(파일이 위치한 경로)" />
처음 위와 같이 입력했는데, 파비콘이 정상적으로 출력되지 않는 문제가 발생했다.
검색을 해보니 파비콘 파일이 위치한 경로가 매우 중요했던 것.
즉시 파비콘 파일을 .html 파일이 위치한 폴더로 옮겨주자
Chrome에서는 정상적으로 출력되는 것을 확인할 수 있었다.
두번째로 발생한 문제는 Safari에서 정상 출력이 되지 않았던 것.
찾아보니 Safari는 파비콘 캐시를 정말 오래 붙잡고 있어서
코드를 수정해도 파일명이 같으면 예전 걸 계속 보여주거나 아예 안 불러오는 경우가 많다고 한다.
그래서 ?v=10과 같이 버전 파라미터를 추가하여 강제로 새 파일로 인식하도록 만들었다.
결과는 성공적!
4.3. PDF 미리보기 연결
[캡쳐 1-4. PDF 파일 미리보기 연결]
(1) 올리고자 하는 pdf파일을 구글 드라이브에 올린다.
(2) 액세스 권한을 "링크가 있는 모든 사용자"로 설정한다.
(3) 링크를 추출해서 ID를 확인한다.
(4) 출력하고자 하는 위치에
<p><iframe src="https://drive.google.com/file/d/(확인해둔 링크)/preview" width="(너비)" height="(높이)"></iframe></p> 입력.
4.4. 최종 출력물 🐳
[캡쳐 1-5. favicon이랑 PDF가 정상적으로 출력된 웹 페이지]
favicon 출력 시키는 과정이 험난했지만, 해결하고 실제로 저렇게 뜨는 모습을 보니 정말 뿌듯했다.
앞으로도 문제 상황이 발생했을 때 충분히 해결할 수 있다는 자신감을 얻었다.
[참고한 사이트 목록]
