MBTI 테스트 프로젝트 (19) 썸네일형 리스트형 [MBTI 테스트(19)] 카카오톡 공유이미지가 안바뀐다... (=> 해결 git hub 로 작업 시 상위경로표시를 할 필요가 없다!!) 분명 미리보기 이미지를 삭제하고 새로운 이미지를 등록해줬는데도... 공유하면 계속 이전 이미지가 뜬다. 결국 바꾸기 전으로 돌렸는데 index.html 부분이 겹쳐서 에러가 발생한다.. 결국에는 바꾸기 전 commit부분을 다운받아서 다시 git에 연결해주도록 한다. 별의별 짓을 다 했는데 결론은 상위경로를 표시했기 때문에 ... 이게 무슨말이냐면 나는 그동안 이 파일을 여러번 받으면서 컴퓨터 상에 image-1 부터 11까지 여러개의 파일이 생성된 상태였는데, 판다코딩 유튜브에 나온 대로 그대로 따라하니 img 파일을 변수로 지정해줄 때 ../img/image 이런식으로 표현했었다. 위에서처럼 말이다. 근데 중요한점은, 판다코딩 유튜브에서는 '로컬'에서 작업한 뒤 해당 내용을 netlify에 수정될때마.. [MBTI 테스트(18)] 구글폰트 > 귀여운 도트폰트로 바꿔주기. https://wooncloud.tistory.com/m/53 [폰트] 한글 픽셀폰트, 도트폰트 Neo둥근모 폰트 소개 옛날에 DOS창이나 픽셀 게임을 하다 보면 저화질의 폰트를 가끔 본 적이 있습니다. Neo둥근모 폰트는 이런 레트로 한 느낌을 주는 폰트입니다. 이런 느낌의 폰트입니다. 둥근모 폰트는 레트 wooncloud.com 이 폰트를 돈받고 파는게 아니라면 상업적사용도 상관없다고 한다. 구글폰트도 상업적사용이 가능한 폰트가 대부분이지만 악명높은(?) 디자인회사가 보여서 패스.. html 파일의 head 부분에 위 코드를 복사붙여넣기 해주고.. 아래 코드는 css 파일에 붙여넣어준다. *{ font-family: 'NeoDunggeunmo Pro'; } 최신 업데이트된 버전을 사용하기 위해서는 위.. [MBTI 테스트 (17)] 로컬에서 github 불러온이후 netlify에서 변화가 인식되지 않을때 > unlink 하고 다시 link 해주면 됨 말 그대로... github에 저장했던 내용을 로컬로 불러왔는데, netlify에서 github의 어떤 내용도 적용이 되지 않을 때... 그냥 unlink 해서 링크 끊고 다시 연결해주면 된다 =_=;; 위화면이랑 똑같이 들어가서 가장 아래있는 분홍색 unlink로 링크 끊어주고 다시 연결해주면 된다. 참쉽죠? *(겁나헤매다가 찾은 방법...) [MBTI 테스트(16)] 페이지에 광고 넣어주기 https://youtu.be/hiflpXzcuEs 위 영상을 보고 따라해본다. 카카오 애드핏에 가입하고 생성하는 단계는 영상을 보고 빠르게 따라해본다. 생성하고 나면 다음과 같은 코드가 뜬다. 나의 index.html 파일에 광고를 넣어줄 위치에 위 코드를 삽입해준다. 잘 출력되는 것을 확인할 수 있다! 근데 위치가 왼쪽에 치우쳐져있어 정렬해줄 필요가 있다. 근데 일단 이게 급한게 아니라.. 나중에 수정하면 추가하겠다 ㅎㅎ [MBTI 테스트(15)] git hub와 netlify 연동하기 + 수정 후 적용하기 + 새 브랜치 만들어 별도로 저장해보기 git에서 수정하면 netlify에 잘 적용되는지 테스트 우선 git과 netlify를 연동시키고 이게 잘 작동되는지 체크해본다. 위에서보면 시작하기와 나만의 mbti테스트 두 문장을 바꾸고싶다. 위와 같이 입력하고, 터미널에서 저장해준다. 참고로 replit에서는 저장하지 않아도 자동저장이되었지만, 로컬에서 작업 시 (VS Code 사용 중) 항상 저장을 해야 변경사항이 적용된다. (당연함) 그래서 첫 번째 커밋을 저장할 때는 변경사항이 없다고 떴지만 저장 후에 커밋을 저장하니 변화가 있는 내용을 출력해준다. 이후 git push 로 변경사항을 적용해보도록 한다. 약간의 시간(1분 미만)이 지나고나면 변경사항이 잘 적용된 것을 확인할 수 있다. 새로운 브런치를 만들어서 변경사항을 저장해보는 것은 아래 .. [MBTI 테스트(14)] Kakao is not defined 문제 해결하기 (카카오톡 공유하기 api 어떻게 쓰는건지 참=_=?) 카카오 developers에 있는 질문 게시판에서도 내가 원하는 방법을 못찾다가, https://developers.kakao.com/tool/demo/message/kakaolink?method=send Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 여기 나온 코드를 따라해보기로 한다. 기능 미리보기 및 테스트에서는 잘 실행된다. 근데 분명 잘 입력했는데 자꾸 에러가뜬다. 도메인도 등록 했는데 =_=... https://www.youtube.com/watch?v=BpAe8d-CXKk 그러다가 발견한 이 영상!!! 따라하니까 진짜 바로뜬다. 내.. [MBTI 테스트(13)] 카카오 API 활용해서 카카오톡으로 공유하기 버튼 만들기 (기록용이며, 이거 따라해도 카카오 공유하기를 하실 수 없습니다) 아마 2년 전 영상이라 바뀐점이 많은 듯 합니다............ https://justforfundoit.tistory.com/61 Kakao is not defined 문제 해결하기 (카카오톡 공유하기 api 어떻게 쓰는건지 참=_=?) 카카오 developers에 있는 질문 게시판에서도 내가 원하는 방법을 못찾다가, https://developers.kakao.com/tool/demo/message/kakaolink?method=send Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해 justforfundoit.tistory.com 여기서 비스무리한 것을 찾았습니다. 차라리 위 포스팅의 첨부영상.. [MBTI 테스트(12)] Meta 태그 수정하기 + netlify로 배포하기 + netlify와 깃허브github 연동하기 https://youtu.be/6UDfoVOt8oI 영상에 나온 것처럼 일부 메타태그를 작성하고, 카카오톡 등에 공유되었을 때 보여지는 부분을 작성해본다. url은 없으므로 content 를 공란으로 두고 나머지는 위와같이 작성해준다. 파비콘(favicon) 티스토리 왼쪽에 로고가 있는 것처럼 저 아이콘도 만들어줄 수 있다. 아래사이트에서 무료 아이콘을 받을 수 있다. https://icon-icons.com/ Free Icons PNG, ICO, ICNS and SVG icon-icons.com 상업적인 사용이 가능한지 꼭 확인한다. ico 파일로 받아서 image 폴더에 넣어준다. 세번째 줄은 애플기기를 위해 추가해준다. netify에서 공유하기 영상을 보고 따라한다. 그런데, 파일이 수정될 때마다 .. 이전 1 2 3 다음
