Repository: SMU-LikeLion-13th/LikeLion13th-FE
Pull request #43: FEAT: 손영준 3주차 과제 제출
Author: login: young-dune
Created: 2025-04-13T17:37:45Z | Merged: 2025-04-13T18:09:58Z

3주차 과제 및 실습 제출합니다 감사합니다 :]


Diff:
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/3\354\243\274\354\260\250\352\263\274\354\240\234.html" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/3\354\243\274\354\260\250\352\263\274\354\240\234.html"
new file mode 100644
index 0000000..da35d48
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/3\354\243\274\354\260\250\352\263\274\354\240\234.html"
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>손영준 자기소개</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="card">
+        <img
+          src="./images/image-example1.jpg"
+          alt="프로필"
+          class="profile-img"
+        />
+        <h1>손영준</h1>
+        <p class="school">
+          상명대학교 4학년 |
+          <span class="highlight">컴퓨터과학과 | 프론트엔드 개발자</span>
+        </p>
+
+        <section>
+          <h2>👋 자기소개</h2>
+          <p>
+            저는 현재 상명대학교 컴퓨터과학과에 재학 중인 4학년 손영준입니다.<br />
+            4월인데 요즘 날씨가 다시 추워졌습니다. 모두들 화이팅하고 건강하세요.
+            <br />
+            공부도 같이 열심히 해봅시다. 서로가 배우며 성장할 수 있길...
+          </p>
+        </section>
+
+        <section>
+          <h2>🔍 현재 활동</h2>
+          <ul>
+            <li>전공: 상명대학교 컴퓨터과학과</li>
+            <li>활동: 멋쟁이사자처럼 13기</li>
+            <li>목표: 돈 많이 벌기</li>
+            <li>관심 분야: 프론트엔드 개발, 돈 벌기</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>⚙️ 기술 스택</h2>
+          <p>HTML, CSS, JavaScript, TypeScript, React, Git 등</p>
+        </section>
+
+        <section>
+          <h2>📌 프로젝트 경험</h2>
+          <ul>
+            <li><strong>이니로 동아리 홈페이지 (진행 중)</strong></li>
+            <li>
+              <strong>Doctalk (진행 중)</strong> - 함께 작업할 수 있는 협업 툴
+            </li>
+          </ul>
+        </section>
+
+        <footer>
+          <p>© 2025 손영준 | 상명대학교 컴퓨터과학과 | Frontend Developer</p>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/images/image-example1.jpg" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/images/image-example1.jpg"
new file mode 100644
index 0000000..114818b
Binary files /dev/null and "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/images/image-example1.jpg" differ
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/style.css" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/style.css"
new file mode 100644
index 0000000..e03b498
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\352\263\274\354\240\234/style.css"
@@ -0,0 +1,95 @@
+body {
+  margin: 0;
+  background: linear-gradient(135deg, #fff, #495f80);
+  font-family: "Pretendard", sans-serif;
+  color: #333;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.card {
+  background-color: white;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.profile-img {
+  height: 200px;
+  width: 200px;
+  object-fit: cover;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  margin-bottom: 10px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.profile-img:hover {
+  transform: scale(1.3);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.school {
+  font-size: 16px;
+  margin-bottom: 24px;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #5865f2;
+}
+
+section {
+  text-align: left;
+  margin-bottom: 24px;
+}
+
+section h2 {
+  font-size: 18px;
+  color: #3744a8;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+section h2::after {
+  content: "";
+  display: block;
+  width: 25px;
+  height: 3px;
+  background-color: #3744a8;
+  margin-top: 6px;
+}
+
+section p,
+section ul {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #444;
+}
+
+ul {
+  padding-left: 20px;
+}
+
+ul li {
+  margin-bottom: 6px;
+}
+
+footer {
+  margin-top: 40px;
+  font-size: 12px;
+  color: #888;
+}
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2651.html" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2651.html"
new file mode 100644
index 0000000..29b00cf
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2651.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Box model 실습 1</title>
+    <style>
+      .box {
+        width: 200px;
+        height: 100px;
+        text-align: center;
+        line-height: 100px;
+        font-weight: bold;
+      }
+      .box1 {
+        background-color: aqua;
+        padding: 20px;
+      }
+      .box2 {
+        background-color: #efefef;
+        margin: 20px;
+      }
+      .box3 {
+        background-color: aquamarine;
+        border: 5px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box box1">손</div>
+    <div class="box box2">영</div>
+    <div class="box box3">준</div>
+  </body>
+</html>
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2652.html" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2652.html"
new file mode 100644
index 0000000..9ed9373
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2652.html"
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>실습 2</title>
+    <style>
+      .box {
+        text-align: center;
+      }
+      .box1 {
+        width: 300px;
+        height: 300px;
+        position: absolute;
+        background-color: aqua;
+      }
+      .box2 {
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box box1">날 가려보겠니</div>
+    <div class="box box2">내가 널 가려보겠다</div>
+  </body>
+</html>
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2653.html" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2653.html"
new file mode 100644
index 0000000..be4b7cd
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2653.html"
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>실습 3</title>
+    <style>
+      .box {
+        text-align: center;
+        line-height: 100px;
+        width: 100px;
+        height: 100px;
+        font-weight: bold;
+      }
+      .container {
+        width: 700px;
+        height: 500px;
+        border: 3px solid black;
+        position: relative;
+        margin: 100px auto;
+      }
+      .box1 {
+        background-color: grey;
+      }
+      .box2 {
+        background-color: red;
+        position: absolute;
+        top: 50px;
+        left: 100px;
+      }
+      .box3 {
+        background-color: blue;
+        position: relative;
+        top: 20px;
+        left: 20px;
+      }
+      .box4 {
+        background-color: green;
+        position: fixed;
+        right: 20px;
+        top: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="box box1">static</div>
+      <div class="box box2">absolute</div>
+      <div class="box box3">relative</div>
+    </div>
+    <div class="box box4">fixed</div>
+  </body>
+</html>
diff --git "a/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2654.html" "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2654.html"
new file mode 100644
index 0000000..68ddda4
--- /dev/null
+++ "b/yeongjun/3\354\243\274\354\260\250_\352\263\274\354\240\234/\354\213\244\354\212\265/\354\213\244\354\212\2654.html"
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <script
+    src="https://kit.fontawesome.com/eddbc9c762.js"
+    crossorigin="anonymous"
+  ></script>
+  <style>
+    body {
+      margin: 0;
+    }
+    .wrapper {
+      color: white;
+      font-weight: bold;
+      align-items: center;
+      background-image: linear-gradient(to right bottom, red, yellow);
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12);
+      display: flex;
+      flex-direction: col;
+      justify-content: space-between;
+    }
+    .wrapper:hover {
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
+        0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+
+    .title {
+      margin-left: 30px;
+    }
+    ul {
+      display: flex;
+      margin-right: 20px;
+    }
+    li {
+      padding: 5px;
+      margin: 0 10px;
+      list-style: none;
+      border-bottom: 1px solid snow;
+      cursor: pointer;
+    }
+  </style>
+  <body>
+    <div>
+      <nav class="wrapper">
+        <span class="title"
+          ><i class="fa-solid fa-car"></i>멋쟁이 사자처럼 어흥~🐯</span
+        >
+        <ul>
+          <li><i class="fa-solid fa-house">홈</i></li>
+          <li>멋쟁이</li>
+          <li>사자처럼</li>
+          <li>설정</li>
+        </ul>
+      </nav>
+    </div>
+  </body>
+</html>


Reviews:
user: login: yujin5959
body: 전체적으로 깔끔하게 잘하셨네요~!
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-13T17:53:26Z
user: login: young-dune
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-13T17:57:19Z
user: login: yujin5959
body: 고양이가 카리스마가 생겼네요. 수고하셨습니다!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-13T18:09:42Z

Review comments:
diff_hunk: @@ -0,0 +1,94 @@
+body {
+  margin: 0;
+  background: linear-gradient(135deg, #fff, #495f80);
+  font-family: "Pretendard", sans-serif;
+  color: #333;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.card {
+  background-color: white;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.profile-img {
+  height: 200px;
+  width: 200px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  margin-bottom: 10px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
path: yeongjun/3주차_과제/과제/style.css
user: login: yujin5959
body: 이미지가 비율이 좀 깨져보이는 거 같아요!! object-fit 을 사용해서 안 깨지게 해보세요 !
created_at: 2025-04-13T17:51:17Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,94 @@
+body {
+  margin: 0;
+  background: linear-gradient(135deg, #fff, #495f80);
+  font-family: "Pretendard", sans-serif;
+  color: #333;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.card {
+  background-color: white;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.profile-img {
+  height: 200px;
+  width: 200px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  margin-bottom: 10px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: pointer;
+}
path: yeongjun/3주차_과제/과제/style.css
user: login: young-dune
body: 오.. 좋은 정보 감사합니당 .. 👍
created_at: 2025-04-13T17:57:19Z
author_association: COLLABORATOR

PR comments:
user: login: Kwondongkyun
created_at: 2025-04-14T01:51:52Z
body: 못하는게 뭐야 당신
author_association: COLLABORATOR
user: login: young-dune
created_at: 2025-04-14T06:14:48Z
body: 저희 타쿠 귀엽죠 감사합니당
author_association: COLLABORATOR