1.<head>태그 - 보이지 않지만 중요한 정보
HTML 문서는 <html> 태그 안에 <head>와 <body>로 구성됩니다.
이 중 <head>는 사용자가 웹페이지에서 직접 보지는 않지만, 웹페이지의 설정 정보를 담는 부분이라면,
<body>는 화면에 실제로 표시되는 모든 콘텐츠가 담기는 영역입니다.
우리가 브라우저에서 보는 텍스트, 이미지, 버튼 링크 등은 모두 이 <body>안에 들어 있습니다.
보통 Visual studio code 개발 환경을 사용한다면 먼저 index.html이라는 파일을 생성하고, 파일 내부에서 !를 치고 엔터를
누른다면 다음 사진과 같이 기본 head와 body태그가 생성될 것입니다.
먼저 <head>내부의 요소에 대해서 간략하게 설명하면 다음과 같습니다.
- <meta charset="UTF-8"> : 한글이나 특수문자 처리를 위한 인코딩 설정
- <title> : 브라우저 탭에 표시되는 제목
이러한 <head>를 이용해 나중에 배우게 될 CSS, JavaScript, 폰트, 아이콘 등의 외부 파일도 연결할 수 있습니다.
이제 다음으로 <body> 태그 내부에 사용되는 태그들에 대해서 간략하게 배워보겠습니다.
2.제목 태그 <h1>~<h6> - 문서의 계층 구조 만들기
웹 문서에서 제목은 단순한 글씨 크기 이상의 의미를 갖습니다.
HTML은 <h1>부터 <h6>까지 총 6단계의 제목 태그를 제공합니다.
숫자가 작을수록 더 높은 계층(중요도)의 제목을 의미하며, 크기도 더 큽니다.
앞서 배운 <body>태그 내부에 작성해보도록 하겠습니다.
예시:
<body>
<h1>나의 첫 웹페이지</h1>
<h2>HTML의 구조</h2>
<h3>head 태그</h3>
</body>
해당 코드를 live server 확장자를 통해서 실행해본다면 다음과 같은 화면이 출력되는 것을 볼 수 있습니다.
프론트엔드 개발자는 이 구조를 기반으로 스타일을 일관되게 적용하거나, 목자를 자동 생성하는 기능,
스크롤 내비게이션, 접근성 마크업에 활용합니다. 이는 나중에 심화 강의에서 확인해보도록 하겠습니다.
3. 강조 태그 <em> - 정보에 의미를 더하는 마크업
HTML은 단순히 글을 예쁘게 보이게 하는 게 아니라, 문서 구조와 의미를 표현하는 언어입니다.
강조 태그를 사용하면 텍스트의 논리적인 중요성을 부여할 수 있습니다.
<em>태그는 문장에서 강조 또는 강조된 어조를 표현할 때 사용합니다.
예시:
<body>
<h1>이것은 head 태그 입니다.</h2>
<em>이것은 강조 태그입니다.</em>
</body>
해당 코드를 실행해서 확인해본다면 다음과 같이 제목 태그와 다르게 글씨가 기울어지게 강조된 것을 확인할 수 있습니다.
4. 단락 태그 <p> - 문장을 구조적으로 정리하기
HTML에서 단락(paragraph)을 나타내는 기본 태그는 <p>를 사용합니다.
텍스트를 줄 바꿈하거나 문단을 나눌 때 꼭 사용해야하는 태그입니다.
예시:
<body>
<p>이것은 첫번째 문단입니다.</p>
<p>이것은 두번째 문단입니다.</p>
</body>
해당 코드를 실행해서 확인해보면 다음과 같이 문단이 분리돼서 작성이 되는 것을 볼 수 있습니다.
여러 문장을 한줄로 계속 나열하면 읽기 불편하므로, 정보 단위로 나눠 <p>태그로 감싸는 습관이 중요합니다.
5. 리스트(List) - 정보를 깔끔하게 나열하는 방법
정보를 목록 형식으로 정리할 때는 리스트를 사용합니다.
HTML에는 순서가 없는 리스트 <ul>와 순서가 있는 리스트 <ol>을 기본적으로 사용합니다.
예시:
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>설계</li>
<li>개발</li>
<li>배포</li>
</ol>
</body>
해당 코드를 실행하면 다음과 같이 <ul>태그로 감싸면 순서가 없는 리스트, <ol>태그로 감싸면 순서가 있게 리스트가
작성되는 것을 확인할 수 있습니다.
리스트는 메뉴 구성, 작업 순서, 정리된 정보 표현 등 UI구현의 기초 도구입니다. 후에 CSS를 적용하면
드롭 다운 메뉴, 사이드바 등 다양한 형태로 확장할 수 있습니다.
6. <div>와 <span> - 구조와 스타일의 기반
<div>와 <span>은 HTML 구조를 설계할때 매우 자주 등장하는 태그입니다.
먼저 <div>는 블록 레벨 요소로, 화면 전체 가로 영역을 차지하며 구획을 나눌 때 사용합니다.
다음으로 <span>은 인라인 요소로, 문장 안에서 특정 부분에 스타일을 적용할 때 쓰입니다.
예시:
<div class="card">
<h2>프로젝트 소개</h2>
<p>이 프로젝트는 HTML 학습을 위한 예제 입니다.</p>
</div>
<p>HTML은 <span style="color:blue;">프론트엔드의 기초</span>입니다.</p>
해당 코드를 실행하면 다음과 같은 화면이 출력됩니다. <span>태그로 감싸 원하는 구간에만 스타일을 적용한 모습입니다.
여기서 나오는 class와 style은 아직 세세하게 알지 않아도 되니 넘어가도록 하겠습니다.
간단하게 설명하면 두 태그는 CSS와 JavaScript의 타겟이 되는 기본 단위라는 것을 알고 넘어가면 좋을 거 같습니다.
7. 이미지 태그 <img> - 시각 요소 삽입
웹페이지에서 시각적인 요소를 넣기 위해 사용하는 것이 바로 <img> 태그 입니다.
예시:
<img src="cat.jpg" alt="귀여운 고양이" width="300">
해당 예시에 대해서 각 요소에 대해서 살펴보겠습니다.
- src : 이미지 파일 경로
- alt: 이미지 설명(이미지가 로딩되지 않을 때 표시되며, 접근성 향상에 중요)
- width, height : 이미지 크기 조절
위 코드를 기반으로 파일을 실행하면 다음과 같이 고양이 사진이 출력되는 것을 볼 수 있습니다.
8. 링크 태그 <a> - 페이지를 연결하는 하이퍼링크
웹의 핵심은 연결성입니다. HTML에서는 <a> 태그를 이용하여 다른 페이지, 외부 링크, 이메일 등 다양한 목적지를
연결할 수 있습니다.
예시:
<a href="https://google.com">구글 접속하기</a>
- href에 원하는 페이지, 외부 링크를 입력하면 해당 경로로 이동할 수 있습니다.
파일을 실행하면 다음과 같이 '구글 접속하기'라는 문구를 클릭할 수 있게 됩니다.
해당 문구를 클릭하게 되면 다음과 같이 구글 사이트로 접속할 수 있게 됩니다.
실제 웹 서비스에서는 버튼, 네비게이션, 카드 컴포넌트 안에서도 <a>태그를 활용할 수 있게 됩니다.
마무리: HTML 기초, 프론트엔드의 시작점입니다.
HTML은 웹 개발의 출발점입니다. 단순히 구조만 짜는 게 아니라, 콘텐츠의 의미를 명확히 표현하고,
디자인(CSS)과 동작(JavaScript)을 연결하기 위한 기반 언어입니다. 이 글에서 소개한 다양한 태그는 프레임 워크로
넘어가기 위한 매우 기본적인 사항으로 꼭 숙지하기 바랍니다. 프론트엔드 개발자로 성장하고 싶다면, HTML부터 탄탄하게 다져보세요!
다음 글에서는 HTML의 약간의 심화 버전 폼 태그에 대해서 간략하게 알아보겠습니다. 감사합니다.
'풀스택 개발자 로드맵' 카테고리의 다른 글
| HTML이 뭐에요? 진짜 쉬운 기초 개념 설명서 (1) | 2025.06.28 |
|---|
