본문 바로가기

분류 전체보기46

[Next.js 14] 새 탭에서 링크 열기 [React] 태그에 target="_blank" 속성을 추가해준다. Google 도 마찬가지로 작성해주면 된다. Google rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다. 링크에 noopener noreferrer 사용하는 이유 얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓ joshua-dev-story.blogspot.com 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20.
[CSS] link / anchor 태그 비활성화 [Tailwind CSS] 일단 영상부터 보고 시작하자. 보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데, 숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다. 바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다. 태그 / 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도, 위치를 예상해서 드래그 해보면 해당 현상이 발생했다. 간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다. .header-container.hamburger .nav-container > a { @apply opacity-0; .. 웹 개발/소소한 팁, 버그 해결2024. 3. 20.
[CSS] 아이콘 / 텍스트에 그라데이션(Gradient) 추가 [Tailwind CSS] 결론만 간단히. .gradient-text-and-icon { background: linear-gradient(91deg, #E05438 25.06%, #F41C33 62.44%, #D21FD6 94.29%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 웹 개발/소소한 팁, 버그 해결2024. 3. 20.
[CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS] 완전 초 간단한 회전 애니메이션 .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 위에서 설명한 아이콘 회전 + 크기.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20.
[CSS] icon 회전하기 / <i> 태그 회전하기 [Tailwind CSS] 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 등의 (내부에서 태그로 렌더링 되는) 아이콘.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20.
[Typescript] TypeError: Webpack imported module is not a function 해결 서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20.

티스토리툴바