프로젝트

Mini Project : 프로필 페이지 만들기(HTML:1일차 과제)

Chansman 2025. 3. 28. 15:32

📌 HTML 프로필 페이지 만들기 실습

이 튜토리얼에서는 HTML을 사용하여 간단한 프로필 페이지를 만드는 과정을 안내하고, 텍스트 강조, 이미지 추가, 콘텐츠 구분 등을 실습을 통해 익힐 수 있습니다. 이 프로젝트를 통해 HTML의 기본 태그 사용법을 복습하고, 실제 웹 페이지를 만드는 경험을 쌓을 수 있습니다.

🐱 1. 프로필 페이지 만들기 프로젝트

  • 프로필 페이지 구성: 고양이 구키의 프로필을 HTML로 작성합니다.
  • 내용: 이미지, 소개글, 특징, 저작권 표시 등을 포함합니다.
  • 개인화: 제공된 예시를 바탕으로 자신만의 프로필 페이지를 만들어 봅니다.

✅ 실습 준비

  • 프로젝트를 시작하기 위해 폴더 구조를 정리하고, HTML 파일과 이미지를 저장할 폴더를 만듭니다.

🖼️ 2. 프로필 페이지 이미지 설정

  • 이미지 경로는 올바르게 설정해야 하며, 파일이 같은 폴더에 있어야 합니다.
  • 이미지가 다른 위치에 있을 경우 잘못된 URL로 인해 이미지가 표시되지 않습니다.
  • alt 속성을 추가하여 대체 텍스트를 제공하고, 웹 접근성을 높입니다.

✅ 이미지 설정 예시

<img src="cat.jpg" alt="귀여운 고양이" width="300" height="200">
  • src: 이미지 파일의 경로
  • alt: 이미지 로딩 실패 시 표시되는 대체 텍스트
  • width와 height: 이미지 크기 설정

📄 3. 소개 글 및 내용 구분 추가하기

  • div 태그를 사용하여 소개 글을 블록으로 묶습니다.
  • 문단은 p 태그로 작성하며, 여러 문단은 공백으로 구분됩니다.
  • 컨테이너 사용: 다양한 섹션을 나누어 콘텐츠를 그룹화합니다.

✅ 예시

<div class="intro">
  <p>고양이 구키는 호기심이 많고 높은 곳을 좋아하는 고양이입니다.</p>
  <p>집사와 함께 놀 때가 가장 행복한 순간이죠.</p>
</div>

✍️ 4. 줄바꿈과 강조 효과 처리

  • 줄바꿈을 하려면 <br> 태그를 사용하고, 강조하려면 strong, em 등의 태그를 사용합니다.
  • 강조 효과: strong은 굵은 글씨, mark는 형광펜 효과, em은 기울이기 등의 효과를 줄 수 있습니다.

✅ 예시

<p>고양이는 <strong>호기심</strong>이 많고, <mark>높은 곳</mark>을 좋아합니다.</p>

🎨 5. 프로필 페이지 저작권 표시하기

  • 저작권 표시: &copy; 엔티티 코드를 사용하여 저작권 기호를 표시할 수 있습니다.
  • 엔티티 코드는 일반 텍스트로 표시할 수 없는 기호를 나타낼 때 사용됩니다.

✅ 저작권 표시 예시

<p>&copy; 2023 고양이 구키의 프로필 페이지</p>

🎨 6. 프로필 페이지 마무리와 개인화

  • 아이디와 클래스 속성: 각 요소에 고유한 아이디를 부여하거나, 클래스를 사용하여 여러 요소에 공통 스타일을 적용합니다.
  • 속성 추가: title 속성을 추가하여 툴팁을 제공하거나, id와 class를 활용하여 특정 요소를 스타일링합니다.

✅ 아이디와 클래스 활용 예시

<div id="cookie-profile">
  <h1>고양이 구키의 프로필</h1>
</div>
  • id는 고유한 식별자로, 문서 내에서 한 번만 사용합니다.
  • class는 여러 요소에 공통 스타일을 적용할 수 있습니다.

✨ 7. 프로필 페이지 만들기 종합 정리

이 튜토리얼을 통해 HTML 기본 태그 사용법을 익히고, 자기만의 프로필 페이지를 만들 수 있는 방법을 배웠습니다. 실습을 통해 텍스트 강조, 이미지 처리, 저작권 표시 등 HTML을 웹 페이지에서 어떻게 활용할 수 있는지 배우셨을 것입니다.

✅ 핵심 포인트

  • HTML을 사용하여 이미지, 문단, 제목 등을 표시할 수 있습니다.
  • 강조 효과와 줄바꿈은 <strong>, <em>, <br> 등을 사용하여 구현합니다.
  • 웹 접근성을 고려하여 alt 속성 사용과 엔티티 코드 활용을 배웠습니다.

이제 HTML을 이용해 나만의 웹 페이지를 만들 수 있는 능력을 갖추셨습니다! 계속해서 실습을 진행하고, 더 많은 HTML 태그를 익혀보세요. 🚀🌐

🎯 마무리하며

이번 실습을 통해 HTML의 기본기를 확립하셨습니다. 이제 이 내용을 바탕으로, 여러분의 프로필 페이지를 자유롭게 개인화하고 확장할 수 있습니다. 앞으로도 계속해서 웹 개발을 즐기세요! 👏✨