[js/css/styled-component] 220704

js

1.stopPropagation() 과 preventDefault() 의 차이는?

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

Event.stopPropagation() - Web API | MDN

오늘 수업을 듣다가 stopPropagation() 이 나왔다. 그럴바엔 그냥 preventDefault()쓰는게 낫지않나 싶어서 검색해보는게 나을 것 같았다 

https://velog.io/@ayaan92/preventDefault%EC%99%80-stopPropagation%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

https://velog.io/@dfd1123/stopPropagation-%EA%B3%BC-preventDefault-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AD%98%EA%B9%8C#:~:text=event.stopPropagation()%20%EB%8A%94%20%EC%83%81%EC%9C%84,%EB%A5%BC%20%EC%9E%91%EB%8F%99%ED%95%98%EC%A7%80%20%EB%AA%BB%ED%95%98%EA%B2%8C%20%ED%95%9C%EB%8B%A4.

대충 이해를 한다면 prevent는 아예동작을 막는거라면 stop~은 버블링을 막는 그런거인것같다!

아직 정확하게는 이해하지 못했다 언젠간 다시 돌아와 정리하리///

 

css

1.모달배경을 줄 때 화면 꽉차게 하고싶다면, width:100% or width:100vw 이렇게 주지않아도된다

 포지션을 준 상태에서 left:0; right:0;top:0;bottom:0; 위치값을 다 주게 되면 꽉 차진다. 왜 나는 양쪽의 하나만 줄 생각을했지..?

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

꽉차게 만들 경우만 적용 가능이고 사이트에서는

top과 bottom을 지정한 경우(auto가 아닌 경우), top이 우선 적용됩니다.
left와 right를 지정한 경우, direction (en-US)이 ltr(영어, 한국어 등)이면 left를 우선 적용하고, direction (en-US)이 rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용합니다. 

라고 설명하고 있다. 역시 내 기억이 맞았지만 예외인 경우(화면 꽉차게 만들때)를 꼭 기억하고 써먹어야겠다

 

 

2. 다양한 커서들 

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

cursor - CSS: Cascading Style Sheets | MDN

항상 포인터만 쓰고있기 때문에 다른 커서 형태가있다는 걸 알지 못했다(공부하는 애가 맞니?)

과제시간에 grab이 나와서 혹 다른 커서들이 있나 찾아보니, 많은 커서형태가 존재했다 

wait부분을 보면서 아니 이거 그냥 로딩할때 저절로나오는게 아니였다고?란 생각이 들긴했는데 갑자기 모르겠다.. 쨌든 따로있는 줄 몰랐다. 혹 서버에 로딩이 생길 때의 코드를 작성할 때 한번 써보고 싶다!

 

 

 

 

styled-component

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`

<GlobalStyle>을 사용할 때, <GlobalStyle></GlobalStyle>이라고 써도 되긴 하지만 그 안에 자식요소가 없어야 한다. 렌더링이되지않음(이라고 라이브세션에서그럼)

아직 리액트도 다 못배운 상태이기때문에 styled-component...나중에 제대로 조질것이다