이번에는 새로운 HTML 기술을 연습하기 위해 흥미로운 코딩 과제를 진행해 보겠습니다. 이 과제에서는 컨버스 올스타 운동화의 구성 요소를 만들어 볼 것입니다. 이 구성 요소는 전자 상거래 스토어에서 신발 한 켤레를 나타내는 작은 부분이라고 생각하시면 됩니다. 이 구성 요소에는 가격, 짧은 설명, 링크, 제품 정보 등이 포함될 것입니다.
CodePen 소개 및 사용 방법
우선, 이 과제를 진행하기 위해 CodePen.io라는 온라인 코딩 플랫폼을 사용할 것입니다. CodePen은 HTML, CSS, JavaScript 코드를 온라인에서 작성하고 즉시 결과를 확인할 수 있는 매우 유용한 도구입니다. 물론 이 과제를 완료하기 위해 꼭 CodePen을 사용해야 하는 것은 아니며, 로컬 컴퓨터에서 코드 편집기를 사용하셔도 됩니다.
CodePen 사용 방법:
- 웹 브라우저에서 CodePen.io로 이동합니다.
- 페이지 상단의 "Start Coding" 또는 "Create" 버튼을 클릭하여 새로운 Pen을 생성합니다.
- 새로 생성된 Pen에서는 HTML, CSS, JavaScript를 각각 입력할 수 있는 편집기가 나타납니다.
- 코드를 입력하면 우측 또는 하단의 "Result" 창에서 실시간으로 결과를 확인할 수 있습니다.
- 작업을 저장하려면 무료 계정을 생성하셔야 합니다. 저장하면 고유한 URL이 생성되어 다른 사람과 코드를 공유할 수 있습니다.
과제 수행을 위한 힌트
이제 과제를 수행하기 위한 몇 가지 힌트를 드리겠습니다.
-
<article>요소 사용: 모든 콘텐츠를<article>요소 안에 감싸주세요.<article>요소는 블로그 게시글이나 뉴스 기사뿐만 아니라 독립적인 콘텐츠 단위를 나타낼 때 사용할 수 있습니다. 전자 상거래 사이트에서 제품 하나하나를<article>로 감싸는 것은 매우 적절한 사용 방법입니다. -
적절한 제목 요소 사용: 페이지 내의 구성 요소이므로 메인 제목인
<h1>대신<h2>또는<h3>를 사용하세요. 각 페이지에는 하나의<h1>만 있어야 하며, 그 이하의 계층 구조를 위해<h2>,<h3>등을 사용합니다. -
이미지 삽입: 이미지를 추가할 때 CodePen에서는 무료 계정으로 이미지를 업로드할 수 없기 때문에, 이미지의 URL을 직접 사용해야 합니다. 아래의 이미지를 사용할 수 있습니다.
<img src="https://cdn.freecodecamp.org/curriculum/css-conquered/book-cover.jpg" alt="컨버스 올스타 운동화" width="250" height="250"> -
HTML 엔터티 사용: 특수 문자를 표시하기 위해 HTML 엔터티를 사용합니다. 예를 들어, 오른쪽 화살표는
→로 표시할 수 있습니다. -
<button>요소 사용: 클릭 가능한 버튼을 만들기 위해<button>요소를 사용합니다. 버튼에는 "장바구니에 추가"와 같은 문구를 넣을 수 있습니다.
실습 코드 작성하기
위의 힌트를 바탕으로 전체 코드를 작성해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨버스 올스타 제품 구성 요소</title>
</head>
<body>
<article>
<h2>컨버스 올스타 척 테일러</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-conquered/book-cover.jpg" alt="컨버스 올스타 운동화" width="250" height="250">
<p><strong>₩59,000</strong></p>
<p>무료 배송을 제공합니다. 이 신발은 클래식한 디자인과 편안한 착용감을 자랑합니다.</p>
<p>제품 정보는 <a href="https://www.converse.co.kr/">여기</a>에서 확인하세요 →</p>
<h3>특징:</h3>
<ul>
<li>캔버스 소재</li>
<li>러버 솔</li>
<li>아이코닉 디자인</li>
</ul>
<button type="button">장바구니에 추가</button>
</article>
</body>
</html>코드 설명
<!DOCTYPE html>: HTML 문서임을 선언합니다.<html lang="ko">: 문서의 언어를 한국어로 설정합니다.<head>: 문서의 메타데이터를 포함합니다.<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.<title>: 브라우저 탭에 표시될 문서의 제목을 설정합니다.
<body>: 실제 화면에 표시될 콘텐츠를 포함합니다.<article>: 독립적인 콘텐츠 단위를 나타냅니다.<h2>: 제품의 이름을 표시합니다.<img>: 제품 이미지를 표시합니다.src: 이미지의 URL을 지정합니다.alt: 이미지를 불러올 수 없을 때 대체 텍스트를 제공합니다.width,height: 이미지의 크기를 지정합니다.
<p><strong>₩59,000</strong></p>: 제품의 가격을 굵게 표시합니다.<p>: 제품에 대한 간단한 설명을 제공합니다.<p>: 제품 정보로 연결되는 링크를 제공합니다.<a href="URL">: 링크를 생성합니다.→: 오른쪽 화살표를 표시하기 위해 HTML 엔터티를 사용합니다.
<h3>: 섹션의 부제목을 표시합니다.<ul>: 제품의 특징을 나열합니다.<li>: 리스트 아이템을 나타냅니다.
<button type="button">: 클릭 가능한 버튼을 생성합니다.
마무리
이번 과제를 통해 HTML의 다양한 요소들을 활용하여 웹 페이지의 구성 요소를 만드는 방법을 연습해 보았습니다. 특히, <article>, <section>, <header>, <footer> 등의 시맨틱 요소들을 적절히 사용하여 문서의 구조를 명확하게 표현하는 것이 중요합니다. 또한, 이미지나 링크, 리스트, 버튼 등을 사용하여 풍부한 콘텐츠를 구성하는 방법도 익힐 수 있었습니다.
이제 CSS를 활용하여 이 구성 요소를 더욱 아름답게 스타일링해 보세요. 다음 섹션에서는 CSS의 기본에 대해 배우고, 콘텐츠를 더욱 매력적으로 꾸미는 방법을 알아보겠습니다.
