[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오

"배운 모든 기술을 하나로! 나만의 첫 웹페이지를 완성해봅시다."

안녕하세요! 드디어 HTML 기초 연재의 마지막 시간입니다. 그동안 배운 기본 구조, 시맨틱 태그, 멀티미디어, 그리고 Form까지 모두 활용하여 간단하지만 멋진 '나만의 포트폴리오' 페이지를 만들어 보겠습니다.

1. 포트폴리오 설계하기

우리가 만들 페이지는 다음과 같은 구조를 가집니다.

📍 상단(Header): 이름과 간단한 메뉴

📍 본문(Main): 자기소개, 이미지, 기술 스택 목록

📍 연락처(Section): 문의하기 폼

📍 하단(Footer): 저작권 정보

2. 전체 코드 (실습)

아래 코드를 모두 복사해서 새 HTML 파일로 저장한 뒤 브라우저로 열어보세요. 여러분의 정보를 넣어 수정하면 더욱 좋습니다!

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>김철수의 포트폴리오</title> </head> <body> <!-- 헤더: 사이트의 제목과 내비게이션 --> <header> <h1>Welcome to My Space</h1> <nav> <a href="#about">소개</a> | <a href="#contact">연락처</a> </nav> </header> <hr> <!-- 메인: 핵심 콘텐츠 --> <main id="about"> <section> <h2>About Me</h2> <img src="profile.jpg" alt="내 프로필 사진" width="200"> <p>안녕하세요! 웹 개발을 공부하고 있는 <strong>김철수</strong>입니다.</p> </section> <section> <h3>My Skills</h3> <ul> <li>HTML5 구조 설계</li> <li>시맨틱 마크업</li> <li>기초 웹 접근성</li> </ul> </section> </main> <hr> <!-- 연락처 섹션 --> <section id="contact"> <h2>Contact Me</h2> <form> <label>이름: <input type="text" name="name"></label><br><br> <label>메시지: <br> <textarea name="message" rows="4" cols="30"></textarea> </label><br> <button type="submit">보내기</button> </form> </section> <!-- 푸터 --> <footer> <p>© 2024 Chulsoo Kim. All rights reserved.</p> </footer> </body> </html>

축하합니다! HTML 기초 완강!

이제 여러분은 웹의 구조를 스스로 설계할 수 있는 기초 체력을 길렀습니다.

'Frontend > HTML' 카테고리의 다른 글

[4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0)	2026.02.09
[3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0)	2026.02.09
[2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0)	2026.02.09
[1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0)	2026.02.09

[4강] 사용자 소통의 창구! Form 태그와 입력 양식

"유저의 데이터를 수집하고 소통하는 방법을 배워봅시다."

안녕하세요! 지난 시간까지는 정보를 보여주는 방법을 배웠다면, 오늘은 사용자의 정보를 입력받는 'Form(폼)'에 대해 알아보겠습니다. 회원가입, 로그인, 설문조사 등이 모두 이 기능을 통해 이루어집니다.

1. Form 태그의 역할과 속성

데이터를 서버로 보내기 위한 바구니 역할을 합니다. 가장 중요한 두 가지 속성이 있습니다.

✅ action: 데이터를 전달받을 서버의 주소를 지정합니다.

✅ method: 전달 방식 (GET: 주소창에 노출 / POST: 본문 뒤에 숨겨서 전송)

2. 다양한 입력 양식 (Input Types)

<input> 태그의 type 속성을 바꾸는 것만으로 다양한 모양을 만들 수 있습니다.

📝 text / password: 아이디와 비밀번호 입력창
🔘 radio / checkbox: 여러 항목 중 하나 또는 여러 개 선택
📅 date: 날짜 선택 캘린더 표시
🚀 submit: 작성을 마치고 서버로 전송하는 버튼

3. 간단한 문의하기 폼 예제 (실습)

사용자로부터 이름과 메일 수신 동의를 받는 폼 예시입니다. <label> 태그를 사용하면 글자를 클릭해도 입력창이 선택되어 편리합니다.

<form action="/submit-data" method="POST">
    <!-- 이름 입력 -->
    <label for="userName">이름:</label>
    <input type="text" id="userName" name="name" placeholder="이름을 입력하세요">
    <br><br>

    <!-- 관심 분야 선택 -->
    <p>관심 분야:</p>
    <label>
        <input type="checkbox" name="interest" value="coding"> 코딩
    </label>
    <label>
        <input type="checkbox" name="interest" value="design"> 디자인
    </label>
    <br><br>

    <!-- 전송 버튼 -->
    <input type="submit" value="문의하기">
</form>

상호작용의 핵심, Form!

복잡해 보이지만 type과 name 속성만 잘 기억하면 어떤 입력창도 만들 수 있습니다.

드디어 마지막! 다음 5강에서는 지금까지 배운 내용을 총동원해 '나만의 포트폴리오'를 완성해 볼게요!

'Frontend > HTML' 카테고리의 다른 글

[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0)	2026.02.09
[3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0)	2026.02.09
[2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0)	2026.02.09
[1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0)	2026.02.09

[3강] 텍스트와 멀티미디어! 생동감 있는 페이지 만들기

"이미지와 비디오로 독자의 시선을 사로잡는 법을 배워봅시다."

안녕하세요! 지난 시간에는 검색 엔진이 좋아하는 시맨틱 태그를 배웠습니다. 오늘은 웹페이지에 생동감을 불어넣는 텍스트 강조 기술과 멀티미디어(이미지, 비디오) 삽입 방법을 알아보겠습니다.

1. 텍스트를 풍성하게 만드는 태그

단순한 글자 나열보다 적절한 강조와 목록을 사용하면 가독성이 훨씬 좋아집니다.

✅ <h1> ~ <h6>: 제목 태그 (중요도에 따라 순차적 사용)

✅ <strong>, <em>: 중요한 텍스트를 굵게 또는 기울임으로 강조

✅ <ul>, <ol>, <li>: 순서 없는 목록과 순서 있는 목록 생성

2. 멀티미디어 삽입하기 (이미지 & 비디오)

웹사이트에 시각적인 요소를 추가할 때 사용하는 핵심 태그들입니다.

🖼️ <img> 태그: 이미지를 표시합니다.
- src: 이미지 경로 / alt: 이미지가 안 나올 때 보여줄 대체 텍스트(SEO 중요!)
🎥 <video> 태그: 동영상을 재생합니다.
- controls: 재생바 표시 / autoplay: 자동 재생 / loop: 반복 재생

3. 텍스트와 미디어 활용 예제 (실습)

아래 코드를 통해 실제 이미지를 불러오고 비디오를 제어하는 방법을 확인해 보세요.

<!-- 텍스트와 이미지 삽입하기 -->
<h2>내가 여행한 제주도</h2>
<p>제주도는 정말 <strong>아름다운 섬</strong>입니다.</p>

<img src="jeju.jpg" alt="제주도 바다 풍경" width="400">

<h3>제주도 여행 코스</h3>
<ul>
    <li>협재 해수욕장</li>
    <li>성산 일출봉</li>
</ul>

<!-- 비디오 삽입하기 -->
<h3>여행 브이로그</h3>
<video src="vlog.mp4" controls width="400">
    이 브라우저는 비디오 태그를 지원하지 않습니다.
</video>

시각적인 웹사이트의 완성!

이미지의 alt 속성을 채우는 습관은 검색 엔진 최적화와 웹 접근성의 기본입니다.

다음 4강에서는 사용자로부터 정보를 입력받는 'Form 태그'를 배워볼게요!

'Frontend > HTML' 카테고리의 다른 글

[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0)	2026.02.09
[4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0)	2026.02.09
[2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0)	2026.02.09
[1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0)	2026.02.09

[2강] 검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법

"의미 있는 태그로 웹사이트의 가치를 높여보세요."

안녕하세요! 지난 1강에서는 HTML의 기본 구조를 배웠습니다. 오늘은 단순히 화면에 보여주는 것을 넘어, 검색 엔진(네이버, 구글 등)이 내 글을 더 잘 이해하도록 돕는 '시맨틱 태그(Semantic Tags)'를 알아보겠습니다.

1. 시맨틱 태그란 무엇인가요?

'시맨틱(Semantic)'은 '의미론적인'이라는 뜻입니다. 즉, 태그 그 자체에 의미를 담아 브라우저와 검색 로봇에게 이 부분이 어떤 역할을 하는지 명확히 알려주는 태그를 말합니다.

✅ 비시맨틱 태그: <div>, <span> (내용의 의미를 알 수 없음)

✅ 시맨틱 태그: <header>, <nav>, <footer> (태그만 봐도 역할을 알 수 있음)

2. 주요 시맨틱 태그의 종류

웹사이트의 주요 구조를 잡을 때 사용하는 대표적인 태그들입니다.

🚩 <header>: 사이트의 로고, 제목, 상단 메뉴가 들어가는 영역
🧭 <nav>: 다른 페이지로 이동하는 링크 모음 (내비게이션)
📄 <main>: 해당 페이지의 가장 핵심적인 본문 내용
📰 <article>: 독립적인 포스팅, 뉴스 기사, 블로그 글 영역
🧩 <section>: 문서 내의 주제별 구역 나누기

3. 시맨틱하게 구조 잡기 (실습)

아래 코드는 웹사이트의 표준적인 레이아웃 구조입니다. 단순히 <div>만 쓰는 것보다 훨씬 명확합니다.

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>시맨틱 구조 배우기</title> </head> <body> <header> <h1>나의 기술 블로그</h1> <nav> <ul> <li>홈</li> <li>소개</li> </ul> </nav> </header> <main> <article> <h2>HTML 2강: 시맨틱 태그</h2> <p>시맨틱 태그를 쓰면 SEO에 아주 좋습니다.</p> </article> </main> <footer> <p>© 2024 MyBlog. All rights reserved.</p> </footer> </body> </html>

SEO를 위한 첫걸음!

시맨틱 태그는 검색 노출(SEO)뿐만 아니라 웹 접근성 향상에도 큰 도움이 됩니다.

다음 3강에서는 페이지를 풍성하게 만드는 '이미지와 비디오' 활용법을 배울게요!

'Frontend > HTML' 카테고리의 다른 글

[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0)	2026.02.09
[4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0)	2026.02.09
[3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0)	2026.02.09
[1강]웹 개발의 첫걸음! HTML 개념 이해와 기본 구조 마스터하기 (0)	2026.02.09

[1강] 웹 개발의 첫걸음! HTML 개념과 기본 구조 마스터하기

"웹사이트의 설계도를 그려봅시다."

안녕하세요! 오늘부터 웹 개발의 가장 기초인 HTML 연재를 시작합니다. 우리가 매일 사용하는 사이트들은 모두 이 HTML이라는 언어로 뼈대가 만들어져 있습니다.

1. 웹사이트의 3요소

웹사이트는 크게 세 가지 기술이 합쳐져 만들어집니다.

🏠 HTML (Structure): 건물의 뼈대 (벽, 창문, 문)
🎨 CSS (Presentation): 건물의 인테리어 (디자인)
⚡ JavaScript (Behavior): 건물의 기능 (동작)

2. 핵심 용어 정리

● 태그(Tag): 브라우저에게 내리는 명령어 (예: <p>)

● 요소(Element): 시작 태그부터 종료 태그까지의 한 덩어리

● 속성(Attribute): 태그에 추가 정보를 주는 값 (예: href, src)

3. 표준 HTML5 기본 구조

아래는 모든 웹페이지의 시작이 되는 표준 코드입니다. 내용을 확인하고 직접 작성해 보세요!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>나의 첫 홈페이지</title>
</head>
<body>
    <h1>안녕하세요! 반가워요.</h1>
    <p>드디어 첫 웹페이지를 만들었습니다.</p>
    
    <h3>내가 좋아하는 것들</h3>
    <ul>
        <li>코딩 공부하기</li>
        <li>커피 마시기</li>
    </ul>

    <a href="https://www.tistory.com">티스토리 바로가기</a>
</body>
</html>

오늘의 요약!

HTML은 웹사이트의 뼈대이며, 태그를 통해 브라우저와 소통합니다.

다음 2강에서는 검색 로봇이 좋아하는 '시맨틱 태그'에 대해 알아볼게요!

'Frontend > HTML' 카테고리의 다른 글

[5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0)	2026.02.09
[4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0)	2026.02.09
[3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0)	2026.02.09
[2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0)	2026.02.09

MinStudio

HTML