지난번의 과제 피드백을 토대로 수정하고, 실습을 진행하였습니다!
1. <head> 바깥에 있던 <link>와 <style> 위치 변경
2. <br>과 <hr>의 잘못된 태그 문법 수정
+ 부트스트랩 적용과 전체적인 주석 처리는 챗 지피티의 도움을 조금 받았습니다 😅
- 추억 사진(사진 + 사진 설명)이 있는 섹션을 flex를 사용하여 가로 배치, 줄바꿈 되도록 해주세요.
- 포트폴리오 페이지에서 grid를 사용하여 한 줄에 포트폴리오가 세개씩(가장 넓은 화면 기준) 들어가게 해주세요.
- 반응형 레이아웃을 자유롭게 적용해보세요.
- grid를 사용하여 각 섹션 배치를 바꿔보세요.
- position: fixed를 활용하여 고정된 버튼을 만들고, 버튼을 hover, 혹은 클릭했을 때 모양이 바뀌도록 해주세요.(트랜지션 활용)
- 애니메이션을 한 군데 이상 적용해주세요.
- 부트스트랩의 컴포넌트를 하나 이상 적용해주세요.1. index.html
<!DOCTYPE html>
<!-- HTML5 문서임을 선언합니다. 웹 브라우저가 이 문서를 올바르게 해석하도록 도와줍니다. -->
<html>
<!-- HTML 문서의 최상위 태그입니다. 모든 HTML 코드는 이 태그 안에 작성됩니다. -->
<head>
<!-- 웹 페이지에 대한 정보를 포함하는 부분입니다.
예: 제목, 메타데이터, 외부 리소스(CSS, JS) 등을 포함합니다. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<!-- 브라우저 탭에 표시되는 제목 -->
<title>나의 첫번째 웹 페이지</title>
<style>
* {
padding: 8px;
margin: 0px;
box-sizing: border-box;
text-align: center;
align-items: center;
}
body {
font-family: "Noto Sans", sans-serif;
}
hr {
margin: 36px auto 0;
border: none;
border-top: 1px solid #9e53be;
width: 300px;
}
.Top {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #9e53be;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.Intro {
height: 100px;
line-height: 100px;
}
.Detail {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #9e53be;
font-weight: 400;
background-color: rgba(185, 185, 185, 0.261);
border-radius: 28px;
width: 300px;
height: 100px;
line-height: 36px;
}
.Detail p {
width: 100%; /* 텍스트가 차지할 너비를 지정 */
word-wrap: break-word; /* 긴 단어를 자동으로 줄바꿈 */
margin: 0; /* p 태그의 기본 마진을 제거 */
}
.List {
text-align: center;
}
.Table {
margin: auto;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
width: 300px;
text-align: center;
}
.Table th,
.Table td {
border: 2px dotted rgba(103, 98, 98, 0.261);
padding: 10px;
text-align: center;
}
.Table th {
border: 2px dotted rgba(255, 255, 255, 0.261);
background-color: #9e53be;
color: white;
}
/* 테이블 개별 셀의 모서리 둥글게 만들기 */
.Table tr:first-child th:first-child {
border-top-left-radius: 16px;
} /* 좌상단 */
.Table tr:first-child th:last-child {
border-top-right-radius: 16px;
} /* 우상단 */
.Table tr:last-child td:first-child {
border-bottom-left-radius: 16px;
} /* 좌하단 */
.Table tr:last-child td:last-child {
border-bottom-right-radius: 16px;
} /* 우하단 */
/* 추억 사진 정렬 */
.flex-row {
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body>
<!-- 여기 밑으로 코드를 채워주세요! -->
<div class="Top">
<h3>저를 소개합니다</h3>
</div>
<br />
<div class="Intro">
<h1>안녕하세요, UXUI 6기생 김의정입니다! 🙌🏻</h1>
</div>
<!-- 이미지를 추가하는 태그 -->
<img
src="profile.jpg"
alt="내 프로필 사진"
width="200"
style="border-radius: 50%"
/>
<br />
<!-- 문단을 표시하는 태그 -->
<div class="Detail">
<p>
저는 내일배움캠프를 통해 UXUI를 배우고 있습니다! 열심히 해보겠습니다! 🥰
</p>
</div>
<hr />
<!-- 리스트(순서 없는 목록)를 만드는 태그 -->
<div class="List">
<h2>내가 좋아하는 것들</h2>
<p>
<!-- 리스트 항목 -->
<li>고양이 🐈⬛</li>
<!-- 첫 번째 항목 -->
<li>커피 수혈</li>
<!-- 두 번째 항목 -->
<li>달달한 것</li>
<!-- 세 번째 항목 -->
</p>
</div>
<!-- 테이블(표)을 만드는 태그 -->
<h2>내 친구들</h2>
<table class="Table">
<!-- 테두리가 있는 테이블 -->
<tr>
<!-- 테이블 헤더(머리글) -->
<th>이름</th>
<!-- 첫 번째 열 제목 -->
<th>관심사</th>
<!-- 두 번째 열 제목 -->
</tr>
<tr>
<!-- 테이블 데이터 행 -->
<td>민지</td>
<!-- 첫 번째 셀 -->
<td>게임</td>
<!-- 두 번째 셀 -->
</tr>
<tr>
<td>채영</td>
<!-- 첫 번째 셀 -->
<td>주식</td>
<!-- 두 번째 셀 -->
</tr>
</table>
<hr />
<h2>🔗 링크 바로가기</h2>
<!-- 링크를 추가하는 태그 -->
<div class="Link">
<p>
<li>
<a
href="https://www.notion.so/teamsparta/b71ea1ec4d0341338e6859245a10fb1d"
target="_blank"
>
멤버 카드 보러가기</a
>
</li>
<br />
<li>
<a href="https://0011177.tistory.com/ " target="_blank">
TIL 블로그 보러가기</a
>
</li>
<br />
<li>
<a href="detail.html"> 유용한 사이트 모음 보러가기</a>
</li>
</p>
</div>
<h2>추억 사진</h2>
<div class="flex-row">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
</div>
<!-- 폼(사용자 입력을 받는 양식)을 만드는 태그 -->
<h2>의견을 알려주세요!</h2>
<form action="/submit" method="POST">
<!-- 데이터를 서버로 전송 -->
<label for="feedback">이 페이지에 대한 생각:</label><br />
<!-- 입력 칸의 제목 -->
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea
><br />
<!-- 여러 줄 입력 -->
<button type="submit">제출</button>
<!-- 폼 제출 버튼 -->
</form>
</body>
</html>2. card.html
<!DOCTYPE html>
<!-- HTML5 문서임을 선언합니다. 웹 브라우저가 이 문서를 올바르게 해석하도록 도와줍니다. -->
<html>
<!-- HTML 문서의 최상위 태그입니다. 모든 HTML 코드는 이 태그 안에 작성됩니다. -->
<head>
<!-- 웹 페이지에 대한 정보를 포함하는 부분입니다.
예: 제목, 메타데이터, 외부 리소스(CSS, JS) 등을 포함합니다. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<!-- 브라우저 탭에 표시되는 제목 -->
<title>나의 첫번째 웹 페이지</title>
<style>
* {
padding: 8px;
margin: 0px;
box-sizing: border-box;
text-align: center;
align-items: center;
}
body {
font-family: "Noto Sans", sans-serif;
}
hr {
margin: 36px auto 0;
border: none;
border-top: 1px solid #9e53be;
width: 300px;
}
.Top {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #9e53be;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.Intro {
height: 100px;
line-height: 100px;
}
.Detail {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #9e53be;
font-weight: 400;
background-color: rgba(185, 185, 185, 0.261);
border-radius: 28px;
width: 300px;
height: 100px;
line-height: 36px;
}
.Detail p {
width: 100%; /* 텍스트가 차지할 너비를 지정 */
word-wrap: break-word; /* 긴 단어를 자동으로 줄바꿈 */
margin: 0; /* p 태그의 기본 마진을 제거 */
}
.List {
text-align: center;
}
.Table {
margin: auto;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
width: 300px;
text-align: center;
}
.Table th,
.Table td {
border: 2px dotted rgba(103, 98, 98, 0.261);
padding: 10px;
text-align: center;
}
.Table th {
border: 2px dotted rgba(255, 255, 255, 0.261);
background-color: #9e53be;
color: white;
}
/* 테이블 개별 셀의 모서리 둥글게 만들기 */
.Table tr:first-child th:first-child {
border-top-left-radius: 16px;
} /* 좌상단 */
.Table tr:first-child th:last-child {
border-top-right-radius: 16px;
} /* 우상단 */
.Table tr:last-child td:first-child {
border-bottom-left-radius: 16px;
} /* 좌하단 */
.Table tr:last-child td:last-child {
border-bottom-right-radius: 16px;
} /* 우하단 */
/* 추억 사진 정렬 */
.flex-row {
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body>
<!-- 여기 밑으로 코드를 채워주세요! -->
<div class="Top">
<h3>저를 소개합니다</h3>
</div>
<br />
<div class="Intro">
<h1>안녕하세요, UXUI 6기생 김의정입니다! 🙌🏻</h1>
</div>
<!-- 이미지를 추가하는 태그 -->
<img
src="profile.jpg"
alt="내 프로필 사진"
width="200"
style="border-radius: 50%"
/>
<br />
<!-- 문단을 표시하는 태그 -->
<div class="Detail">
<p>
저는 내일배움캠프를 통해 UXUI를 배우고 있습니다! 열심히 해보겠습니다! 🥰
</p>
</div>
<hr />
<!-- 리스트(순서 없는 목록)를 만드는 태그 -->
<div class="List">
<h2>내가 좋아하는 것들</h2>
<p>
<!-- 리스트 항목 -->
<li>고양이 🐈⬛</li>
<!-- 첫 번째 항목 -->
<li>커피 수혈</li>
<!-- 두 번째 항목 -->
<li>달달한 것</li>
<!-- 세 번째 항목 -->
</p>
</div>
<!-- 테이블(표)을 만드는 태그 -->
<h2>내 친구들</h2>
<table class="Table">
<!-- 테두리가 있는 테이블 -->
<tr>
<!-- 테이블 헤더(머리글) -->
<th>이름</th>
<!-- 첫 번째 열 제목 -->
<th>관심사</th>
<!-- 두 번째 열 제목 -->
</tr>
<tr>
<!-- 테이블 데이터 행 -->
<td>민지</td>
<!-- 첫 번째 셀 -->
<td>게임</td>
<!-- 두 번째 셀 -->
</tr>
<tr>
<td>채영</td>
<!-- 첫 번째 셀 -->
<td>주식</td>
<!-- 두 번째 셀 -->
</tr>
</table>
<hr />
<h2>🔗 링크 바로가기</h2>
<!-- 링크를 추가하는 태그 -->
<div class="Link">
<p>
<li>
<a
href="https://www.notion.so/teamsparta/b71ea1ec4d0341338e6859245a10fb1d"
target="_blank"
>
멤버 카드 보러가기</a
>
</li>
<br />
<li>
<a href="https://0011177.tistory.com/ " target="_blank">
TIL 블로그 보러가기</a
>
</li>
<br />
<li>
<a href="detail.html"> 유용한 사이트 모음 보러가기</a>
</li>
</p>
</div>
<h2>추억 사진</h2>
<div class="flex-row">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
alt="내 프로필 사진"
width="200"
/>
<p>사진 설명</p>
</div>
</div>
<!-- 폼(사용자 입력을 받는 양식)을 만드는 태그 -->
<h2>의견을 알려주세요!</h2>
<form action="/submit" method="POST">
<!-- 데이터를 서버로 전송 -->
<label for="feedback">이 페이지에 대한 생각:</label><br />
<!-- 입력 칸의 제목 -->
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea
><br />
<!-- 여러 줄 입력 -->
<button type="submit">제출</button>
<!-- 폼 제출 버튼 -->
</form>
</body>
</html>3. portfolio.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>나의 포트폴리오</title>
<!-- Bootstrap CSS 불러오기 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
/* 기본 스타일 설정 */
body {
font-family: "Noto Sans", sans-serif;
}
/* 제목 스타일 */
h2 {
text-align: center;
margin-top: 20px;
}
/* Grid 컨테이너 설정 (반응형 적용) */
.grid-container {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(300px, 1fr)
); /* 화면 크기에 따라 자동 조정 */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* 개별 Grid 아이템 스타일 */
.grid-item {
background-color: #f9f9f9;
border: 1px solid #e7e7e7;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
transition: transform 0.3s ease-in-out;
}
/* Hover 시 아이템 확대 효과 */
.grid-item:hover {
transform: scale(1.05);
}
/* 이미지 스타일 */
.grid-item img {
width: 100%;
border-radius: 10px;
}
/* 상단으로 가기 버튼 스타일 */
.fixed-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #7e7e7e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
/* Hover 시 버튼 */
.fixed-button:hover {
background-color: #767676;
transform: scale(1.1);
}
/* 클릭 시 버튼 */
.fixed-button:active {
background-color: #4d4d4d;
transform: scale(0.95);
}
/* 자세히 보기 버튼 스타일 */
.btn-primary {
background-color: #9e53be;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
}
/* Hover 시 버튼 */
.btn-primary:hover {
background-color: #7c3d97;
}
/* 클릭 시 버튼 */
.btn-primary:active {
background-color: #6b2d86;
}
</style>
</head>
<body>
<!-- 제목 -->
<h2>내 작품 소개</h2>
<!-- Grid 컨테이너 -->
<div class="grid-container">
<!-- 개별 Grid 아이템 (Bootstrap 카드 컴포넌트 적용) -->
<div class="grid-item card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
class="card-img-top"
alt="프로젝트 1"
/>
<div class="card-body">
<h3 class="card-title">UX 프로젝트</h3>
<p class="card-text">진행 날짜: 2025.3.24 ~</p>
<p class="card-text">개인</p>
<button class="btn-primary">자세히 보기</button>
</div>
</div>
<div class="grid-item card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
class="card-img-top"
alt="프로젝트 2"
/>
<div class="card-body">
<h3 class="card-title">UI 프로젝트 1</h3>
<p class="card-text">진행 날짜: 2025.3.28 ~</p>
<p class="card-text">팀</p>
<button class="btn-primary">자세히 보기</button>
</div>
</div>
<div class="grid-item card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
class="card-img-top"
alt="프로젝트 3"
/>
<div class="card-body">
<h3 class="card-title">MVP 프로젝트</h3>
<p class="card-text">진행 날짜: 2025.4.3 ~</p>
<p class="card-text">팀</p>
<button class="btn-primary">자세히 보기</button>
</div>
</div>
</div>
<!-- 고정 버튼 (Top으로 이동) -->
<button class="fixed-button">상단으로 가기</button>
<script>
// 고정 버튼 클릭 시 페이지 상단으로 스크롤 이동
document.querySelector(".fixed-button").addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
</script>
<!-- Bootstrap JS 불러오기 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>'내배캠 TIL' 카테고리의 다른 글
| #TIL_50 🧵 MVP 프로젝트 2일차! (0) | 2025.04.04 |
|---|---|
| #TIL_49 ❤️🔥 MVP 프로젝트 시작! (0) | 2025.04.03 |
| #TIL_47 🔥 UX 복습 (0) | 2025.04.01 |
| #TIL_46 🍫 CSS 레이아웃 (0) | 2025.03.31 |
| #TIL_45 📓 HTML, CSS 적용하기 (3) | 2025.03.28 |
댓글