Skip to content

2,3 주차 미션 풀이 코드 #26

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.

Sign up for GitHub

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

Open
kty0529 wants to merge 11 commits into
base: main
Choose a base branch
from
Open

2,3 주차 미션 풀이 코드 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a202863
feat: 사이트 초안
kty0529 Feb 6, 2023
6d3f98e
feat: About 페이지 제작
kty0529 Feb 6, 2023
be91105
feat: Timeline 페이지 추가
kty0529 Feb 6, 2023
d4d5184
refactor: 사이드바 부드럽게 열기
kty0529 Feb 6, 2023
5e49a49
feat: 모바일 탭 클릭 시 사이드바 닫기
kty0529 Feb 6, 2023
04acf9b
chore: 모바일 토글 메뉴에 접근성 대응
kty0529 Feb 6, 2023
86bbacc
chore: 모바일 토글 버튼 크기 변경
kty0529 Feb 6, 2023
847ddbe
feat: 포트폴리오 페이지 추가
kty0529 Feb 12, 2023
c4ae031
feat: 포트폴리오 모달 UI 추가
kty0529 Feb 12, 2023
7ece848
feat: 모달 기능 추가
kty0529 Feb 12, 2023
44401d8
feat: contact 페이지 신설 및 스크립트 정리
kty0529 Feb 12, 2023
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
943 changes: 943 additions & 0 deletions 3기/KimTaeYoung/week2/css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

