20210323(화)
1. 학습 날짜
2021-03-23
2. 학습 시간
10:00 ~ 23:30
3. 학습 범위 및 주제
css, 자바스크립트
4. 학습 목표
만들어 놓은 html, css 에 자바스크립트 적용하기
5. 학습 정리
6. 상세 학습 내용
element 요소에서 특정 class 값을 이용해서 css 를 변경하는 일이 정말 잦은거같다.
이전에 class의 요소를 추가하고 제거하는 방법에 대해 확실하게 알지 못해서 많이 헷갈렸었는데 오늘 classList 에 대해 조금 알아봤다.
html 요소에
div class="test1 test2"처럼 입력했을 때 classList 를 하면 배열로 두 test1, test2 가 나온다.이게 어떻게 가능한것인가? 이 읽기 전용 프로퍼티인 classList 는 호출이 되면 className의 결과인 문자열 'test1 test2 을 공백을 기준으로 split 한다.
그리고 그 결과를 사용자에게 읽기 전용으로 주는 것이다.
이 classList 의 메서드로는 add, remove, replace, contains 등이 있다.
html 요소들이 내가 원하는 순서가 아니라 지 멋대로 겹쳐져서 나올 때
이런 경우에는 z-index 를 변경함으로써 요소들의 앞뒤를 지정할 수 있다.
요소의 사이즈 가져오기
요소의 사이즈를 가져오는 방법은 정말로 많다. 그 중에서 가장 유용한 것은 사용자에게 보이는 요소으 크기 일 것이다.
getBoundingClientRect() 메서드를 이용하면 사용자가 직접 보는 그 좌표와 크기가 가져와진다.
7. 오늘 학습 내용에 대한 개인적인 총평
글로 정리한게 정말로 많은데 아직 너무 다듬어지지 않았다.
프론트 공부는 너무 즐겁다. 왜 진작에 하지 않았을까?
8. 다음 학습 계획
드림코딩 강의 자바스크립트 끝내고 정리하기!
배포까지 해보기
Last updated