diff --git a/README.md b/README.md index f10e204..530a417 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ # 11th_HTML-CSS -4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다. -교수님 미웡 \ No newline at end of file +안녕하세요 김기철입니다. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..caefa03 --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + + + + 멋쟁이사자처럼 2주차 실습 + + + + +
+
+ +
+ +
+
+

My Profile

+
+ +
+
+
+
[프로필]
+

+ 이름 : 김기철
+ 포지션 : 프론트엔드
+ 학과 : 수학과
+ 생년월일 : 1999.12.17 +

+
+ +
+
+
[MBTI]
+

+ ENFJ
+ 정의로운 사회운동가
+ 이타주의적 성향 +

+
+ +
+
+
[좋아하는 음식]
+

+ 햄버거
+ 떡볶이
+ 돈가스
+ 초밥
+

+
+ +
+
+
[인생영화]
+

+ 너의 결혼식
+ 테넷
+ 인생은 아름다워
+

+
+ +
+
+
[요즘 자주 듣는 노래]
+

+ BETELGEUSE - Yuuri
+ 작은 날 - PATEKO
+ Teddy Bear - STACY +

+
+ +
+
+
[반려동물]
+

+ 고양이
+ 러시안블루
+ 5살
+ 레쓰 +

+
+
+ +
+ + +
+ +
+ PC화면에서 접속해주세요! +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3454e32 --- /dev/null +++ b/style.css @@ -0,0 +1,216 @@ +@font-face { + font-family: 'GangwonEduSaeeum_OTFMediumA'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +/* 전체 */ +* { + box-sizing: border-box; + margin: 0; +} + +/* body */ +body { + background-color: white; +} + +/* body 맨 위 */ +header { + height: 60px; + background-color: rgb(240, 142, 142); + border: 3px solid black; + + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 50px; + font-weight: bold; +} + +/************************************************************/ +/* body 가운데 */ +main { + height: 600px; + width: 750px; + margin: 0 auto; + background-color: white; +} + +/* main 맨 위 */ +#top { + height: 55px; + margin-top: 5px; + margin-bottom: 5px; + background-color: #f7b264; + border-radius: 0 0 10px 10px; + border: 3px solid black; + + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 50px; + font-weight: 900; +} + +/*----------------------------------*/ +/* main 가운데 */ +#container { + height: 410px; + padding: 10px; + background-color: rgb(242, 242, 57); + margin-top: 5px; + margin-bottom: 5px; + border: 3px solid black; + border-radius: 10px; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; +} + +/* container 내부 */ +section { + height: 45%; + width: 230px; + background-color: white; + border: 3px solid black; + border-radius: 10px; + + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 20px; + font-weight: bold; +} + +section p { + text-align: center; + position: relative; + color: white; +} + +.bg { + background-color: rgba(0, 0, 0, 0.5); + + width: 100%; + height: 100%; + border-radius: 5px; + position: absolute; +} + +#title { + padding: 20px; + font-size: 30px; + font-weight: 900; + color: white; + position: relative; +} + +#profile { + background-image: url("./images/profile.png"); + background-size: cover; + position: relative; +} + +#mbti { + background-image: url("./images/mbti.png"); + background-size: cover; + position: relative; +} + +#food { + background-image: url("./images/food.png"); + background-size: cover; + position: relative; +} + +#movie { + background-image: url("./images/movie.jpg"); + background-size: cover; + position: relative; +} + +#music { + background-image: url("./images/music.jpg"); + background-size: cover; + position: relative; +} + +#cat { + background-image: url("./images/cat.jpg"); + background-size: cover; + position: relative; +} + +/*----------------------------------*/ +/* main 맨 아래 */ +aside { + height: 120px; + background-color: white; + margin-bottom: 60px; + + display: flex; + justify-content: space-between; +} + +/* aisde 왼쪽 */ +#team { + height: 100%; + width: 492px; + background-color: #9eedb6; + border: 3px solid black; + border-radius: 10px 10px 0 0; + + float: left; + padding: 15px 0; + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 20px; + font-weight: bold; +} + +/* aisde 오른쪽 */ +#hi { + height: 100%; + width: 248px; + background-color: rgb(177, 234, 249); + border: 3px solid black; + border-radius: 10px 10px 0 0; + + float: right; + padding: 40px 0 0 0; + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 30px; + font-weight: bold; +} + +/************************************************************/ +/* body 맨 아래 */ +footer { + height: 60px; + background-color: rgb(227, 198, 235); + border: 3px solid black; + + padding: 20px 0 0 0; + text-align: center; + font-family: 'GangwonEduSaeeum_OTFMediumA'; + font-size: 20px; + font-weight: bold; +} + +#alert { + display: none; + text-align: center; + padding-top: 300px; +} + +@media (max-width:800px) { + #main-container { + display: none; + } + + #alert { + display: block; + } +} \ No newline at end of file