학원 수업 40일차 221018
- 9-10
HTML <a> Tag
https://www.w3schools.com/tags/tag_a.asp
Default CSS Settings
- 10-11
CSS Selector Reference
https://www.w3schools.com/cssref/css_selectors.asp
:not(selector)
: Selects every element that is not a <p> element
특수문자 쓰고 싶으면
엔티티코드로 변환해서 써
ex) & -> '& 엔티티 코드' 검색!
https://www.w3schools.com/css/css_icons.asp
https://fontawesome.com/
- 12-1
CSS 2D Transforms
https://www.w3schools.com/css/css3_2dtransforms.asp
CSS Transitions
https://www.w3schools.com/css/css3_transitions.asp
Change Several Property Values
헤드 구현 완료~~
- 2-3
메인을 만들어보자!
CSS Animations
https://www.w3schools.com/css/css3_animations.asp
slick slider
갖다쓸수도 있음
https://kenwheeler.github.io/slick/
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#numbers
${#numbers.sequence(from,to)}
thymeleaf 쓸거면 html태그에
<html xmlns:th="http://www.thymeleaf.org"> 이렇게 넣어줘야 사용 가능
- 3-4
<li th:each="num:${#numbers.sequence(1,6)}">
<a href="#" th:style="|background-image: url('/images/visual/visual${num}.png');|">
[[${num}]]
</a>
</li>
https://www.w3schools.com/jquery/jquery_get_started.asp
https://www.w3schools.com/jquery/jquery_syntax.asp
(visual.js)
$(); (이벤트와 동일) 다 로딩됐을 때 실행되는 레디펑션!
jQuery Effects - Animation
https://www.w3schools.com/jquery/jquery_animate.asp
jQuery Effect Methods
https://www.w3schools.com/jquery/jquery_ref_effects.asp
jQuery animate() Method
https://www.w3schools.com/jquery/eff_animate.asp
Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
- 4-5
참고
Window setInterval()
https://www.w3schools.com/jsref/met_win_setinterval.asp
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
https://www.codingfactory.net/10373
Window setTimeout()
https://www.w3schools.com/jsref/met_win_settimeout.asp
jQuery first() Method
https://www.w3schools.com/jquery/traversing_first.asp
- 5-6
jQuery - css() Method
https://www.w3schools.com/jquery/jquery_css.asp
(visual.js)
브라우저 화면 최소화 이벤트
https://developer.mozilla.org/ko/docs/Web/API/Document/visibilityState
visibilitychange
https://developer.mozilla.org/ko/docs/Web/API/Document/visibilitychange_event
예제
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
//브라우저의 화면이 보여지냐 숨겨지냐에 따라 실행되는 이벤트
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
if(document.visibilityState=="hidden"){
stop();
} else if(document.visibilityState=="visible"){
myTimeout = setTimeout(start,timmer);
}
});