HTML의 기본 개념과 문법 - 웹 개발의 첫걸음
HTML(Hyper Text Markup Language)은 모든 웹 페이지의 뼈대를 구성하는 핵심 언어입니다.
여기서 Hyper Text란 하이퍼링크를 통해 다른 문서나 리소스로 연결될 수 있는 텍스트를 의미합니다.
이는 웹의 가장 중요한 특징 중 하나로, 서로 다른 페이지를 연결하거나 다양한 리소스를 불러와 사용자에게 제공할 수 있게 합니다.
하이퍼링크(Hyperlink)란?
하이퍼링크는 사용자가 클릭하면 다른 웹 페이지, 파일, 이미지, 또는 같은 페이지 내 특정 위치로 이동하도록
만들어진 요소입니다. HTML에서는 <a> 태그를 사용하여 하이퍼링크를 생성합니다.
예를 들어 <a href="https://example.com">Example 사이트로 이동</a> 를 예로 들어보겠습니다.
위 코드는 "Example 사이트로 이동"이라는 텍스트를 클릭하면 https://example.com으로 이동하게 만듭니다.
하이퍼링크는 웹의 핵심 기능으로, 여러 문서와 자원을 쉽게 탐색할 수 있도록 돕습니다.
이를 통해 웹은 복잡한 정보 네트워크를 형성하며, 사용자 경험을 풍부하게 만듭니다.
하이퍼링크 역할
- 내부 링크 : 같은 웹 사이트 내의 다른 페이지로 연결합니다.
예: <a href="/hello.html">소개 페이지</a> - 외부 링크 : 다른 웹 사이트로 연결합니다.
예: <a href="https://google.com">Google로 이동<a> - 앵커 링크 : 페이지 내 특정 위치로 이동합니다.
예: <a href="#section1">섹션 1로 이동</a>
* 앵커 링크는 목차를 예로 들 수 있습니다.
목차의 소제목을 클릭하면 특정 위치로 이동하게 되는 것을 앵커 링크의 특징입니다.
이처럼 하이퍼링크는 HTML과 웹 페이지가 가진 연결성과 정보 전달의 핵심 역할을 담당합니다.
웹 페이지의 구조와 콘텐츠를 정의하며,
CSS와 함께 사용하면 디자인을, JavaScript와 함께 사용하면 동적인 기능을 구현할 수 있습니다.
이번 글에서는 HTML의 기본 개념과 문서 구조, 그리고 주요 요소에 대해 알아보겠습니다.
1) HTML이란 무엇인가?
HTML은 하이퍼텍스트(HyperText) 기능을 가진 마크업 언어로, 웹 페이지를 구성하고 다른 페이지로 이동할 수 있는 링크를 제공합니다.
- 웹 페이지란?
HTML 문서는 단순한 텍스트 파일로, 브라우저가 이를 해석하여 화면에 렌더링 하는 역할을 합니다. - HTML 확장자란?
HTML 파일은 보통 .htm 또는 .html 확장자를 사용합니다.
예를 들어, 이 글 역시 하나의 HTML 문서로 브라우저를 통해 여러분이 보고 있는 것입니다.
이러한 HTML 기반 구조 덕분에 우리는 월드 와이드 웹(World Wide Web)을 통해 정보를 공유할 수 있습니다.
2) HTML 문서의 기본 구조
HTML 문서는 브라우저가 읽고 처리할 수 있도록 특정 구조를 따라야 합니다.
HTML 문서의 기본 구성 요소는 다음과 같습니다.
- 문서 선언(DTD)
<!DOCTYPE html> 선언은 HTML5 문서임을 나타내며, 반드시 문서 최상단에 위치합니다. - HTML 요소
<html> 태그는 모든 내용을 감싸고, <head>와 <body>로 나뉩니다. - 헤드 영역
<head> 태그에는 메타데이터와 문서 제목(<title>)이 포함됩니다. - 본문 영역
<body> 태그는 실제로 화면에 표시될 콘텐츠를 포함합니다.
3) HTML의 주요 개념 : 태그, 속성, 시멘틱 마크업
HTML은 태그와 속성을 사용해 콘텐츠를 정의합니다.
이를 통해 브라우저가 콘텐츠의 의미를 이해하고 적절히 표시할 수 있습니다.
- 태그(Tag)
콘텐츠를 감싸는 시작 태그와 종료 태그로 이루어집니다.
예를 들어 <p>는 단락을 나타내고 </p>로 종료됩니다. - 속성(Attribute)
태그에 추가 정보를 제공합니다.
예를 들어 <img src="image.jpg" alt="이미지 설명">에서 src와 alt가 속성입니다. - 시멘틱 마크업
태그를 통해 콘텐츠의 의미를 명확히 나타내는 방식입니다.
예를 들어, <strong>은 중요한 내용을 강조하며, SEO에도 긍정적인 영향을 미칩니다.
결론 : HTML의 기초를 이해하고 활용하기
HTML은 웹 개발의 출발점으로, 콘텐츠의 구조를 정의하는 데 필수적입니다.
이번 글에서 다룬 HTML의 개념과 기본 문법을 바탕으로, 실제로 간단한 웹 페이지를 작성할 수 있습니다.
아직은 생소하고 어색한 영어 단어처럼 보이지만 자주 보게 된다면 익숙해지실 겁니다.
이 블로그에선 "이러한 것이 있구나~" 하면서 가볍게 봐주시면 감사하겠습니다.