본문 바로가기

분류 전체보기162

Ios safari input focus zoom-in 현상 막기 안녕하세요. 제니입니다!사실 해당 기록은, 미리부터 참고했어야 하는데 제가 어느정도 간과한 게 있었던 것 같아요.Ios는 늘 번거로운 css 수정기가 있는데 그 중 가장 귀찮은게 zoom-in 현상이었는데요..!이번에 맡은 프로젝트는 프론트 1인이었기도 하고나름 선배가 돼서 책임감도 있어가지구 조금은 더 세밀하게 보고 있었,,답니다..!    그러다 safari 테스트를 하는데, 로그인 페이지 input이 zoom-in이 되어서 굉장히 별로더라구요.역시 이 걸 체크해야지 하는게 좀 있었고다른 개발자들은 어떻게 하나 찾아보면서 여러가지 잘 정리된 개발자들의 글을 볼 수 있었는데   https://devsoyoung.github.io/posts/ios-input-focus-zoom/ focus 시 자동 zo.. 2024. 6. 7.
svg data url 형식 변환 base64 인코딩 적용법(cf. 이미지 경로 오류) 안녕하세요. 제니입니다!오늘은 svg를 data url 형식으로 변환했던 기록을 남기려고 하는데요.html에 적용을 해야하는 페이지가 있어서, img 태그에 적용을 해야 하는데이미지 경로를 어떻게 해야할지 고민되는 분들께서 참고하시면 좋을 것 같아요!   1. encoder for SVG먼저, url로 바꾸는 작업부터 진행하게 될 텐데, 이걸 가능하게 해주는 좋은 사이트가 있습니다!   https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io   무료 사이트구요!      해당 사이트에 가지고 계신 svg 파일을 끌어서 업로드 해주면      Ready for CSS에 data 형식으로 변환이 되는 것을 확인하실 수 있어요.  .. 2024. 5. 24.
[Node.js] express.js 시작, get 요청 - 1일차 안녕하세요. 제니입니다! React를 정말 사랑하는 프론트엔드 개발자인데, 여러모로 성장을 하는 방향을 고민하다 상사분께서 좋은 스터디 모임을 만들어주셔서 Node.js 스터디에 참여하게 되었어요! 이번 기록은 까먹지 않기 위한 저만의 기록이라서 혹시 같이 공부하실 분이 계시다면 참고해주셔도 될 것 같아요! 아주 심플한 과제를 주셨는데, express.js를 시작하는 것부터 막혔던 ^_^ 저는 https://velog.io/@kimhyo_0218/Node.js-express.js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [Node.js] express.js 시작하기 express.js는 node.js를 빠르고 쉽게 이용할 수 있게 해주는 프레임워크 입니다.설치 후 package... 2024. 4. 11.
[코드 블럭] highlight 라이브러리 사용해서 code block 적용하기 (React, Typescript) 안녕하세요, 제니입니다! 오늘은 코드블럭을 구현하는 법에 대해 정리하려고 합니다. 요즘에 프로젝트에 1인 프론트엔드 개발자로 투입되어 있어서 (벌써 2번째,,,) 여러모로 해야하는 기능과 UI가 많아져서 좋네용,,,,,! 코드블럭 구현을 위해 오늘은 highlight라는 라이브러리를 사용하려고 합니다. 제 개발 환경은 React, TypeScript, yarn 입니다! 1. highlight 설치 https://highlightjs.org/ yarn add highlight.js 위 링크를 통해 공식문서도 확인하실 수 있습니다. 1-1. import import hljs from 'highlight.js'; import 'highlight.js/styles/a11y-dark.css'; css 파일도 동시.. 2024. 4. 4.
[React] TOAST UI Editor 셋팅 + 커스텀 하는 법 안녕하세요. 제니입니다! 오늘은 Editor를 구현하게 되어서 해당 기록을 남겨보려고 합니다! NHN 사의 TOAST-UI 라이브러리를 사용했고 프로젝트 환경은 React, TypeScript, yarn 입니다 1. TOAST-UI 설치 yarn add @toast-ui/react-editor 1-1. TOAST-UI 셋팅 import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/toastui-editor.css'; 먼저 import를 해주세요. 코드의 전체 모습은 위와 같습니다. import React from 'react'; import { Editor } from '@toast-ui/react-editor'; import '.. 2024. 3. 27.
[CSS] 글자 말 줄임 처리(feat. 반응형) 안녕하세요. 제니입니다! 오늘은 자주 쓰는 글자 말 줄임 처리에 대해 정리해보려고 합니다. 기존에 많이 사용하고 있긴 했는데, 다시 사용할 때마다 구글링을 해서 적용을 했었는데요. 대부분의 구글링에서 적용하는 방법을 하게 되면 width를 고정해서 정리해두었거나 또는 max-width로 해두었지만 반응형이 고려되지 않는 경우더라구요. 그렇게 되면, 처음에는 문제가 없지만 추후 화면이 줄어들었을 때 줄어들지 않는 문제가 생길 수 있습니다! 1. 코드를 비교해보기 1-1. 구글링했을 때 많이 나오는 코드 방식 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vert.. 2024. 3. 26.

티스토리툴바