📚 필수 과제
1. 프로필 전체 레이아웃 구성하기
1️⃣ 목적
- HTML의 시맨틱 구조를 이해하고 구성한다.
- <div>를 사용해 섹션을 나누는 구조를 익힌다.
2️⃣ 구현 내용
- 총 4개의 <div> 를 활용해서 프로필 페이지의 전체 섹션 구조를 만들어보세요.
<div class="container">
<div class="profile">
<figure class="image">
<img src="myimage.jpeg" alt="서재원 미모티콘" />
</figure>
<h2>서재원</h2>
<p>커머스 Spring 1기 수강생 서재원입니다.</p>
<p>백엔드 개발자를 꿈꾸며 웹개발 기초 과제를 수행하고 있습니다.</p>
<p>부족함은 많지만 노력만큼은 가장 넘치는 구성원이 되기 위해 노력하겠습니다!</p>
</div>
<div class="hobby section">
<h3>취미</h3>
<ul class="list">
<li><span class="chip">코딩</span></li>
<li><span class="chip">여행</span></li>
<li><span class="chip">운동</span></li>
<li><span class="chip">수영</span></li>
<li><span class="chip">게임</span></li>
</ul>
</div>
<h3>관심분야</h3>
<ul class="list">
<li><span class="chip pink">Java</span></li>
<li><span class="chip pink">Javascript</span></li>
<li><span class="chip pink">Spring</span></li>
<li><span class="chip pink">Backend</span></li>
<li><span class="chip pink">Coding</span></li>
</ul>
<div class="footer">
<p>📧 이메일 : <a href="mailto:stark77@naver.com">stark77@naver.com</a></p>
<p>📗 Github : <a href="https://github.com/sjww0604/sparta" target="_blank">https://github.com/sjww0604/sparta</a></p>
<p>📍 위치 : 서울 대한민국</p>
</div>
</div>
- container : 전반적인 큰 틀의 div 구역을 설정하여 내부에 들어가는 이미지 / 내용들을 정렬 및 정리하는 구조로 설정
- profile : 프로필 페이지에 노출되는 대표 이미지에 대한 div 태그 설정
- hobby section : 3번 & 4번 문항 기술 스택 및 관심분야 을 나열하는 과정에 대한 태그 설정
- footer : 소통 채널 정보 작성란 태그 설정
+. 위 코드블럭은 <body> 내 포함되는 내용으로 HTML 관련 내용을 다루고 있음
+. <ul> / <li> 에 대해서는 아래 문항에 포함되는 내용으로 후술 예정
2. 프로필 이미지와 자기소개 문구 작성하기
1️⃣ 목적
- 이미지와 텍스트 태그의 활용 방법을 익혀보세요.
- 프로필에 어울리는 콘텐츠 구성을 연습해보세요.
2️⃣ 구현 내용
- 프로필 이미지를 나타내는 <img> 태그를 사용해보세요.
- 간단한 자기소개 문구를 함께 작성해보세요.
<style>
* {box-sizing: border-box;}
.profile{
overflow: auto;
}
figure.image {
float: left;
margin: 0 24px 8px 0; /* 오른쪽·아래 여백 */
width: 160px; height: 160px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
figure.image img { width: 100%; height: 100%; object-fit: cover; display: block;}
.profile h2 { margin: 0 0 4px; line-height: 1.2; }
.profile p { margin: 6px 0; line-height: 1.6; }
</style>
</head>
<body>
<div class="container">
<div class="profile">
<figure class="image">
<img src="myimage.jpeg" alt="서재원 미모티콘" />
</figure>
<h2>서재원</h2>
<p>커머스 Spring 1기 수강생 서재원입니다.</p>
<p>백엔드 개발자를 꿈꾸며 웹개발 기초 과제를 수행하고 있습니다.</p>
<p>부족함은 많지만 노력만큼은 가장 넘치는 구성원이 되기 위해 노력하겠습니다!</p>
</div>
- CSS 구문에서 img 태그를 꾸미기 위해 figure.image , figure.image img 를 통해 구성
ㄴ 이미지 삽입 및 body 내 자기소개 문구를 구성함으로서 아래와 같은 결과물을 도출해 냄
3. 기술 스택 리스트 작성하기
1️⃣ 목적
- 리스트 태그(<ul>, <li>)의 사용법을 익혀보세요.
- 기술 정보를 구조적으로 표현하는 방법을 배워보세요.
2️⃣ 구현 내용
- 본인의 기술 스택을 <ul>과 <li> 태그를 이용해 리스트 형태로 작성해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>커머스 Spring 1기 서재원 프로필</title>
.section {margin-top: 28px;}
.section h3 {margin: 0 0 12px; font-size: 20px; border-left: 6px solid greenyellow; padding-left: 10px;}
.list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0;}
.chip {
display: inline-block; padding: 6px 12px;
background: white; color: green; border: 1px solid lightgreen;
border-radius: 9999px; font-size: 14px; font-weight: 600; user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="hobby section">
<h3>취미</h3>
<ul class="list">
<li><span class="chip">코딩</span></li>
<li><span class="chip">여행</span></li>
<li><span class="chip">운동</span></li>
<li><span class="chip">수영</span></li>
<li><span class="chip">게임</span></li>
</ul>
</div>
</div>
</body>
</html>
- CSS 구문의 border-radius 를 9999px; 로 부여함으로서 입력된 리스트 형태의 단어들을 알약 모양으로 구성함
취미 관련 내용은 .chip 으로 세부내용을 설정(초록색 계열의 알약모양)
<ul> : 비정렬 목록 태그로 순서가 중요하지 않은 목록을 나타낼 때 사용. 하나 이상의 <li>를 구성요소로 가지고 있어야 사용 가능
<li> : 목록 안의 아이템 항목의 개념
<span> : 문장 단위로 텍스트 영역을 지정
4. 관심 분야를 표 형태로 표현하기
1️⃣ 목적
- 표 태그(<table>, <tr>, <td>)의 구조와 역할을 이해해보세요.
- 관심 분야를 정리된 형태로 보여주는 방식을 학습해보세요.
2️⃣ 구현 내용
- <table> 태그를 사용해서 본인의 관심 분야를 정리해보세요.
/* CSS 구문 */
.interest-table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 12px 12px;
margin: 8px 0 20px;
}
.interest-table td {
background : pink;
border: 1px solid orange;
border-radius: 14px;
padding: 14px 16px;
text-align: center;
font-weight: 600;
color: rgb(245, 107, 255);
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* HTML 구문 */
<h3>관심분야</h3>
<table class ="interest-table">
<tr>
<td>Java</td>
<td>Javascript</td>
<td>Spring</td>
</tr>
<tr>
<td>Backend</td>
<td>Coding</td>
</tr>
</table>
.interest-table 를 통해 단순 표가 아닌 셀과 셀마다의 여백이 있어 보이는 형태로 테이블을 구성
td에 border-radius, box-shadow 등을 활용하여 취미 부분과 비슷하게 칩 형태로 구성하고자 함
table-layout을 fixed로 선언함으로서 테이블 내 셀 폭을 균등하게 배분
text-overflow를 ellpipsis로 선언함으로서 긴 텍스트에 있어서도 깨짐 없이 노출되게 함
-> 리스트 태그와 테이블 태그의 차이는 표현하고자 하는 방식에서의 차이가 있을 뿐 노출되는 화면의 정도에는 큰 차이는 없는 정도
5. 소통 채널 정보 작성하기
1️⃣ 목적
- 하이퍼링크(<a>) 태그의 기능과 사용 방법을 익혀보세요.
- 외부 페이지로 연결되는 구조를 이해해보세요.
2️⃣ 구현 내용
- 이메일, 블로그, SNS 등 소통 채널을 <a> 태그를 활용해 연결해보세요.
/* CSS 구문 */
.footer {
margin-top: 32px; padding-top: 16px; border-top: 1px solid whitesmoke;
text-align: left; color: rgb(130, 130, 130); font-size: 14px;
}
/* HTML 구문 */
<div class="footer">
<p>📧 이메일 : <a href="mailto:stark77@naver.com">stark77@naver.com</a></p>
<p>📗 Github : <a href="https://github.com/sjww0604/sparta" target="_blank">https://github.com/sjww0604/sparta</a></p>
<p>📍 위치 : 서울 대한민국</p>
</div>
footer class를 선언함으로서 구분선 느낌의 모양을 확보하고 입력된 글자들을 정렬하는 과정을 거침
각 구문은 <p>, </p> 형태로 선언, 하이퍼링크 개념의 <a> 태그를 활용하여 소통 채널을 입력함
❤️🔥 도전 과제
1. 소통 채널 클릭 시 새 탭으로 열리도록 하기
2. 동영상 포함하기
1️⃣ 목적
- 웹 문서에 미디어를 삽입하는 방법을 익혀요.
- <iframe> 또는 <video> 태그의 활용법을 이해할 수 있어요.
2️⃣ 구현 내용
- 웹 개발과 관련한 유튜브 영상을 페이지에 포함해보세요.
/*CSS 구문*/
iframe {
display: block;
margin: 20px 0;
}
/*HTML 구문*/
<iframe
src="https://www.youtube.com/embed/LsVtNqnI3Zk"
width="300"
height="300"
title="YouTube video player"
style="border: none;"
referrerpolicy="strict-origin-when-cross-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
iframe을 지원하지 않는 브라우저입니다.
</iframe>
기존 구성했던 table 내용과 영상 태그의 여백이 부족하여 CSS 구문을 통해 윗 여백을 부여
iframe 태그를 사용함으로서 유튜브 영상을 끌어올 수 있었음.
- 단, 임베디드 링크로 연결해야 정상적으로 연결되기 때문에 해당 링크로 연결을 진행
3. 관심 분야 또는 기술 스택을 버튼으로 추가하기 (추가 학습 이후 진행 예정)
☠️ 트러블 슈팅
- 이미지 삽입과 오른쪽 이름, 소개글을 구성하는데 지속적으로 연결된 형태로 구성되지 않는 상황 발생
- 사용한 태그의 기본적인 한계인지에 대하여 검색
- > float, Grid? 를 통한 화면 구성을 수정해 나아가며 나타내고자 하는 방향과 맞게 화면이 구성되는지 확인함
Grid로도 구성 가능한 것으로 보여지지만 기존에 부여했던 margin 의 여백과 충돌되어 어디가 문제인지 정확하게 인지하지 못하는 상황이 있었음
float을 활용하여 왼쪽에는 프로필 이미지가 노출되게 하고, 오른쪽엔 자연스럽게 텍스트가 입력된 것처럼 보여지게 수정하여 적용 진행
- > float, Grid? 를 통한 화면 구성을 수정해 나아가며 나타내고자 하는 방향과 맞게 화면이 구성되는지 확인함
- 사용한 태그의 기본적인 한계인지에 대하여 검색
- 영상과 텍스트 간의 여백 조정이 필요
- CSS에서 추가적인 디자인 조정을 해줘야 하는가?
- 입력된 영상의 px 크기 조정을 통해 여백 효과를 볼 수 있는가?
- > iframe에 직접 margin을 부여하여 간단하게 위아래 여백을 추가해 실행되는 결과값의 구성을 변경 진행 함
- 링크를 설정한 영상이 재생할 수 없다는 에러 결과창을 확인
- 왜 정상적으로 부여한 링크가 재생이 되지 않는가?
- 임베디드 링크로 연결이 되어야 Youtube 환경의 영상 첨부가 원활하게 가능하다는 점을 확인
- 왜 정상적으로 부여한 링크가 재생이 되지 않는가?
- 도전과제 구성 이후 새 탭으로 링크를 열 때 왜 콘솔 창에서 'Could not read source map for file' 문구가 노출되는가?
- 페이지 동작이나 새 탭 열기에는 문제는 없으나, 소스맵 파일이 없거나 접근이 막혀 있는 경우 노출되는 알림 용도로 인지할 것
'HTML&CSS > HTML&CSS 실습' 카테고리의 다른 글
| 점메추 API Ajax 호출 (0) | 2025.09.04 |
|---|---|
| 점심메뉴 추천기 API (0) | 2025.09.03 |
| 점심메뉴 추천기 (0) | 2025.09.03 |
| 할 일 목록 만들기 (0) | 2025.09.02 |