JavaScript Portfolio(1)
업데이트:
html 구성
<head> 영역
- 역할 :페이지가 렌더링 되기전의 준비되어야하는 단계
- internet expolor의 최신버전으로 렌더링 시키기 위해 http-equiv 영역 설정
- 반응형 웹을 설정하기위해 viewpoint 설정
- title 영역은 웹브라우저의 이름을 결정
- 인터넷 익스플러러에서 자바스크립트 경고창을 방지할수 있게 적어야함
- 아이콘, 폰트, 유저스타일, 유저스크립트
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Portfolio</title> <!-- 인터넷 익스플로러에서 자바스크립트 관련 차단된 컨텐츠 허용 뜨는것 방지--> <!-- saved from url=(0013)about:internet --> <!-- icon --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- fonts --> <link href="https://fonts.googleapis.com/css?family=Heebo|Noto+Sans+KR" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="portfolio.css"><body> 영역
- 역할: 페이지의 내용을 포함하는 단계
- class, idea를 사용하여 javascript가 html에 접근하고 제어하기 쉽게 해줌
CSS 속성
- 큰 영역부터 차례로 작성해나감
- *를 선언하고 조정하여 공통영역을 다룸
- body 의 webkit : Chrome과 Safari / moz : firefox
- word-braek: 줄바꿈을 의미
- @keyframs와 @keyframs를 사용하여 에니메이션 효과를 추가할 수 있음
- calc()를 활용하여 페이지가 넓이 100%를 가질수 있게됨
- @media query를 사용하여 반응형 웹을 만들 수 있음
- .header-area > .navbar > .navbar-brand 의 내용을 통해 logo를 가운데로 맞출 수 있음
/* COMMON */
* {
margin: 0;
padding: 0;
font-size: 0;
}
body {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
word-break: break-all;
font-family: 'Heebo', sans-serif;
}
.navbar-fade {
animation-name: navbar-fade;
animation-duration: 0.5s;
-webkit-animation-name: navbar-fade;
-webkit-animation-duration: 0.5s;
}
@keyframes navbar-fade {
from { opacity: .4}
to { opacity: 1 }
}
@-webkit-keyframes navbar-fade {
from { opacity: .4}
to { opacity: 1 }
}
.header-area > .navbar {
width: calc(100% - 120px);
margin: 0 60px;
overflow: hidden;
}
@media (min-width: 992px) {
.header-area > .navbar {
max-width: 900px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.header-area > .navbar {
max-width: 1000px;
}
}
.header-area > .navbar > .navbar-brand {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 32px;
cursor: pointer;
}
찾아봐야 할 것
- display:
- position
- transform:
- overflow:
- cursor:
JS 영역
- JS를 활용하여 페이지를 동적으로 변화 시킴
- classList.toggle함수는 show라는 클래스가 없으면, 만들어주고 있으면 없애줌
- toggleBtn을 누르면 이벤트가 실행되고 menuToggle함수를 호출
function menuToggle() {
document.getElementById('menu').classList.toggle('show');
}
document.getElementById('toggleBtn').addEventListener('click', menuToggle);
- NaviBar를 아래의 함수를 가지고 항상 위에 고정시킴
- fade 효과를 줌
function scrollFunction() {
var header = document.getElementById('header');
if(document.documentElement.scrollTop > 70) {
if(!header.classList.contains('navbar-fixed')) {
header.classList.add('navbar-fixed');
document.getElementsByTagName('body')[0].style.marginTop = '70px';
header.style.display = 'none';
setTimeout(function(){
header.style.display = 'block';
}, 40);
}
} else {
if(header.classList.contains('navbar-fixed')) {
header.classList.remove('navbar-fixed');
document.getElementsByTagName('body')[0].style.marginTop = '0';
}
}
}
