likelionsg · SehwanChang · Apr 12, 2023 · go-the-extra-mile · Apr 12, 2023 · nexdavid2020
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # 11th_HTML-CSS
-4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
+챗 gpt 사랑합니다.
diff --git a/home.html b/home.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<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">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <div id="main-container">
+        <header></header>
+        <main>
+            <div id="top"></div>
+            <div id="container">
+                <section id = "profile">
+                    <p> 
+                        [내 프로필] <br>
+                        이름 : 장세환 <br>
+                        포지션 : 프론트엔드 <br>
+                        학과 : 화공생명공학과 <br>
+                        생년월일 : 1996.09.10
+                    </p>
+                </section>
+                <section id = "mbti">
+                    <p> 
+                        MBTI <br>
+                        ESTJ<br>
+                        현실적, 구체적 <br>
+                    </p>
+                </section>
+                <section id = "food">
+                    <p> 
+                        [좋아하는 음식]<br>
+                        김치찌개 <br>
+                        치킨 <br>
+                        피자 <br>
+                        족발 <br>
+                    </p>
+                </section>
+                <section id = "movie">
+                    <div class ="bg"></div>
+                    <p> 
+                        [인생영화] <br>
+                        굿 윌 헌팅 <br>
+                        쇼생크 탈출 <br>
+                    </p>
+                </section>
+                <section id = "music">
+                    <p> 
+                        [요즘 자주 듣는 노래] <br>
+                        찰리푸스 - Hilarious <br>
+                    </p>
+                </section>
+                <section id = "dog">
+                    <p> 
+                        [반려동물 / 반려식물] <br>
+                    </p>
+                </section>
+            </div>
+            <aside>
+                <div id="team">
+                    <p>
+                        [디버깅조] <br>
+                        우리 조에는 주민번호 뒷자리가 3,4로 시작하는 사람이 5명이다! (O/X)<br>
+                        보미는 전국대학생테니스대회에 나가 128강에 진출했다!(O/X) <br>
+                        기철이는 뉴질랜드에서 산 적이 있다 (O/X) <br>
+                        명준이는 고소공포증이 있지만 패러글라이딩을 해본 적이 있다! (O/X) <br>
+                    </p>
+                </div>
+                <div id="hi">
+                    <p> 멋사 11기 화이팅! </p>
+                </div>
+                <div id="hello">
+                </div>
+            </aside>
+        </main>
+        <footer>
+            Copyright 2023 서강대학교 멋사 장세환. All right reserved.
+        </footer>
+    </div>  
+    <div id="alert">
+        pc에서 확인해주세요!
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,155 @@
+@font-face {
+    font-family: 'KimjungchulGothic-Bold';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+}
+*{
+    box-sizing: border-box;
+    font-family : 'KimjungchulGothic-Bold';
+    margin: 0;
+}
+body{
+    background-color: #f8f8f8;
+}
+
+header{
+    height: 40px;
+    background-color: #333;
+}
+
+main{
+    height: 600px;
+    width: 750px;
+    margin: 0 auto;
+    background-color: rgb(231, 228, 228);
+}
+footer{
+    height: 200px;
+    background-color: white;
+}
+
+#top{
+    height: 35px;
+    background-color: #f0cdea;
+    margin-bottom: 25px;
+    border-radius: 0 0 10px 10px;
+    color:white;
+    font-size: 18px;
+    text-align: center;
+    line-height: 35px;
+}
+#container{
+    height: 410px;
+    padding: 10px;
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: space-around;
+}
+aside{
+    height: 110px;
+    background-color: white;
+    margin-bottom: 60px;
+    margin: 0 15px 60px 15px;
+    display: flex;
+    justify-content: space-between;
+}
+section{
+    height: 45%;
+    width: 30%;
+    background-color: white;
+    border-radius: 7px;
+}
+#profile{
+    padding : 30px;
+    text-align: center;
+}
+#food{
+    padding: 30px;
+    text-align: center;
+}
+#mbti{
+    padding: 30px;
+    text-align: center;
+}
+
+.bg{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    position:absolute;
+}
+section p {
+    padding: 5px;
+    position: relative;
+}
+#movie:hover{
+    transform: scale(1.4);
+    transition: all 0.2s linear;
+}
+#movie{
+    background-image: url("./images/movie.jpeg");
+    background-size: cover;
+    text-align: center;
+    position:relative;
+    color:white;
+}
+#music{
+    padding: 30px;  
+    text-align: center;
+}
+#dog:hover{
+    transform: scale(1.4);
+    transition: all 0.2s linear;
+}
+#dog{
+    background-image: url("./images/dog.jpeg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 30px;
+    text-align: center;
+}
+#team{
+    width: 460px;
+    height: 100%;
+    background-color: #31999c;
+    color: white;
+    border-radius: 5px;
+    font-size: 15px;
+    float:left;
+    text-align: center;
+}
+#hi{
+    width: 230px;
+    height: 100%;
+    padding : 30px;
+    background-color: pink;
+    color: black;
+    border-radius: 5px;
+    font-size: 15px;
+    float:right;
+    text-align: center;
+}
+footer{
+    height: 200px;
+    background-color: white;
+    text-align: center;
+    color: rgb(170,170,170);
+    padding : 10px;
+}
+#alert{
+    display: none;
+    text-align: center;
+    padding: 300px;
+}
+@media(max-width:800px){
+    #main-container{
+        display: none;
+    }
+    #alert{
+        display: block;
+    }
+}