New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
GDSC SKHU Web - 이예슬 #12
Changes from all commits
65221b3
06f1af3
874c8a8
ab8f308
6faf575
f2e1609
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
.DS_Store |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
# GDSC-Web Study | ||
|
||
22-23 GDSC Web Study | ||
22-23 GDSC Web Study |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,63 @@ | ||||||||||||||||||||||||
html,body{ | ||||||||||||||||||||||||
margin: 0; | ||||||||||||||||||||||||
padding: 0; | ||||||||||||||||||||||||
font-family: 'Noto Sans KR', sans-serif; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
/* *=모든 녀석들 */ | ||||||||||||||||||||||||
*{ | ||||||||||||||||||||||||
box-sizing: border-box; | ||||||||||||||||||||||||
background-color: #153180; | ||||||||||||||||||||||||
color: rgb(197, 219, 255); | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
h1{ | ||||||||||||||||||||||||
text-align: center; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
.banner{ | ||||||||||||||||||||||||
width: 100vw; | ||||||||||||||||||||||||
height: 100px; | ||||||||||||||||||||||||
/* vw, vh : view width, view height */ | ||||||||||||||||||||||||
/* 50vh 이면 화면의 50프로 */ | ||||||||||||||||||||||||
display: flex; | ||||||||||||||||||||||||
align-items: center; | ||||||||||||||||||||||||
padding: 0 20px; | ||||||||||||||||||||||||
font-size: 1.875rem; | ||||||||||||||||||||||||
display: flex; | ||||||||||||||||||||||||
flex-direction: column; | ||||||||||||||||||||||||
Comment on lines
+20
to
+25
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
두 번 쓰신 요소가 있어요 ~ |
||||||||||||||||||||||||
} | ||||||||||||||||||||||||
a{ | ||||||||||||||||||||||||
all: unset; | ||||||||||||||||||||||||
cursor: pointer; | ||||||||||||||||||||||||
transition: all 0.3s; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
a:hover{ | ||||||||||||||||||||||||
color: white; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
nav > div{ | ||||||||||||||||||||||||
display: flex; | ||||||||||||||||||||||||
gap: 10px; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
/* nav 안에 있는 div 내부 선택 */ | ||||||||||||||||||||||||
/* :으로 시작하는 것은 가상 선택자 : hover */ | ||||||||||||||||||||||||
/* 관례적으로 padding-left등과 같이 나눠서 쓰는걸 권장한다. */ | ||||||||||||||||||||||||
.box{ | ||||||||||||||||||||||||
display: flex; | ||||||||||||||||||||||||
flex-direction: column; | ||||||||||||||||||||||||
align-items: center; | ||||||||||||||||||||||||
margin: 20px; | ||||||||||||||||||||||||
text-align: center; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
.face{ | ||||||||||||||||||||||||
width: 200px; | ||||||||||||||||||||||||
height: 250px; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
.major{ | ||||||||||||||||||||||||
width: 400px; | ||||||||||||||||||||||||
height: 250px; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
.food{ | ||||||||||||||||||||||||
width: 300px; | ||||||||||||||||||||||||
height: 250px; | ||||||||||||||||||||||||
} | ||||||||||||||||||||||||
.end{ | ||||||||||||||||||||||||
margin-bottom: 30px; | ||||||||||||||||||||||||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html lang="ko"> <!-- 여기서 lang이란? language --> | ||
<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"> | ||
<link href="./index.css" rel="stylesheet"> | ||
<title>Document</title> | ||
<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=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | ||
</head> | ||
<body> | ||
<h1>저의 짝꿍을 소개합니다!</h1> | ||
<section class="title"> | ||
</section> | ||
<nav class="banner"> | ||
<div class="box"> | ||
저의 짝궁의 모습입니다! | ||
<img class="face" src="./img/cjh_img.jpg"/> | ||
<!-- a=anchor --> | ||
<!-- c+d-> 똑같음 애들 선택 --> | ||
<!-- tip 같은 요소 3개 있을때 option+shift+방향키 -> 복붙 --> | ||
Comment on lines
+21
to
+23
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💯 |
||
</div> | ||
<div class="box"> | ||
저의 짝궁의 학부는? <br> | ||
IT | ||
<img class="major" src="./img/software_ac.png"/> | ||
</div> | ||
<div class="box"> | ||
저의 짝궁의 취미입니다! | ||
<img class="hobby" src="./img/df934e40d28dae33b9ea8a85aa4569cbd455c616511712c93d878a3cd9d98863109ab1bd99ef31f826c93cd25086ce0fa9a649c33dd1c1bf19577ceb2cf8aa7070751e03ae1c5a7bd5662df37bf82dca.png"/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. img 태그에 alt 속성값을 넣어주세요 ~! |
||
</div> | ||
<div class="box"> | ||
짝궁이 좋아하는 음식은!!!!<br> | ||
짬뽕!!! | ||
<img class="food" src="./img/1637896057710109.jpeg"/> | ||
</div> | ||
<p class="end">이상으로 저의 짝궁 소개를 마치겠습니다</p> | ||
</nav> | ||
</body> | ||
</html> |
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.
👍 👍