71 changes: 71 additions & 0 deletions 3기/KimTaeYoung/week2/fonts/pretendard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
font-family: 'Pretendard';
font-weight: 900;
font-display: swap;
src: local('Pretendard Black'), url('./woff2/Pretendard-Black.woff2') format('woff2'), url('./woff/Pretendard-Black.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 800;
font-display: swap;
src: local('Pretendard ExtraBold'), url('./woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('./woff/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 700;
font-display: swap;
src: local('Pretendard Bold'), url('./woff2/Pretendard-Bold.woff2') format('woff2'), url('./woff/Pretendard-Bold.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 600;
font-display: swap;
src: local('Pretendard SemiBold'), url('./woff2/Pretendard-SemiBold.woff2') format('woff2'), url('./woff/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 500;
font-display: swap;
src: local('Pretendard Medium'), url('./woff2/Pretendard-Medium.woff2') format('woff2'), url('./woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 400;
font-display: swap;
src: local('Pretendard Regular'), url('./woff2/Pretendard-Regular.woff2') format('woff2'), url('./woff/Pretendard-Regular.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 300;
font-display: swap;
src: local('Pretendard Light'), url('./woff2/Pretendard-Light.woff2') format('woff2'), url('./woff/Pretendard-Light.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 200;
font-display: swap;
src: local('Pretendard ExtraLight'), url('./woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('./woff/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
font-family: 'Pretendard';
font-weight: 100;
font-display: swap;
src: local('Pretendard Thin'), url('./woff2/Pretendard-Thin.woff2') format('woff2'), url('./woff/Pretendard-Thin.woff') format('woff');
}
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Black.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Bold.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraBold.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraLight.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Light.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Medium.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Regular.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-SemiBold.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff/Pretendard-Thin.woff
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Black.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Bold.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraBold.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraLight.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Light.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-SemiBold.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/fonts/woff2/Pretendard-Thin.woff2
View file
Open in desktop
Binary file not shown.
Binary file added 3기/KimTaeYoung/week2/images/CSS3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/Figma.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/HTML5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/JavaScript.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/about-background.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/sample.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 3기/KimTaeYoung/week2/images/sample2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 200 additions & 0 deletions 3기/KimTaeYoung/week2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
<!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">

<title>Mission01</title>

<!-- fonts -->
<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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./fonts/pretendard.css">

<!-- core -->
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
<div id="wrap">
<header id="header">
<div class="container">
<h1 class="title">Casper</h1>

<div class="navigation">
<button class="toggle-sidebar" aria-hidden="true" aria-label="모바일 메뉴 열기"></button>

<ul>
<li><button class="tab-button" data-tab="about" type="button">About</button></li>
<li><button class="tab-button" data-tab="timeline" type="button">Timeline</button></li>
<li><button class="tab-button" data-tab="portfolio" type="button">Portfolio</button></li>
<li class="active"><button class="tab-button" data-tab="contact" type="button">Contact</button></li>
</ul>
</div>
</div>
</header>

<main id="main">
<section class="tab-content about">
<div class="container">
<div class="content">
<h2 class="title">
<span>👋🏻</span>
I’m <strong>Frontend Developer</strong>
</h2>

<p class="description">
안녕하세요.
<br>프론트엔트 개발자 캐스퍼입니다.
</p>
</div>

<div class="languages">
<div class="row">
<img src="./images/HTML5.png" alt="HTML5 아이콘">
<img src="./images/CSS3.png" alt="CSS3 아이콘">
<img src="./images/JavaScript.png" alt="JavaScript 아이콘">
<img src="./images/Figma.png" alt="Figma 아이콘">
</div>
</div>
</div>
</section>

<section class="tab-content timeline">
<div class="container">
<div class="title-block">
<small class="subtitle">Timeline</small>
<h2 class="title">수상 및 활동</h2>
</div>

<div class="content-block">
<ul id="fetch-timeline"></ul>
</div>
</div>
</section>

<section class="tab-content portfolio">
<div class="container">
<div class="title-block">
<small class="subtitle">Portfilio</small>
<h2 class="title">포트폴리오</h2>
</div>

<div class="content-block">
<ul id="fetch-portfolio"></ul>
</div>
</div>
</section>

<section class="tab-content contact active">
<div class="container">
<div class="title-block">
<small class="subtitle">Get in Touch</small>
<h2 class="title">연락하기</h2>
</div>

<div class="content-block">
<div class="infomation">
<div class="item">
<div class="icon">
<img src="./svgs/mail.svg" alt="이메일 아이콘">
</div>
<div class="value"><a href="mailto:kty0529@gmail.com">kty0529@gmail.com</a></div>
</div>

<div class="item">
<div class="icon">
<img src="./svgs/phone_enabled.svg" alt="전화기 아이콘">
</div>
<div class="value"><a href="tel:010-6512-5882">010-6512-5882</a></div>
</div>

<div class="item">
<div class="icon">
<img src="./svgs/github.svg" alt="Github 아이콘">
</div>
<div class="value"><a href="https://github.com/kty0529" target="_blank">https://github.com/kty0529</a></div>
</div>

<div class="item">
<div class="icon">
<img src="./svgs/location_on.svg" alt="위치 아이콘">
</div>
<div class="value">서울시 관악구</div>
</div>
</div>

<div class="form">
<form novalidate onsubmit="return sendEmail(this);">
<div class="row name-row">
<input class="comm" name="Name" type="text" placeholder="Name" required>
</div>

<div class="row email-row">
<input class="comm" name="Email" type="email" placeholder="Email" required>
</div>

<div class="row message-row">
<textarea class="comm" name="Message" placeholder="Message" required></textarea>
</div>

<div class="row button-row">
<button type="submit">
Submit
<img src="./svgs/arrow_forward.svg" alt="화살표 아이콘" aria-hidden="true">
</button>
</div>
</form>

<div class="icon">
<img src="./svgs/local_post_office.svg" alt="우체통 아이콘" aria-hidden="true">
</div>
</div>
</div>
</div>
</section>
</main>

<footer id="footer">
<h2 class="screen-reader-text">사이트 푸터</h2>

<div class="container">
<span class="desktop">Copyright 2023 <strong class="copy">Casper</strong> Allrights Reserved.</span>
<span class="mobile">© <b class="copy">Casper</b></span>
</div>
</footer>
</div>

<div id="modal" aria-hidden="true">
<div class="inner">
<button class="close" type="button" aria-label="모달 닫기" onclick="modalClose();" autofocus>
<img src="./svgs/close.svg" alt="닫기 아이콘">
</button>

<div class="thumbnail"></div>

<div class="content">
<div class="head">
<div class="title"></div>

<div class="info languages">
<img src="./svgs/terminal.svg" alt="터미널 아이콘">
<span></span>
</div>

<div class="info date">
<img src="./svgs/calendar_today.svg" alt="날짜 아이콘">
<span></span>
</div>
</div>

<div class="body"></div>
</div>
</div>
</div>

<script src="./javascript/core-footer.js"></script>
</body>
</html>
Loading