diff --git a/README.md b/README.md index 6453761..6cd7306 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # 11th_HTML-CSS -4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다. +4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포지토리입니다. diff --git a/home.html b/home.html new file mode 100644 index 0000000..a2c815a --- /dev/null +++ b/home.html @@ -0,0 +1,115 @@ + + + + + + + + Document + + + + + + + + + + Document + + + + +
+
+
+
My profile
+
+
+

+ [내 프로필😊] +

+

+ 이름 : 고유진
+ 포지션 : 백엔드
+ 학과 : 경영&빅데이터
+ 생년월일 : 1999.08.15 +

+
+
+
+

+ [MBTI👻] +

+

+ ENFP
+ 재기발랄한 활동가
+ #열쩡 #햅삐 #바깥좋아 +

+
+
+

+ [좋아하는 음식🥘] +

+

+ 닭발
+ 해산물
+ 김치찌개
+ 불닭볶음면
+ 쌈밥 +

+
+
+
+

+ [인생영화🎬] +

+

+ 도둑들 +

+
+
+

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

+

+ 아이유 - 첫 이별 그날 밤
+ 태연 - Happy
+ 마치 - 영화처럼
+ 데이식스 - Love me or Leave me
+

+
+
+
+

+ [자주 보는 유튜브📹] +

+

+ 지무비(영화리뷰)
+ 아가리어터(일상)
+

+
+
+ +
+ +
+
+ PC화면에서 접속해주세요! +
+ + \ No newline at end of file diff --git a/images/mbti.jpg b/images/mbti.jpg new file mode 100644 index 0000000..154133a Binary files /dev/null and b/images/mbti.jpg differ diff --git a/images/movie.jpg b/images/movie.jpg new file mode 100644 index 0000000..4079195 Binary files /dev/null and b/images/movie.jpg differ diff --git a/images/myyoutube.jpg b/images/myyoutube.jpg new file mode 100644 index 0000000..1456e20 Binary files /dev/null and b/images/myyoutube.jpg differ diff --git a/images/youtube.webp b/images/youtube.webp new file mode 100644 index 0000000..eda3dde Binary files /dev/null and b/images/youtube.webp differ diff --git a/sample/home.html b/sample/home.html deleted file mode 100644 index 49db91a..0000000 --- a/sample/home.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - Profile - - -
-
-
-
My profile
-
-
-

- [내 프로필]
- 이름 : 박채린
- 포지션 : 프론트엔드
- 학과 : 화학과
- 생년월일 : 1998.03.10 -

-
-
-
-

- [MBTI]
- ENFJ
- 정의로운 사회운동가
- 사람좋아 인간 -

-
-
-

- [좋아하는 음식]
- 초밥
- 회
- 굴보쌈
- 마라탕
- 닭발
-

-
-
-
-

- [인생영화]
- 클래식 -

-
-
-

- [요즘 자주 듣는 노래]
- 데이먼스이어 - salty
- 한요한 - 가습기 -

-
-
-
-

- [반려동물/반려식물]
- 우리집 멍뭉이
봄가을겨울 -

-
-
- -
- -
-
- PC화면에서 접속해주세요! -
- - - diff --git a/sample/images/dog.jpeg b/sample/images/dog.jpeg deleted file mode 100644 index eb8918a..0000000 Binary files a/sample/images/dog.jpeg and /dev/null differ diff --git a/sample/images/mbti.png b/sample/images/mbti.png deleted file mode 100644 index e0acf39..0000000 Binary files a/sample/images/mbti.png and /dev/null differ diff --git a/sample/images/movie.png b/sample/images/movie.png deleted file mode 100644 index d135d6d..0000000 Binary files a/sample/images/movie.png and /dev/null differ diff --git a/sample/style.css b/style.css similarity index 64% rename from sample/style.css rename to style.css index 5dfb6b5..c527556 100644 --- a/sample/style.css +++ b/style.css @@ -1,78 +1,64 @@ -@font-face { - font-family: 'SeoulNamsanM'; - src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -*{ - box-sizing: border-box; + @import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap'); + +*{ + font-family: 'Gamja Flower', cursive; + box-sizing: border-box; margin: 0; - font-family: 'SeoulNamsanM'; - line-height: 20px; } - -body{ - background-color: #f8f8f8; -} - header{ height: 40px; - background-color: #333; + background-color: #333; } - main{ height: 600px; width: 750px; margin: 0 auto; background-color: #f8f8f8; - box-shadow: 10px 10px 20px gray; } - +footer{ + height: 200px; + background-color: white; + text-align: center; + color: gray; + padding: 50px; + font-size: 5px; +} #top{ - height: 35px; + height: 60px; background-color: #f0cdea; margin-bottom: 25px; border-radius: 0 0 10px 10px; color: white; - font-size: 18px; + font-size: 25px; text-align: center; line-height: 35px; + padding: 13px; } - #container{ height: 410px; padding: 10px; - /* flex(wrap)으로 section 배치*/ display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; } - aside{ height: 110px; background-color: #f8f8f8; margin-bottom: 60px; - margin: 0 15px 60px 15px; + margin : 0 15px 60px 15px; + display: flex; + justify-content: space-between; } - -section { +body{ + background-color: #f8f8f8; +} +section{ height: 45%; width: 30%; - border-radius: 7px; - text-align: center; - display: block; background-color: white; - justify-content: center; -} - -section p { - padding: 30px; - text-align: center; - position: relative; + border-radius: 7px; } - #team{ width: 470px; height: 100%; @@ -80,25 +66,28 @@ section p { color: white; border-radius: 5px; font-size: 15px; - float: left; - padding: 20px; text-align: center; + padding: 5px; } - #hi{ width: 230px; height: 100%; - background-color: pink; + background-color: bisque; color: black; border-radius: 5px; - font-size: 15px; - float: right; - padding: 30px; + font-size: 20px; + text-align: center; + padding: 40px; +} + +section p { + padding: 20px; text-align: center; + position: relative; } -#mbti { - background-image: url("./images/mbti.png"); +#mbti{ + background-image: url("./images/mbti.jpg"); background-size: cover; height: 45%; width: 30%; @@ -111,8 +100,8 @@ section p { transition: all 0.2s linear; } -#movie { - background-image: url("./images/movie.png"); +#movie{ + background-image: url("./images/myyoutube.jpg"); background-size: cover; height: 45%; width: 30%; @@ -125,8 +114,8 @@ section p { transition: all 0.2s linear; } -#dog { - background-image: url("./images/dog.jpeg"); +#youtube{ + background-image: url("./images/youtube.webp"); background-size: cover; height: 45%; width: 30%; @@ -134,41 +123,31 @@ section p { color: white; } -#dog:hover{ +#youtube:hover{ transform: scale(1.4); transition: all 0.2s linear; } -.bg { - background-color: rgba(0,0,0,0.5); +.bg{ + background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; border-radius: 5px; position: absolute; } -#alert { - display: none; - text-align: center; - padding-top: 300px; -} - -footer{ - height: 200px; - background-color: white; - text-align: center; - color: rgb(170, 170, 170); - padding: 50px; -} - @media(max-width: 800px) { #main-container { display: none; } - - #alert { + #alert{ display: block; } } - - + +.title { + padding: 5px; + text-align: center; + position: relative; + font-size: 20px; +} \ No newline at end of file