학원 수업 40일차 221018

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/

메인을 만들어보자!

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"> 이렇게 넣어줘야 사용 가능

<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.

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);
  }
});

"HELLO HHANA WORLD!!"