[2조] 이우찬 과제 제출합니다. #20
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,2 +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,94 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"> | ||
|
|
||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/> | ||
| </head> | ||
| <body> | ||
| <div id="alert"> | ||
| <p> | ||
| 정답: X/O/O/O | ||
| </p> | ||
| </div> | ||
| <div id="main-container"> | ||
| <header> | ||
| </header> | ||
| <main> | ||
| <div id="top"> | ||
| My Profile | ||
| </div> | ||
| <div id="container"> | ||
| <section> | ||
| <p> | ||
| [내 프로필]<br> | ||
| 이름 : 이우찬<br> | ||
| 포지션 : 백엔드<br> | ||
| 학과 : 영미어문학과<br> | ||
| 생년월일 : 1999. 04. 09 | ||
| </p> | ||
| </section> | ||
| <section id="mbti"> | ||
| <div class="bg"></div> | ||
| <p> | ||
| [MBTI]<br> | ||
| ISFJ<br> | ||
| 용감한 수호자 | ||
| </p> | ||
| </section> | ||
| <section> | ||
| <p> | ||
| [좋아하는 음식]<br> | ||
|
|
||
| 햄버거<br> | ||
|
|
||
| 짜파게티<br> | ||
| 떡볶이<br> | ||
| 회<br> | ||
| 곱창 | ||
|
|
||
| </p> | ||
| </section> | ||
| <section id="movie"> | ||
| <div class="bg"></div> | ||
| <p> | ||
| [인생영화]<br> | ||
|
|
||
| 탑건: 매버릭 | ||
|
|
||
| </p> | ||
| </section> | ||
| <section id="song"> | ||
| <div class="bg"></div> | ||
| <p> | ||
| [요즘 자주 듣는 노래]<br> | ||
| Shawn Mendes - Stitches | ||
| </p> | ||
| </section> | ||
| <section> | ||
| <p> | ||
| [반려동물/반려식물]<br> | ||
| 안 키웁니다 | ||
|
|
||
| </p> | ||
| </section> | ||
| </div> | ||
| <aside> | ||
| <div id="team"> | ||
| <p> | ||
| [디버깅조]<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"></div> | ||
| </aside> | ||
| </main> | ||
| <footer> | ||
| <p> | ||
| Copyright © 2023 서강대학교 멋쟁이사자처럼 이우찬. All right Reserved. | ||
| </p> | ||
|
|
||
| </footer> | ||
| </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,141 @@ | ||
| *{ | ||
| box-sizing: border-box; | ||
| } | ||
|
Comment on lines
+1
to
+3
There was a problem hiding this comment. 이곳에 폰트를 지정해주면 아래 중복 코드를 방지할 수 있을 것 같아요! |
||
| @font-face { | ||
| font-family: 'Dovemayo_gothic'; | ||
| src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| header{ | ||
| height: 40px; | ||
| background-color: black | ||
| } | ||
|
|
||
| main{ | ||
| font-family: 'Dovemayo_gothic'; | ||
| height: 600px; | ||
| width: 750px; | ||
| margin: 0 auto; | ||
| background-color: beige; | ||
| } | ||
|
|
||
| footer{ | ||
| height: 200px; | ||
| text-align: center; | ||
| padding: 50px; | ||
| color: gray; | ||
| /*background-color: brown;*/ | ||
| } | ||
| #top{ | ||
| border-radius: 7px; | ||
| height: 35px; | ||
| background-color: grey; | ||
| margin-bottom: 25px; | ||
| text-align: center; | ||
| line-height: 35px; | ||
| color: white; | ||
| } | ||
| #container{ | ||
| height: 410px; | ||
| padding: 10px; | ||
| /*background-color:blue;*/ | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| align-content: space-around; | ||
| padding: 10px; | ||
|
|
||
| } | ||
| aside{ | ||
| height: 110px; | ||
| /*background-color:yellow;*/ | ||
| margin-bottom: 60px; | ||
| margin: 0 15px 60px 15px; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| section{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 7px; | ||
| height: 45%; | ||
| width: 30%; | ||
| background-color:white; | ||
| text-align: center; | ||
| line-height: 20px; | ||
| } | ||
| #team{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-family: 'Dovemayo_gothic'; | ||
| border-radius: 7px; | ||
| height: 100%; | ||
| width: 470px; | ||
| background-color:pink; | ||
| float: left; | ||
| text-align: center; | ||
| } | ||
| #hi{ | ||
| font-family: 'Dovemayo_gothic'; | ||
| border-radius: 7px; | ||
| height:100%; | ||
| width:230px; | ||
| background-color:paleturquoise; | ||
| float: right; | ||
| font-size: 15px; | ||
| } | ||
| #mbti{ | ||
| background-image: url("./images/isfj.jpg"); | ||
| background-size: cover; | ||
| height: 45%; | ||
| width: 30%; | ||
| position: relative; | ||
| color: white; | ||
| } | ||
| #movie{ | ||
| background-image: url("./images/maverick.jpg"); | ||
| background-size: cover; | ||
| height: 45%; | ||
| width: 30%; | ||
| position: relative; | ||
| color: white; | ||
| } | ||
| #song{ | ||
| background-image: url("./images/mendes.jpg"); | ||
| background-size: cover; | ||
| height: 45%; | ||
| width: 30%; | ||
| color: white; | ||
| position: relative; | ||
|
|
||
| } | ||
| .bg{ | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: 7px; | ||
| position: absolute; | ||
| } | ||
| section p{ | ||
| position: relative; | ||
| } | ||
| #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.
나폴리 4강 진출 기원