728x90
반응형
- 티스토리 코드 블록에 yaml 적용 방법2024-04-08 12:59:27티스토리(tistory) 블로그에서도 다양한 코드 블록을 제공하지만 간혹 yaml과 같이 제공되지 않는 형식이 있어 답답하여 검색해 봤고 highlight.js를 알게 되었다. 추가 설치 등과 같은 번거로운 작업이 필요 없고 글 작성할 때 HTML 모드로 변경한 후 pre 태그를 조금 수정하면 된다. 아래 코드는 yaml 형식을 지정한 경우이다. data-ke-language 속성에 highlight.js를 입력하고 class 속성에 yaml을 입력하면 된다. highlight.js를 이용해 티스토리에서 제공하지 않는 다양한 포맷들을 적용할 수 있다. 😉 highlight.js 깃허브 참고 : https://github.com/highlightjs/highlight.js/blob/main/SUPPORTE..
- 구글 스프레드시트를 이용한 백엔드 서버 없이 작동하는 홈페이지의 문의하기(Contact Us) 폼 메시지 보내기 기능2023-10-18 18:08:25일반적으로 회사 홈페이지의 경우 문의하기 폼을 제공한다. 이 기능을 구현하기 위해서는 별도의 백엔드 서버와 DB가 필요한데 구글 스프레드시트를 이용하면 간편하게 구현할 수 있었다. 원리는 간단하다. 작성된 정보를 받을 구글 스프레드시트를 준비하고 홈페이지 HTML 소스 form 태그의 class 속성에 "gform"을 추가하고 action 속성에 구글 스프레드시트에서 제공받은 URL을 추가하면된다. 이렇게 하면 form에서 사용자가 메시지를 작성 후 submit하게되면 구글 스프레드시트에서 사용자가 작성 내용을 확인할 수 있다. 참고 자료 https://velog.io/@qhflrnfl4324/Contact-Me-%EB%A9%94%EC%84%B8%EC%A7%80-%EB%B3%B4%EB%82%B4%EA%B..
- 크롬 개발자 도구 활용 팁2023-10-14 15:18:30인프런의 "아는 만큼 보이는 크롬 개발자 도구(제주코딩베이스캠프)" 강의 내용을 정리한 것이다. Ctrl + Shift + C : 요소 선택 활성/비활성 (개발자 도구 활성화 상태) Ctrl + Shift + d : 개발자 도구 창 분리/병합 (개발자 도구 활성화 상태) Ctrl + Shift + p : 실행 > (명령어 입력) 눈금자 요소 탭 (태그 선택) h : 요소 숨기기/보이기 (태그 선택) 마우스 우클릭 > HTML로 수정 > 코드 선택/복사 Ctrl + f : 문자열 검색 스타일 탭 우선 순위로 인해 활성되지 않은 스타일, 주석 처리된 스타일도 모두 볼 수 있다. element.style에 스타일을 작성하면 선택된 태그에 인라인 스타일을 지정할 수 있다. 색상 선택 도구 색상값 얻기 : 스타일..
- 유데미(Udemy) 한글 자막 생성2023-10-12 09:54:231. 유데미 한글 자막이 제공되지 않는 경우 유데미에서 WEB AR 관련 코스를 학습 중인데 영문 자막이라 불편함이 있었다. 구글링의 통해-완벽한 번역은 아니지만-유용한 한글 자막 생성 팁을 얻게 되어 기록한다. 2. 유데미 한글 자막 생성 방법 대본 활성화 > 대본 마우스 우클릭 > 한국어로 번역 자막 > 자막 설정 > 동영상 아래 표시(토글 on) 크롬 개발자 도구 > 콘솔에 아래 코드 입력 if (typeof window.i === "undefined") { clearInterval(window.i); } else { let lastText = ""; function check() { let toEl = document.querySelector(".well--container--1cXrh span"..
- 유용한 단축키2022-11-09 11:50:43크롬 브라우저 ctrl + shift + C : 페이지 안에서 element를 찾을 수 있는 단축키
- [꿀팁] 애플리케이션 버전 표기법2022-08-17 17:23:26회사마다 정책이 다를 수 있지만, 보통 오른쪽 끝자리는 작은 변화를 의미합니다. 1.0.1, 1.0.2와 같이 작은 변화가 있을 때마다 숫자 하나를 올려줍니다. 중간 숫자는 하위 버전과 호완이 가능하지만 큰 변화를 의미합니다. 그리고 왼쪽 끝자리는 하위 버전과 호환이 가능하지 않은 큰 변화를 의미합니다. 출처: 최원영. (2020). 비전공자를 위한 이해할 수 있는 IT 지식. 티더블유아이지
- [개발일기] 이런 발칙한 코드!2022-05-23 13:53:03모 테크 블로그의 게시글을 보고 있는데 내가 누르지도 않은-하트 모양-공감 버튼이 빨간색으로 변해 있었다. 공감 버튼을 클릭해서 빨간색을 없애고 새로 고침 해봤다. 그 직후 스크롤을 내려 공감 버튼을 관찰하였다. 아니나 다를까 몇 초 후 공감 버튼의 색이-자동으로-빨갛게 변했다. 소스보기로 코드를 살펴보니 setTimeout을 이용해 3초 후에 자동으로 공감 버튼을 클릭하는 코드가 존재했다. 그런 게 가능하다고? 이 게시글에 해당 코드를 붙여 놓았다. 눈을 크게 뜨고 스크롤을 내려 공감 버튼을 지켜보시라! 이런 발칙한 코드는 게시글을 평가하는-소중한-나의 권리를 빼앗아 버렸다. 웃고 넘어갈 문제라 치부할 수도 있겠지만 진지하게 바라보아야 할 일이다!
- [개발일기] 생애 첫 부트캠프의 끝에서2022-04-29 00:05:30부트캠프가 시작된 지 벌써 4개월이 흘렀고, 오늘이 마지막 날이었다. 시작할 때 기대한 오늘의 내 모습은 현재의 내 모습보다는 훨씬 거창했다. 그런 점에서 당시 내 메타인지가 딸렸던 게 분명하다. 비록 변화된 내 모습이 기대 이하이긴 하지만 그래도 후회는 없다. 아니 4개월 전 조인하지 않았다고 생각하면 끔찍할 정도다. 다른 건 몰라도 이 분야에 대한 "품새"는 확실히 익혔다! 정확한 품새를 알려주신 멘토께 감사하다!
728x90
반응형