안녕하세요, 웹 개발을 시작하는 첫걸음, HTML에 대해 배워볼까요? 오늘은 웹 페이지의 백본이 되는 마크업 언어인 HTML에 대해 알아보고, 간단한 예제를 통해 실제로 적용해 보는 시간을 갖겠습니다.
자동목차
이론: HTML이란 무엇인가?
HTML은 'HyperText Markup Language'의 약자로, 웹 페이지를 구성하는 가장 기본적인 빌딩 블록입니다. 이 마크업 언어를 통해 웹 개발자는 웹 문서의 구조를 정의하고, 웹 브라우저에 텍스트, 이미지, 링크 등을 어떻게 표시할지 지시할 수 있습니다.
1. HyperText란?
HyperText는 단순한 텍스트 이상의 의미를 갖습니다. 이는 텍스트가 다른 문서로 연결될 수 있는 방식을 의미하는데, 웹에서는 이를 '하이퍼링크'라고 합니다. 여러분이 흔히 클릭하여 다른 페이지로 이동하는 그 모든 링크들이 바로 하이퍼텍스트의 예입니다.
2. Markup Language란?
Markup Language는 데이터를 구조화, 정의하고 스타일을 지정하는 언어입니다. HTML에서는 '<' (꺾쇠 괄호) 안에 '태그'라 불리는 특별한 텍스트를 사용하여 요소를 정의합니다. 이러한 태그들이 문서의 제목, 단락, 목록 등 다양한 구조를 생성하고 웹 브라우저에게 어떻게 그 콘텐츠를 표현할지 알려줍니다.
실습: HTML로 나만의 첫 웹 페이지 만들기
이제 이론을 바탕으로 실제 HTML을 작성해보겠습니다. 아래의 간단한 예제를 통해 기본적인 웹 페이지를 만들어보세요.
1. 먼저, 텍스트 편집기(예: Notepad, Sublime Text, VS Code 등)를 엽니다.
2. 다음의 HTML 코드를 입력합니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>HTML이란 무엇인가?</h1>
<p>HTML은 웹 페이지를 만들기 위한 마크업 언어입니다. 이는 텍스트, 이미지, 링크 등을 구조화하고 스타일링 할 수 있게 해줍니다.</p>
<a href="https://www.example.com">이곳을 클릭하면 example.com으로 이동합니다</a>
</body>
</html>
3. 파일을 'index.html'이라는 이름으로 저장하세요.
4. 저장한 HTML 파일을 더블 클릭하여 웹 브라우저에서 여세요.
여러분이 방금 작성한 코드는 HTML 문서의 기본 구조를 따르고 있습니다.
- <!DOCTYPE html>은 현재 문서가 HTML5 문서임을 정의합니다.
- <html> 태그는 HTML 페이지의 루트 요소입니다.
- <head> 태그 안에는 문서의 메타 정보가 들어갑니다. 여기서는 <title> 태그를 통해 페이지의 제목을 정의합니다.
- <body> 타그 안에는 실제 페이지에 표시될 콘텐츠가 들어갑니다.
<h1> 태그는 가장 큰 제목을 나타내고, <p> 태그는 단락을 의미합니다. <a> 태그는 하이퍼링크를 만드는 데 사용되며, href 속성에 이동하고자 하는 URL을 지정합니다.
마무리
이렇게 간단한 HTML 페이지를 만들어 보았습니다. 오늘 배운 내용을 바탕으로 여러분의 콘텐츠와 스타일에 맞게 HTML을 확장해 보세요. 이것이 바로 웹 개발의 첫걸음입니다.
다음 포스팅에서는 HTML 기본 구조 요소에 대해 더 깊게 다뤄볼 예정이니, 계속해서 HTML 실력을 쌓아가시길 바랍니다.
그럼, 행복한 코딩 시간 되세요!