전체 글(90)
-
[Safari] 사파리 브라우저에서 모바일 모드로 보려면?
사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응형 웹 디자인은 모바일 기기 및 데스크톱 환경에서 웹사이트가 어떻게 표시되는지를 확인하는 데 중요합니다. 이를 위해 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아봅시다. 메뉴 막대에서 개발자용 메뉴 보기 체크하기 우선 사파리 브라우저를 엽니다. 또 선행으로 Safari 설정 > 고급 > ✅ 메뉴 막대에서 개발자용 메뉴 보기가 체크가 되어 있어야 개발자용 메뉴를 사용하실 수 있습니다. 자세한 설정 방법이 보고 싶으시다면 아래의 링크를 참고해 주세요. 초보자를 위한 Safari 브라우..
2024.03.17 -
[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법
많은 사람들은 전문적인 디자이너가 아니라면 디자인 작업을 시작하는 것이 어렵다고 생각합니다. 이는 복잡한 디자인 프로그램의 사용에 대한 부담 때문일 수 있습니다. 그러나 제가 소개드리는 Canva는 이러한 고충을 해소할 수 있습니다. Canva에서 제공하는 다양한 템플릿을 활용하여 누구나 디자인에 대한 전문성이 없어도 손쉽게 훌륭한 결과물을 만들 수 있습니다. Canva 기본 사용법에 대해서 알아봅시다. Canva로 디자인 만들기 캔바 홈페이지로 이동하려면 아래의 링크를 클릭하세요! https://www.canva.com/ Canva 사이트에서 회원가입을 하시고 서비스를 이용해 보세요. 로그인 후, 우측 상단에 디자인 만들기 버튼을 클릭하세요. 다양한 템플릿 중 예시로 Instagram 스토리를 클릭했..
2024.03.16 -
[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!
글 초안 작성 플랫폼 뤼튼을 소개하겠습니다. 가장 큰 특징은 한국어에 최적화된 글쓰기 버티컬(vertical) AI 서비스를 제공합니다. 한국어로 글쓰기에서 가장 앞선 서비스가 아닐까 생각합니다. 글쓰기 초안 작성으로 인공지능 중 활용도가 굉장히 높은 뤼튼에 대해서 알아보도록 합시다. 뤼튼의 소개 뤼튼은 오픈AI의 GPT3.5와 GPT4, 네이버 하이퍼클로바, 스테이블 AI의 스테이블 디퓨전 등 다양한 LLM 모델을 활용하고 있습니다. 그중 한국어 데이터를 더 많이 학습한 네이버 하이퍼클로바를 가장 많이 반영하고 있어 한국어를 잘한다고 합니다. 본인에게 최적화된 AI를 선택하여 사용해 보세요. - gpt 3.5 : gpt 4.0에 비해 비교적 빠른 명령어 처리 속도를 제공 - gpt 4.0 : gpt 3..
2024.03.15 -
[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법
빙챗(Bing Chat)은 사용자의 검색 경험을 향상하기 위해 AI 기반으로 마이크로소프트에서 개발한 채팅 기능입니다. 빙챗은 이제 마이크로소프트 코파일럿(Copilot)으로 브랜드명이 변경되었습니다. 코파일럿을 설치하고 간단한 사용법에 대해서 알아보겠습니다. 코파일럿 설치 방법 코파일럿은 마이크로소프트 엣지 브라우저에 내장되어 있으므로, 엣지 브라우저가 선행으로 설치가 되어 있어야 합니다. 아래의 링크는 마이크로소프트 엣지 브라우저 다운로드 하러 가기입니다. >> https://www.microsoft.com/ko-kr/edge/download?form=MA13FJ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 엣지(Edge) 브라우저를 다운로드해서 실행하세요 ..
2024.03.15 -
[CSS] 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기
텍스트 말줄임 효과는 긴 텍스트를 제한된 공간에 맞추어 보기 좋게 표시하는 디자인 기법으로, 레이아웃을 깔끔하게 유지하고 사용자 경험을 향상합니다. 디바이스의 화면 크기에 따라 텍스트를 자동으로 조절하여 다양한 화면 크기에 대응합니다. CSS로 텍스트 말줄임 효과를 어떻게 반영하는지 알아보겠습니다. 한 줄 텍스트 말줄임 .textBox { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; } 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 두줄 이상 텍스트 말줄임 다중 행 텍스트 말줄임은 -webkit-line-clamp 속성에 원하는 줄 수의 값을 부여하면 됩니다. .tex..
2024.03.13 -
[HTML] ios/Safari 에서의 SVG 랜더링 이슈: 해결책 탐색
SVG는 웹 디자인과 개발에서 매우 유용한 포맷으로, 화면 해상도와 크기 조절에 유연하고 고품질의 이미지를 제공합니다. 그러나 때로는 SVG가 다양한 환경에서 제대로 랜더링 되지 않을 수 있습니다. 특히 iOS Safari와 같은 플랫폼에서는 SVG 렌더링 문제가 발생할 가능성이 높습니다. 이 문제를 해결한 방법에 대해서 공유드리겠습니다. SVG 렌더링 문제를 해결하기 위해 추가적으로 체크해 볼 수 있는 몇 가지 방법 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. SVG의 width, height, viewBox 들의 값 확인해보기 이들 값이 일치하지 않으면 SVG가 원하는 대로 화면에 표시되지 않을 수 있습니다. XML 네임스페이스 (XMLNS) 선언 확인해 ..
2024.03.12