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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined-1/diary/2021/march/20210323.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.