티스토리 뷰

카테고리 없음

귀여운 고양이 두부의 프로필 페이지, HTML로 쉽게 만들기

퀸도도 2025. 6. 7. 10:22

고양이 두부의 이야기를 담은 프로필 페이지를 직접 만들어보며
HTML의 기초 문법과 구조를 재미있게 익혀보는 미니 프로젝트입니다.

초보자를 위한 HTML 실습 프로젝트, 무엇을 배울 수 있을까?

이 글은 HTML을 막 배우기 시작한 분들이
재미있고 쉽게 실습할 수 있는 예제를 소개하기 위해 작성되었습니다.

고양이 ‘두부’의 귀여운 매력을 담은 프로필 페이지를 직접 만들어보면서
HTML 기본 태그, 구조, 특수 문자 사용 등 실습을 통해 핵심 개념을 배워보세요.

고양이 두부, 소개부터 시작해볼까요?

고양이 두부는 작고 다리가 짧지만, 순둥순둥하고 따뜻한 성격의 반려묘입니다.
이 미니 프로젝트는 바로 이 귀여운 고양이의 프로필 페이지를 만들며
HTML을 자연스럽게 익히는 방식으로 구성되어 있습니다.

두부의 소개를 텍스트로 표현하고,
사진과 리스트, 강조 태그들을 함께 사용하는 예제를 통해
웹페이지의 기본기를 다질 수 있습니다.

HTML 기본 구조부터 천천히 익혀봐요

HTML 문서는 가장 먼저 <!DOCTYPE html> 선언으로 시작합니다.
그 아래 <html>, <head>, <body> 태그가 문서를 구성하는 기본 골격입니다.

<html> 태그는 문서 전체를 감싸는 최상위 태그
<head> 안에는 문서 정보, 문자 인코딩, 제목 등이 위치
<body> 안에는 사용자에게 실제로 보여지는 콘텐츠가 포함됩니다

HTML을 처음 접하는 분이라면 이 구조를 이해하는 것이 가장 중요합니다.

제목, 문단, 이미지 태그의 조화로운 사용

두부의 프로필 페이지에서는 아래 태그들을 활용해 콘텐츠를 구성합니다.

<h1>: 페이지의 가장 큰 제목
<p>: 일반적인 문단 설명
<img>: 이미지를 삽입할 때 사용하며 alt 속성은 이미지 설명 제공

예를 들어, 다음과 같은 코드가 들어갑니다:

<h1>고양이 두부의 프로필 페이지</h1>
<img src="images/my-cat.jpg" alt="고양이 두부의 앉아있는 사진" width="250" height="300">

이미지는 시각적 흥미를 더하고,
alt 속성은 접근성 향상과 SEO에 도움이 됩니다.

콘텐츠를 나누는 div 태그와 id 활용

웹페이지에서 정보를 구분 짓는 것은 가독성을 높이는 핵심입니다.
<div> 태그는 콘텐츠 영역을 나누는 데 효과적이며,
id 속성을 함께 사용하면 특정 블록을 쉽게 식별하고 꾸밀 수 있습니다.

예시:

<div id="introduce">
  <p>안녕하세요. 수컷 고양이 두부라고 합니다.</p>
</div>

이 구조는 나중에 CSS를 통해 개별 스타일을 적용할 때도 유용하게 활용됩니다.

리스트와 강조 태그로 정보에 생기를 더하다

두부의 이모저모를 소개할 때는 순서 있는 리스트인 <ol> 태그를 사용했습니다.
리스트 항목 안에는 <strong>, <em>, <mark> 등 다양한 강조 태그가 들어갑니다.

아래 표는 사용된 태그의 역할을 정리한 것입니다.

태그명 역할 설명

<strong>	굵은 글씨로 중요 요소 강조
<em>	기울임으로 의미 강조
<mark>	형광펜처럼 강조 표시

이러한 태그들은 사용자에게 중요하거나 흥미로운 포인트를 시각적으로 전달하는 데 매우 유용합니다.

<span>&copy; 두부</span>

이처럼 HTML에서는 특수 기호들도 엔티티 형태로 쉽게 표현할 수 있습니다.
이것은 페이지의 신뢰도와 완성도를 높여주는 요소입니다.

두부 페이지 전체 코드 다시 보기

구성 요소 태그 종류 설명

제목 영역	<h1>	페이지 메인 제목
이미지	<img>	두부 사진
소개 문단	<div>, <p>	텍스트 설명 영역
리스트	<ol>, <li>	두부의 성격 표현
강조	<strong>, <em>, <mark>	시각적 포인트 부여
저작권	<span> + ©	저작권 기호 처리

이 모든 요소를 조합해 만든 HTML 코드는 아래와 같습니다:

HTML 배우기의 즐거움, 두부와 함께라면 충분해요

고양이 두부의 프로필 페이지는
HTML 기본기를 한 번에 익힐 수 있는 실습 예제입니다.

단순한 텍스트와 이미지 삽입을 넘어서
리스트, 강조 태그, 구조화된 콘텐츠 구성까지 한 번에 경험할 수 있어
웹개발의 첫걸음으로 아주 적합합니다.

다음에는 이 페이지에 CSS 스타일을 입혀
두부의 매력을 더 돋보이게 꾸며볼까요?