likelionsg · go-the-extra-mile · Apr 12, 2023 · SehwanChang · Apr 12, 2023 · kwonET
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # 11th_HTML-CSS
-4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
+
+깃 연습 ^^7
diff --git a/home.html b/home.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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>신명준 프로필 :)</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="alert">PC 화면에서 접속해주세요!</div> 
+    <div id="all-contents"> 
+
+        <header></header>
+        <main>
+            <div id="top">
+                MY PROFILE
+            </div>
+            <div class="container">
+                <section>
+                    <p>
+                        [내 프로필] <br>
+                        이름 :신명준 <br>
+                        포지션: 백엔드 <br>
+                        학과 : 컴퓨터공학과 <br>
+                        생년월일 : 010101
+                    </p>
+                </section>
+                <section id="mbti" class="magnify">
+                    <p class="white">
+                        [MBTI] <br>
+                        ISTJ <br>
+                        청렴결백한 논리주의자 <br>
+                        <span class="grey">너무 정확해서 무서워요;;</span>
+                    </p>
+                </section>
+                <section>
+                    <p>
+
+                        [좋아하는 음식] <br>
+                        샌드위치 <br>
+                        커피 <br>
+                        스시 <br>
+                        햄버거 <br>
+                        음식 안 가려요 ^^ <br>
+                    </p>
+                </section>
+                <section id="movie" class="magnify">
+                    <p class="white">
+                        [인생영화] <br>
+                        에브리씽 에브리웨어 올 앳 원스 <br>
+                        <span class="grey">울다 나왔어요</span>
+                    </p>
+                </section>
+                <section>
+                    <p>
+
+                        [요즘 자주 듣는 노래] <br>
+                        뮤지컬 대표곡들 <br>
+                        <span class="grey">데스노트 티켓팅 중...</span>
+                    </p>
+                </section>
+                <section>
+                    <p>
+
+                        [반려식물] <br>
+                        <span class="grey">생길 예정</span>
+                    </p>
+                </section>
+            </div>
+            <aside class="container">
+                <div id="team" class="white">
+                    <p>
+                        [디버깅 2조] <br>
+                        퀴즈 1. 우리 조에는 주민번호 뒷자리가 3,4로 시작하는 사람이 5명이다! (O/X)<br>
+                        퀴즈 2. 보미는 전국대학생테니스대회에 나가 128강에 진출했다! (O/X)<br>
+                        퀴즈 3. 기철이는 뉴질랜드에서 산 적이 있다! (O/X)<br>
+                        퀴즈 4. 명준이는 고소공포증이 있지만 패러글라이딩을 해본 적이 있다! (O/X)
+                    </p>
+                </div>
+                <div id="hi">
+                    <p>
+                        잘 부탁드립니다~
+                    </p>
+                </div>
+            </aside>
+        </main>
+        <footer>
+            <div>
+                <span class="grey">Copyright 신명준</span>
+            </div>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/mbti.png b/mbti.png
diff --git a/movie.jpeg b/movie.jpeg
diff --git a/style.css b/style.css
@@ -0,0 +1,193 @@
+@font-face {
+    font-family: 'KCCChassam';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    font-family: "KCCChassam";
+}
+
+#alert {
+    display: none;
+    text-align: center;
+    padding-top: 300px;
+}
+
+body{
+    background-color: #f8f8f8;
+}
+
+/* header */
+header{
+    width: 100%;
+    height: 40px;
+    background-color: #333;
+}
+
+
+/* main */
+main{
+    width: 750px;
+    margin: 0 auto;
+    background-color: #f8f8f8;
+}
+
+/* top implementation 1 */
+#top {
+    height: 60px;
+    text-align: center;
+    background-color: #9bd5ef;
+    margin-bottom: 25px;
+    line-height: 60px;
+    font-size: 2em;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+/* top implementation 2 */
+/* #top {
+    height: 60px;
+    background-color: #9bd5ef;
+    margin-bottom: 25px;
+    font-size: 2em;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+} */
+
+/* .container */
+.container {
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+    border-radius: 12px;
+}
+
+div.container{
+    height: 410px;
+    background-color: lightgrey;
+}
+
+section{
+    width: 30%;
+    height: 45%;
+    background-color: white;
+    border-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+section p {
+    text-align: center;
+    position: relative; /* 텍스트를 앞으로 가져오기 위해 */
+}
+
+.magnify {
+    position: relative;
+    transition: all 0.2s ease-in-out 0.1s;
+}
+
+.magnify:hover {
+    transform: scale(1.3);
+    z-index: 1;
+}
+
+#mbti {
+    background-image: url("./mbti.png");
+    background-size: cover;
+}
+
+#mbti::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.3); 
+}
+
+
+
+#movie {
+    background-image: url("./movie.jpeg");
+    background-size: cover;
+}
+
+#movie:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    background-color: black;
+    opacity: 0.3;
+    position: absolute;
+}
+
+/* aside */
+aside.container{
+    height: 12em;
+    background-color: white;
+}
+
+#team {
+    width: 63%;
+    height: 80%;
+    background-color: #9c3131;
+}
+
+#hi{
+    width: 30%;
+    background-color: pink;
+}
+
+aside div {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 12px;
+}
+
+.grey {
+    color: lightgrey;
+}
+
+.white {
+    color: white;
+}
+
+/* footer */
+footer {
+    width: 100%;
+    height: 100px;
+    background-color: white;
+    padding: 2em;
+}
+
+footer div{
+    text-align: center;
+}
+
+
+/* Media Queries */
+@media(max-width: 800px) {
+    #alert {
+        display: block;
+    }
+
+    #all-contents {
+        display: none;
+    }
+}