20210324(수)
1. 학습 날짜
2021-03-24
2. 학습 시간
09:00 ~ 22:30
3. 학습 범위 및 주제
포트폴리오 강의 복습
4. 학습 목표
포트폴리오 강의 정리하기
처음부터 다시 구현해보기
5. 학습 정리
6. 상세 학습 내용
css 의 nth-child 를 이용하는데 애로사항이 있었다. nth 를 사용하기 위해서는 우리가 사용할 요소가 리스트의 형태로 어떤 큰 하나의 컨테이너 안에 들어가 있어야한다.
특정 컨테이너 하나에 들어있는 요소를 이용해서 nth-chlid 를 하면 되는데 나같은 경우는 그렇게하지않고 요소의 안에 있는 요소를 가지고 nth-child 를 하고 있었다... 앞으로 주의하자.
display: none 에는 transition 효과가 적용되지 않는다. 적용되지 않는 이유는 간단하다. DOM이 렌더링이 되지 않기 때문이다. 기본적으로 transition 을 사용하기 위해서는 과거와 현재가 필요한데 none 을 하는 순간 그 무엇에도 없기 때문에 당연히 되지 않는 것.
이를 피하기 위한 방법으로는 해당 요소를 포함하는 컨테이너를 이용해서 transition 을 적용하던가 또는 animation 을 이용하는 방법이 있다.
7. 오늘 학습 내용에 대한 개인적인 총평
흠.. 10만원짜리 강의 치고는 내용이 영 부실한데...
8. 다음 학습 계획
드림코딩 포트폴리오 강의 마지막 복습!
Last updated