콛 다이어리

어제, 폰트어썸에 있는 아이콘을 사용했다. 클릭했을 때 자동으로 맨 위로 올라가는버튼을 만들기 위해서 사용했다. 폰트어썸 이미지를 import할 때 svg라는 알파벳?이 있는데 그냥 알파벳이구나~ 하고 넘겼다. 오늘은 div태그에 border: 3px solid red;를 적용하고그 div태그 사이에 아이콘을 넣었고아이콘 뒤에는 회색 원형 div가 있었다. 그러면 당연히 빨간색 직사각형 안에 아이콘이위치해야 한다고 생각하는데 빨간색 짧은 선 우측에버튼이 위치해 있었다......;; 그 때 튜터님께서"왜지? svg 이미지라 그런가??" 라고 하셨다. 버튼이 저렇게 위치했던 이유는버튼을 div로 감싸주지 않아서 였다.(버튼이 div없이 혼자 있으면top, right, right, bottom이런 값을 아무리..

요즘 콘서트나 뮤지컬 티켓을 예매하는'티켓링크' 라는 사이트의 클론코딩을하는 중이다. 어려운 부분은 남겨놓고할 수 있는 부분만 하는 중인데생각보다 쉽게 끝낼거라고 생각했던 부분이생각보다 시간이 좀 걸렸다...... 블로그, 유튜브, 페이스북, 인스타, 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 입력 ..