오늘은 어제 생겼던 hover에 대한 의문점에 대해서 이유를 찾게 되었다. css에서 사용하는 hover를 클래스에 적용할 때, 클래스명을 쓰고 띄어쓰기를 없이 ":hover"를 붙이면 해당하는 클래스에만 직접적으로 적용이 되는데, 클래스명 옆에 띄어쓰기를 한 칸 하고 ":hover"를 붙이면 그 클래스에 속한 자식 태그들에게 적용이 되는 것이었다!!! 이 부분이 너무 신기하기도 했고, 한편으로 hover를 적용할 때 버튼이 여러개면 클래스명을 부여하기 귀찮거나 ">"을 사용하여 자식 태그를 지칭하기 귀찮을 때 아주 간편하게 쓰기 좋은 기능이라고 생각했다.
hover 띄어쓰기가 영향을 미치는 이유 | 코드잇
.submit-btn : hover{ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); } .submit-btn:hover{ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); } btn : hover -> btn 과 hover 사이에 간격이 있을땐 그림자 적용이 안되는데 btn:hover-> 이렇게 딱 붙
www.codeit.kr
한편으로 오늘은 비동기처리에 대해 간단하게 배워보았다. 자바스크립트는 동기적 언어이다보니 비동기처리를 위해 콜백함수, 프로미스, async & await 를 사용한다고 한다. 지금은 완전히 이해되지 않아서 나중에 서버 호출 관련하여 필요할 때 보다 깊이있게 공부해봐야겠다.
자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?
들어가기 전에, 필자는 자바스크립트를 처음 접하고, 오로지 문법적인 것에만 집중해서 공부를 했었다. 하지만 개발할 때 더 중요한 것은 자바스크립트가 어떻게 동작하는지를 먼저 알고 개발
ljtaek2.tistory.com
비동기적 방식 처리 방법 (Callback, Promise, async &await)
비동기적 방식 처리 방법 Callback 함수 Promises async & await Callback 함수 Callback 이란? 다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말한다. 다시 말해 코드를 통해
hi-zini.tistory.com
'TIL' 카테고리의 다른 글
| [221219] 좋아요 기능 구현 요구 사항 (0) | 2022.12.19 |
|---|---|
| [221207] setState의 함수형 업데이트방식 / URI vs URL vs URN / query parameter, query string, path variable (0) | 2022.12.07 |
| [221206] Todo 리스트 페이지를 리덕스와 라우터 사용하여 만들기 (0) | 2022.12.06 |
| [221130] 데이터 바인딩 / SPA (1) | 2022.11.30 |
| [221130] 리액트 라이프 사이클과 useEffect (0) | 2022.11.28 |