solar_system_11 solar_system_11

변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~

태그에 target="_blank" 속성을 추가해준다. Google 도 마찬가지로 작성해주면 된다. Google rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다. 링크에 noopener noreferrer 사용하는 이유 얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓ joshua-dev-story.blogspot.com 끗~

일단 영상부터 보고 시작하자. 보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데, 숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다. 바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다. 태그 / 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도, 위치를 예상해서 드래그 해보면 해당 현상이 발생했다. 간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다. .header-container.hamburger .nav-container > a { @apply opacity-0; ..

완전 초 간단한 회전 애니메이션 .spin-object { animation: spin 5000ms infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } [CSS] icon 회전하기 / 태그 회전하기 CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-tran hotsunchip.tistory.com 위에서 설명한 아이콘 회전 + 크기..

CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; } 그리고 태그에 클래스를 추가해주면 아이콘이 45도 돌아간 것을 확인할 수 있다. 꼭 태그가 아니더라도, react icon, fontawesome, mui icon, remix icon 등의 (내부에서 태그로 렌더링 되는) 아이콘..

웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from ..

포스팅을 너무 각 잡고 쓰려니까 오히려 안 쓰게 돼서, 아예 간단하게 작성하는 버그 해결 / 궁금한 점 해소 용 카테고리를 하나 팠다. 암튼 이 편한 카테고리의 첫 포스팅은 Swiper, 너로 정했다! 쓰고 보니 본 카테고리로 올려도 될 것 같아 격상시켰다. 렛츠고. 구현해야 하는 UI 사용자가 등록한 카드를 아래의 형태로 보여주고, 슬라이드 / 화살표 버튼을 이용하여 변경하는 UI를 작성하고자 한다. 이런 형태를 보통 Carousel Slider라고 하는데, 위의 키워드랑 Card list 등등의 키워드로 찾아본 라이브러리 중에서는 확장하기 편함 + 쓰기 쉬운 놈을 못 찾았다. React Swiper 처음부터 내 입맛대로 만드는 게 마음 편하긴 하지만, 내가 개발할 수 있는 시간은 한정되어 있어서 아래..

프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 ..