# 20210323(화)

### 1. 학습 날짜

* 2021-03-23

### 2. 학습 시간

* 10:00 \~ 23:30

### 3. 학습 범위 및 주제

* css, 자바스크립트

### 4. 학습 목표

* 만들어 놓은 html, css 에 자바스크립트 적용하기

### 5. 학습 정리

* [classList](https://simian114.gitbook.io/blog/undefined/javascript/classlist)
* [문제풀이](https://simian114.gitbook.io/blog/undefined/undefined-1/04.-leetcode-819)

### 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. 다음 학습 계획

* 드림코딩 강의 자바스크립트 끝내고 정리하기!
* 배포까지 해보기