치춘짱베리굿나이스

scroll-snap 웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다 위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다 임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다 (이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다) 이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다 세 개의 속성들 scroll-snap-type (부모) scroll-snap-type: [ x | y | block | inline | both] [ ma..

두 태그를 묶은 이유는 내가 헷갈려서 white-space 공백 문자를 어떻게 처리할지에 대한 속성이다 '안녕하세요. 이것은 치춘 블로그 (blog.chichoon.com) 입니다.\n만나서 반갑습니다. 이것은 white-space 처리용 예문입니다.\n이것은 white-space 처리용 예문입니다.' 예문은 다음과 같다 normal white-space: normal; 연속으로 나타나는 공백 (여러 개의 공백) 을 하나로 합친다 개행 문자도 다른 공백 문자와 동일하게 처리한다 줄이 너무 길어 넘칠 경우, 자동으로 줄바꿈한다 nowrap white-space: nowrap; 연속으로 나타나는 공백을 하나로 합친다 줄 바꿈은 에서만 이루어진다 자동 줄바꿈이 이루어지지 않는다 pre white-space: ..

'localhost:9000' 출처로부터 발생한 'locahost:8080/graph' 를 향한 fetch 접근은 CORS 정책에 의해 차단되었습니다: Preflight 요청에 대한 응답이 접근 제어 체크를 통과하지 못하였습니다: 'Access-Control-Allow-Origin' 헤더가 요청한 리소스에 존재하지 않습니다. 불투명한 응답이 필요한 경우, 요청 모드를 no-cors로 설정하여 CORS가 비활성화된 리소스를 fetch하세요. 많은 프로젝트들을 좌절케 하는 그 녀석이다 나도 프론트엔드 처음 공부할 때 이 녀석 때문에 프로젝트 하나가 터진 적이 있었다 (크흠,,,) 그 때의 과오를 잊지 않기 위해 정리하기… 사전 지식 도메인, 스킴, 포트 CORS를 보기 전에 도메인, 스킴, 포트가 무엇인지 ..

헐 https://stackoverflow.com/questions/72148525/tailwindcss-3-classes-doesnt-override-previous-classes 위와 같은 경우에 px-0과 px-3은 같은 priority를 갖기 때문에 px-3이 px-0을 덮어씌우지 않는다 당연히 클래스명은 오른쪽에 있는 것이 왼쪽에 있는 것을 덮어씌우는 줄 알았는데! 전혀 아니었다 디자인 시스템에서 테일윈드를 쓰면서 클래스명을 덮어씌워야 하는 경우가 종종 생기는데, 당연히 우측에 배치된 클래스명이 좌측의 클래스명을 덮어씌울 줄 알았지만 형제 관계의 클래스는 서로 우선순위가 동일하기 때문에 스타일시트 상의 순서에만 영향을 받는다고 한다 이것 때문에 팀원이랑 씨름을 했는데 위와 같은 사실을 알게 되고..