2024/11 22

아이콘(svg 이미지)을 클릭해서 다른 링크로 이동하는 방법

요즘 콘서트나 뮤지컬 티켓을 예매하는'티켓링크' 라는 사이트의 클론코딩을하는 중이다. 어려운 부분은 남겨놓고할 수 있는 부분만 하는 중인데생각보다 쉽게 끝낼거라고 생각했던 부분이생각보다 시간이 좀 걸렸다...... 블로그, 유튜브, 페이스북, 인스타, X(구 트위터)아이콘 뒤에 회색 원을 위치했고아이콘을 클릭했을 때,내가 입력한 링크로 이동을 시키려고 했다. 아무리 생각해도 어떻게 넣어야할지 모르겠어서튜터님을 찾아뵀다. 폰트어썸은 div, p, span 처럼 FontAwesomeIcon icon={faMessage} size="xl" />태그명으로 되어있는게 아닌FontAwesomeIcon이라고 되어있어서(내가 사용하려고 했던)Link태그를 사용할 수 없었고 대신a태그를 사용할 수 밖에 없었다. 근데a태..

리액트에 폰트어썸(아이콘) 적용하는 방법

클릭하면 상단에 자동으로 올라가는버튼을 만들고 있었다. 그냥 '올라가기'나 '↑' 이렇게 입력하고font-weight: bold; 로 할까..?? 싶었는데그러면 너무 맛없는 화면이 될 것 같아서폰트어썸에서 제공하는 아이콘을 사용하기로 했다. html은 폰트어썸 링크를 호출해 줬는데React는 어떻게 해주면 될까 하고 검색해보았다.많이 달랐다. 이 블로그 저 블로그 들어가보고이것도 설치해보고 저것도 설치해보고 했었는데안 돼서 정리해본다.얼마나 삽질을 했으면 이 시간에 와카타임이 10시간정도가 나온다 ㅋㅋㅋㅋㅋㅋ 그래도 알아가는게 있어서 행복하다 : )   1. svg 기반 아이콘을 사용할 수 있게 해주는 패키지 설치터미널에 yarn add @fortawesome/fontawesome-svg-core 입력 ..