Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# 11th_HTML-CSS
4월 5일 세션에 대한 미니 프로젝트 과제를 제출하는 레포입니다.
김민재 화이팅!
레알도 화이팅!

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나폴리 4강 진출 기원

94 changes: 94 additions & 0 deletions home.html
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>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저랑 식성이 비슷하시네요:D

햄버거<br>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 햄버거 참 좋아합니다 🍔

짜파게티<br>
떡볶이<br>
<br>
곱창

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저 오늘 곱창 먹고 왔어요

</p>
</section>
<section id="movie">
<div class="bg"></div>
<p>
[인생영화]<br>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 너무 좋아하는 영화입니다.

탑건: 매버릭
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저 두번 봤어요

</p>
</section>
<section id="song">
<div class="bg"></div>
<p>
[요즘 자주 듣는 노래]<br>
Shawn Mendes - Stitches
</p>
</section>
<section>
<p>
[반려동물/반려식물]<br>
안 키웁니다

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

왜죠

</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>
141 changes: 141 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
*{
box-sizing: border-box;
}
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이곳에 폰트를 지정해주면 아래 중복 코드를 방지할 수 있을 것 같아요!

@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;
}
}