Vanilla JS, Bootstrap
페이지 레이아웃
<body>
<section id="main" style="display: block;">
</section>
<section id="qna" style="display: none;">
</section>
<section id="result" style="display: none;">
</section>
</body>부트스트랩
부트스트랩에서 제공하는 <link>를 추가하여 사용
class속성에 이름을 추가하여 부트스트랩 CSS 적용 가능
Grid system: 전체를 12등분하여 관리
col-6: 6/12col-lg-12: lg크기에서는 12/12
메인페이지 꾸미기
부트스트랩의 Grid system을 사용하기 위해 container class로 감싸기
<div class="container">
...
</div>부트스트랩 공백
{property}{sides}-{size}property
m: margin
p: padding
sides
t:top b:bottom s:left e:right
x: left,right y: top,bottom
mx-auto: 좌우 마진 동일하게 줌(=가운데 정렬)
py-5: 상하 패딩 50px 정도
반응형 이미지
<div class="col-lg-6 col-md-8 col-sm-10 col-12">
<img class="img-fluid">
</div>img-fluid : 반응형 이미지로 만듬
화면 전환하기
html
<button onclick="js:begin()">시작하기</button>js:함수명()과 같은 방식으로 html에 이벤트핸들러 등록 가능
javascript
const main = document.querySelector("#main");
const qna = document.querySelector("#qna");
function begin(){
main.style.animation = "fadeOut 1s";
setTimeout(() => {
qna.style.animation = "fadeIn 1s";
setTimeout(() => {
main.style.display = "none";
qna.style.display = "block"
}, 450) // 0.5초보다 살짝 여유롭게 줌
}, 450);
}qna 꾸미기
버튼 클릭 효과
.answerList:hover, .answerList:focus {
background-color: pink;
color: whitesmoke;
}위와 같이 hover와 focus에 함께 줄 것
진행 상태바 구현
html
<div class="status mx-auto mt-5">
<div class="statusBar">
</div>
</div>css
.statusBar{
/* 그라데이션 효과 적용 */
}그라데이션 효과 주기
Gradient Generator : colorzilla
javascript
var status = document.querySelector('.statusBar');
status.style.width = (100/endPoint) * (qIdx+1) + '%';전체 100%를 endPoint로 등분한뒤 qIdx+1(0base 보정)만큼 곱하여 width로 준다
알고리즘 개선
- 십이간지에 대한 type을 숫자로 변경
/*
mouse,0
cow,1
tiger,2
rabbit,3
dragon,4
snake,5
horse,6
sheep,7
monkey,8
chick,9
dog,10
pig,11
*/- qna 대답 선택시
select배열의 idx증가
var target = qnaList[qIdx].a[idx].type;
for(let i of target){
select[i] += 1;
}select배열의 최대값의 인덱스 반환
function calResult(){
return select.indexOf(Math.max(...select));
}Netlify로 배포하기
카카오톡 공유링크 meta태그
<meta property="og:url" content="배포url" />
<meta property="og:title" content="링크 제목" />
<meta property="og:type" content="website" />
<meta property="og:image" content="링크 이미지" />
<meta property="og:description" content="링크 설명" />favicon meta태그
<link rel="shortcut icon" href="img/favicon.ico">
<!-- apple 기기를 위해 추가 -->
<link rel="apple-touch-icon-precomposed" href="img/favicon.ico" />무료 아이콘(
.ico): icon-icons
카카오톡 공유 기능
사용자 응답 사진으로 구현
JS개발자