※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
<css에 치는겨> ★vscode폴더 보면서 하기
1.css 애니 첫걸음 transition>
원하는 크기안에 사진 넣고 마우스hover시 다른 박스 뜨는거
2. 모든 CSS 속성에 대응되는 trainstion>
클릭해서 뭐 나오거나 그런것들 다 이벤트라 함
★F12해서 콘솔창에 출력
3. HTML에서 Javascript 사용하기>
자바스크립트(js)는 태초부터 웹 ui를 제어하기 위해 만들어진 언어
- js로 제어하고 싶은 html태그를 선택
- 어떤 이벤트가 발생했을때 제어할 것인지 선택
- css를 변경
. 을 ~의로 해석함 document.겟엘리먼트 아이디 등 속성 많아.
var 변수이름= document.겟엘리먼트 아이디("아이디이름");
console.log(박스);
4. JavaScript로 선택하는 HTML 태그>
-
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결은
https://jenny-daru.tistory.com/17 사이트 참고 ★★잘알아두기 -
js이벤트 리스너 검색, 종류★★잘알아두기
https://velog.io/@dabin0219/TIL-13-event-%EC%A2%85%EB%A5%98%EC%99%80-eventListener 사이트참고
- var 변수이름= document.겟엘리먼트 아이디("아이디이름"); 변수선언
박스.addEventListener("click",function() {
});
console.log(박스);
★★중요!! 이 폼을 외워
5. addEventListner를 통해 Event 선택하기
var 변수이름= document.겟엘리먼트 아이디("아이디이름");
박스.style.width="200px"; 박스크기 변하는거.
css에 transition: all 1s ease-in-out; 넣으면 시간정해
6. Event가 발생했을 때 CSS 변경하기
<button>삭제하기</button>
" "안에 " 쓰고 싶다면 '로 대체해서 쓰기.
<script> function 함수이름() {
var box = document.getElementById('box');
div.style.color = 'orange'; }</script>
스크립트에서 ui바꾸는 3단계
html/css ui를 만듭니다 > css로 숨긴다 > js로 다시 나타나게 함
7. Modal - UI 만들고 CSS로 숨기기>
모달창 만들기 ★vs코드참조
document.querySelector(".");
document.querySelector("^");선택 의 종류
- 모달 변수에 쿼리셀렉터 이용해서 클래스를 선택할수 있다.
8. Modal - JS로 Modal창 나타내기
9. Modal - JS로 Modal창 숨기기
10. Modal - 함수 인자를 통해 Dry한 코드 피하기
- dry: don't repeat your code 반복되는 부분이 최소화 하란 의미.
11. transform 속성>
★중요웹 ui를 바꾸는 속성.
https://developer.mozilla.org/ko/docs/Web/CSS/transform
★★트랜스폼 검색.어떤 속성들 있는지 눌러보고 인식.
12. 복잡한 애니메이션이 필요할 때 -
animation 속성
transform: translate(12px, 50%); 위치값
top이나 tarnsform이 있다면 대부분 transform을 사용하는 것이정답.
이유는?웹페이지에 그리는 순서 때문. (html browser process검색★)
dom-tree > Lauout(가로,높이) > paint > composite(transform)
13. 마우스 움직임 추적하기 (1) >
wiggle ★vs코드참조
infinite 무한반복.
https://developer.mozilla.org/ko/docs/Web/CSS/animation
★★잘알아두기
14. 마우스 움직임 추적하기 (2)>
★vs코드참조
★★자바스크립트 사용할때는 <script>태그안에서 사용
window 사용자가 웹페이지를 봤을때 보이는 모든 영역.
클라이언트 x와 클라이언트 y값=좌표
15. 마우스 움직임 추적하기 (3)>
css tricks mousemove 검색>
https://css-tricks.com/how-to-map-mouse-position-in-css/
백그라운드에서 css이미지를 어떡해 다루는지.
마우스 움직임에 따라 백그라운드 이미지 움직임
사이트주인은 css로만 만듬. 우리는 이런거 자바스크립트로 만들겨
사이트 주인은 개노가다로 화려한 css 만듬. 멋지긴 하네;;
16. 마우스 움직임 추적하기 (4)>
★vs코드참조 마우스로 글씨 가림
17. 스크롤 위치 추적하기 (1)
css tricks scroll 검색>
css gradient example 검색> https://cssgradient.io/
18. 스크롤 위치 추적하기 (2)>
★vs코드참조
스크롤 위치에 따라 세로바 색 채워주기
문서의 전체 높이 : document.documentElement.scrollHeight
브라우저에 보여주고 있는 높이 : window.innerHeight
스크롤의 위치: document.documentElement.scrollTop
스크롤의 위치 / (문서의 전체 높이 - 브라우저가 보여주고 있는 높이) * 100%
19. 스크롤 위치 추적하기 (3) >
보안하기+ 스크롤 위치에 따라 가로바 색 채워주기
자바스크랩트 반올림 검색 https://hianna.tistory.com/446
20. 강의를 끝내며
새로운 css나 html 배우는 과정의 시간을 줄었음 좋겠음.
