HTML4 [React] 새 창 HTML 미리보기, HTML 데이터를 로드하고 창이 닫힐 때 데이터를 제거하는 로직 구현하기 안녕하세요. 제니입니다!오늘은 새 창 html 미리보기 구현을 한 내용을 정리해보려고 하는데요.쉽게 생각해서, 제목, 내용을 입력하고 이메일을 보내는 양식이 있다고 가정할 때,이런 경우 프론트에서 발송하는게 아니라 서버측에서 발송을 하게 됩니다.백엔드 개발자가 html 양식을 가지고 있을거고그 양식을 받아 미리보기로 보여주는 화면을 만들어야 하는 상황이 발생되어서 정리하게 되었습니다. 원하는 결과는새 창에서 HTML 데이터를 로드하고 창이 닫힐 때, 데이터를 제거하는 로직을 구현하는 것이었습니다! 1. response 는 html을 string 형태로 반환api를 반환하는 걸 html 파일로 받게 되면 다운로드가 되므로,백에서 response 값을 html 그대로 넘겨주면 됩니다. 2. get.. 2024. 6. 14. 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. [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. 이전 1 다음
