728x90
메인 페이지 구조 만들기
index.html
<!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>내 안에 숨어있는 직업캐 찾기!</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/home.css">
<script defer src="./js/share.js"></script>
</head>
<body>
<h2 class="page-subtitle">
나 95년생 재은쓰
</h2>
<h1 class="page-title">내 안에 숨어있는<br>
직업캐 찾기!</h1>
<img src="./images/main_character.png" alt="캐릭터" class="character">
<a href="/questions.html" class="btn btn-orange">
본캐 찾으러 GO!
</a>
<div class="btn btn-green btn-small share-or-copy">
주변에 알리기
</div>
</body>
</html>home.css
body{
background-color: #f6fcff;
background-image: url("../images/main_bg.jpg");
background-position: top center;
background-repeat: no-repeat;
}
.character {
width: 100%;
max-width: 364px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}common.css
- 여러 번 사용하는 코드들을 따로 만들기
- css 를 활용하여 애니메이션 효과주기
body {
font-family: "Pretendard Variable",sans-serif;
/* 줄바꿈되는 현상을 막아줌*/
word-break: keep-all;
padding-top: 80px;
padding-bottom: 80px;
}
img {
/* 인라인요소를 블록요소로 변환 */
display: block;
}
.page-title {
font-size: 50px;
font-weight: 800;
line-height: 1.3;
color: #13b491;
text-align: center;
margin-bottom: 20px;
}
.page-subtitle {
width: 240px;
height: 50px;
border: 5px solid #ffa32d;
border-radius: 30px;
display: flex;
justify-content: center; /*수평정렬 */
align-items: center; /*수직정렬 */
font-size: 24px;
font-weight: 700;
color: #ffa32d;
margin-left: auto; /* 가운데 정렬 */
margin-right: auto; /* 가운데 정렬 */
margin-bottom: 20px;
}
.btn {
max-width: 500px;
height: 100px;
display: flex; /* 블록요소로 바꾸어줌 */
justify-content: center; /*수평정렬 */
align-items: center; /*수직정렬 */
font-size: 50px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
border-radius: 20px;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
/* 전환효과(에니메이션효과) */
transition: 1s;
}
.btn-orange {
background-color: #ffa32d;
box-shadow: 0 14px 0 #e66000;
color: #ffffff;
}
/* 클릭했을 때 그림자가 줄어들면서 눌리게보이는 효과 */
.btn-orange:active {
box-shadow: 0 4px 0 #e66000;
transform: translateY(10px);
}
.btn-green {
background-color: #32bfa1;
box-shadow: 0 14px 0 #299a82;
color: #ffffff;
}
.btn-green:active {
box-shadow: 0 4px 0 #299a82;
transform: translateY(10px);
}
.btn-gray {
background-color: #f2f4f6;
box-shadow: 0 14px 0 #dfe1e2;
color: #444444;
}
.btn-gray:active {
box-shadow: 0 4px 0 #dfe1e2;
transform: translateY(10px);
}
.btn-small {
max-width: 350px;
height: 70px;
font-size: 26px;
margin-bottom: 30px;
}share.js
- 공유 기능 추가하기
const btnEl = document.querySelector('.share-or-copy')
// 각 지원 기능 확인!
const isSupportedShare = !!navigator?.share
const isSupportedClipboard = !!navigator?.clipboard
const isSupportedClipboardCommand = document.queryCommandSupported?.('copy')
// 공유 및 복사 기능 상태 체크!
const healthEl = document.createElement('div')
healthEl.style.display = 'none'
healthEl.innerHTML = `s: ${isSupportedShare}, c: ${isSupportedClipboard}, cc: ${isSupportedClipboardCommand}`
document.body.append(healthEl)
// 모바일 브라우저 내장 공유 기능!
async function startNativeShare() {
await navigator.share({
title: '내 안에 숨어있는 직업캐 찾기!',
text: '누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요!',
url: location.href // 현재 페이지 주소!
})
}
// 주소 복사 기능!
async function copyToClipboard() {
// 레거시 우선!
if (isSupportedClipboardCommand) {
const textarea = document.createElement('textarea')
textarea.style.position = 'fixed'
textarea.style.top = 0
textarea.style.left = 0
textarea.value = location.href
document.body.appendChild(textarea)
textarea.focus()
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
alert('링크를 복사했어요 ><')
return
}
if (isSupportedClipboard) {
await navigator.clipboard.writeText(location.href)
alert('링크를 복사했어요 ><')
}
}
// 모든 기능이 없는 경우 공유 버튼 제거!
if (!isSupportedShare && !isSupportedClipboard && !isSupportedClipboardCommand) {
btnEl.style.display = 'none'
}
// 공유 버튼을 클릭했을 떄!
btnEl?.addEventListener('click', async function () {
if (isSupportedShare) {
await startNativeShare()
return
}
if (isSupportedClipboard || isSupportedClipboardCommand) {
await copyToClipboard()
}
})
'일단 해보는 코딩 > Project' 카테고리의 다른 글
| [2일차] MBTI 테스트 프로그램만들기 (2) | 2023.05.08 |
|---|---|
| [1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기 (0) | 2023.04.26 |
| [Java Script] 계산기 프로젝트(2) (0) | 2022.07.07 |
| [Java Script] 스톱워치 프로젝트(1) (0) | 2022.07.07 |