[2조] 김기철 과제 제출합니다. #32
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| # 11th_HTML-CSS | ||
|
|
||
| 안녕하세요 김기철입니다. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <!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"> | ||
| <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script> | ||
|
Author
There was a problem hiding this comment. 폰트어썸(테크잇에서 알려줬습니다.) 이라고 아이콘 추가하려고 추가했습니다. |
||
| <title>멋쟁이사자처럼 2주차 실습</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="main-container"> | ||
| <header> | ||
| <i class="far fa-user-circle"></i> | ||
| </header> | ||
|
|
||
| <main> | ||
| <div id="top"> | ||
| <p>My Profile</p> | ||
| </div> | ||
|
|
||
| <div id="container"> | ||
| <section id="profile"> | ||
| <div class="bg"></div> | ||
| <div id="title">[프로필]</div> | ||
| <p> | ||
| 이름 : 김기철<br> | ||
| 포지션 : 프론트엔드<br> | ||
| 학과 : 수학과<br> | ||
| 생년월일 : 1999.12.17 | ||
|
|
||
| </p> | ||
| </section> | ||
|
|
||
| <section id="mbti"> | ||
| <div class="bg"></div> | ||
| <div id="title">[MBTI]</div> | ||
| <p> | ||
| ENFJ <br> | ||
| 정의로운 사회운동가 <br> | ||
| 이타주의적 성향 | ||
| </p> | ||
| </section> | ||
|
|
||
| <section id="food"> | ||
| <div class="bg"></div> | ||
| <div id="title">[좋아하는 음식]</div> | ||
| <p> | ||
| 햄버거 <br> | ||
| 떡볶이 <br> | ||
| 돈가스 <br> | ||
| 초밥 <br> | ||
| </p> | ||
| </section> | ||
|
|
||
| <section id="movie"> | ||
| <div class="bg"></div> | ||
| <div id="title">[인생영화]</div> | ||
| <p> | ||
| 너의 결혼식 <br> | ||
| 테넷 <br> | ||
| 인생은 아름다워 <br> | ||
| </p> | ||
| </section> | ||
|
|
||
| <section id="music"> | ||
| <div class="bg"></div> | ||
| <div id="title">[요즘 자주 듣는 노래]</div> | ||
| <p> | ||
| BETELGEUSE - Yuuri <br> | ||
| 작은 날 - PATEKO <br> | ||
| Teddy Bear - STACY | ||
| </p> | ||
| </section> | ||
|
|
||
| <section id="cat"> | ||
| <div class="bg"></div> | ||
| <div id="title">[반려동물]</div> | ||
| <p> | ||
| 고양이 <br> | ||
|
|
||
| 러시안블루 <br> | ||
| 5살 <br> | ||
| 레쓰 | ||
| </p> | ||
| </section> | ||
| </div> | ||
| <aside> | ||
| <div id="team"> | ||
| 퀴즈 1. 우리 조에는 주민번호 뒷자리가 3,4로 시작하는 사람이 5명이다! (O/X)<br> | ||
| 퀴즈 2. 보미는 전국대학생테니스대회에 나가 128강에 진출했다! (O/X)<br> | ||
| 퀴즈 3. 기철이는 뉴질랜드에서 산 적이 있다! (O/X)<br> | ||
| 퀴즈 4. 명준이는 고소공포증이 있지만 패러글라이딩을 해본 적이 있다! (O/X) | ||
| </div> | ||
| <div id="hi"> | ||
| 서강 멋사 11기 화이팅! | ||
| </div> | ||
| </aside> | ||
| </main> | ||
|
|
||
| <footer> | ||
| Copyright 2023 서강대학교 멋쟁이사자처럼 김기철. All right Reserved. | ||
| </footer> | ||
| </div> | ||
|
|
||
| <div id="alert"> | ||
| PC화면에서 접속해주세요! | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
||
|
Comment on lines
+9
to
+13
There was a problem hiding this comment. 이곳에 font-family: 'GangwonEduSaeeum_OTFMediumA'를 지정해주면 |
||
| /* 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; | ||
| } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(숨김처리된 라인입니다)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fork 했는데 저는 이 line이 있더라고여..