GDSC SKHU Web - 이예슬 (#12)

* introduce 짝궁소개 * commit 쓸데없는 파일 삭제 * chore: apply gitignore file * chore: restore readme file * chore: delete DS_Store files * chore: delete DS_Store file in img Co-authored-by: Hyesung Oh <haesungoh414@gmail.com>
GDSC-SKHU · Nov 3, 2022 · f1d3e57 · f1d3e57
1 parent 186304c
commit f1d3e57
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # GDSC-Web Study
 
-22-23 GDSC Web Study
+22-23 GDSC Web Study
diff --git a/이예슬/img/1637896057710109.jpeg b/이예슬/img/1637896057710109.jpeg
diff --git a/이예슬/img/cjh_img.jpg b/이예슬/img/cjh_img.jpg
diff --git a/...cd25086ce0fa9a649c33dd1c1bf19577ceb2cf8aa7070751e03ae1c5a7bd5662df37bf82dca.png b/...cd25086ce0fa9a649c33dd1c1bf19577ceb2cf8aa7070751e03ae1c5a7bd5662df37bf82dca.png
diff --git a/이예슬/img/github.png b/이예슬/img/github.png
diff --git a/이예슬/img/profile.png b/이예슬/img/profile.png
diff --git a/이예슬/img/software_ac.png b/이예슬/img/software_ac.png
diff --git a/이예슬/index.css b/이예슬/index.css
@@ -0,0 +1,63 @@
+html,body{
+    margin: 0;
+    padding: 0;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+/* *=모든 녀석들 */
+*{
+    box-sizing: border-box;
+    background-color: #153180;
+    color: rgb(197, 219, 255);
+}
+h1{
+    text-align: center;
+}
+.banner{
+    width: 100vw;
+    height: 100px;
+    /* vw, vh : view width, view height */
+    /* 50vh 이면 화면의 50프로 */
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 1.875rem;
+    display: flex;
+    flex-direction: column;
+}
+a{
+    all: unset;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+a:hover{
+    color: white;
+}
+nav > div{
+    display: flex;
+    gap: 10px;
+}
+/* nav 안에 있는 div 내부 선택 */
+/* :으로 시작하는 것은 가상 선택자 : hover */
+/* 관례적으로 padding-left등과 같이 나눠서 쓰는걸 권장한다. */
+.box{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+    text-align: center;
+}
+.face{
+    width: 200px;
+    height: 250px;
+}
+.major{
+    width: 400px;
+    height: 250px;
+}
+.food{
+    width: 300px;
+    height: 250px;
+}
+.end{
+    margin-bottom: 30px;
+}
diff --git a/이예슬/index.html b/이예슬/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ko"> <!-- 여기서 lang이란? language -->
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="./index.css" rel="stylesheet"> 
+    <title>Document</title>
+    <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+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>저의 짝꿍을 소개합니다!</h1>
+    <section class="title">
+    </section>
+    <nav class="banner">
+        <div class="box">
+            저의 짝궁의 모습입니다!
+            <img class="face" src="./img/cjh_img.jpg"/>
+            <!-- a=anchor -->
+            <!-- c+d-> 똑같음 애들 선택 -->
+            <!-- tip 같은 요소 3개 있을때 option+shift+방향키 -> 복붙 -->
+        </div>
+        <div class="box">
+            저의 짝궁의 학부는? <br>
+            IT
+            <img class="major" src="./img/software_ac.png"/>
+        </div>
+        <div class="box">
+            저의 짝궁의 취미입니다!
+            <img class="hobby" src="./img/df934e40d28dae33b9ea8a85aa4569cbd455c616511712c93d878a3cd9d98863109ab1bd99ef31f826c93cd25086ce0fa9a649c33dd1c1bf19577ceb2cf8aa7070751e03ae1c5a7bd5662df37bf82dca.png"/>
+        </div>
+        <div class="box">
+            짝궁이 좋아하는 음식은!!!!<br>
+            짬뽕!!!
+            <img class="food" src="./img/1637896057710109.jpeg"/>
+        </div>
+        <p class="end">이상으로 저의 짝궁 소개를 마치겠습니다</p>
+    </nav>
+</body>
+</html>