# 20210324(수)

### 1. 학습 날짜

* 2021-03-24

### 2. 학습 시간

* 09:00 \~ 22:30

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

* 포트폴리오 강의 복습

### 4. 학습 목표

* 포트폴리오 강의 정리하기
* 처음부터 다시 구현해보기

### 5. 학습 정리

* [스크롤된 값을 이용해서 navbar 의 속성 바꾸기](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/undefined/1.-navbar)
* [navbar 의 버튼 활성화](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/undefined/untitled)
* [스크롤 된 값을 이용해서 특정 버튼 나타나게 만들기](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/undefined/arrow-up)
* [필터링 구현](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/undefined/4.-project)
* [project 필터링에 transition 효과 넣기](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/undefined/5.-project-transition)
* [css - nth-child](https://simian114.gitbook.io/blog/undefined/undefined/undefined/undefined-1/css-1/nth-child)

### 6. 상세 학습 내용

* css 의 nth-child 를 이용하는데 애로사항이 있었다. nth 를 사용하기 위해서는 우리가 사용할 요소가 리스트의 형태로 어떤 큰 하나의 컨테이너 안에 들어가 있어야한다.
  * 특정 컨테이너 하나에 들어있는 요소를 이용해서 nth-chlid 를 하면 되는데 나같은 경우는 그렇게하지않고 요소의 안에 있는 요소를 가지고 nth-child 를 하고 있었다... 앞으로 주의하자.
* display: none 에는 transition 효과가 적용되지 않는다. 적용되지 않는 이유는 간단하다. DOM이 렌더링이 되지 않기 때문이다. 기본적으로 transition 을 사용하기 위해서는 과거와 현재가 필요한데 none 을 하는 순간 그 무엇에도 없기 때문에 당연히 되지 않는 것.
  * 이를 피하기 위한 방법으로는 해당 요소를 포함하는 컨테이너를 이용해서 transition 을 적용하던가 또는 animation 을 이용하는 방법이 있다.

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 흠.. 10만원짜리 강의 치고는 내용이 영 부실한데...

### 8. 다음 학습 계획

* 드림코딩 포트폴리오 강의 마지막 복습!