전체 글(107)
-
[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 -
[HTML] 를 활용하여 반응형 디자인에서 글자 떨어짐 조절하기
텍스트 요소 사이의 간격을 조절하고, 반응형 디자인에서 글자 간의 간격을 조절하는 데에는 여러 가지 방법이 있습니다. 그 중 하나가 입니다. HTML 엔터티(entity)는 텍스트의 레이아웃을 세밀하게 제어하는 데에 유용하며, 특히 텍스트 간의 간격을 조절하는 데에 사용됩니다. 의 활용 방법에 대해 알아보겠습니다. 란? 는 HTML에서 사용되는 특수 문자로서, non-breaking space의 약어입니다. HTML에서 일반적인 공백 문자와는 달리, 줄 바꿈이 되지 않고 항상 공백으로 유지됩니다. 텍스트 레이아웃 및 요소 간의 간격 조절을 위해 사용됩니다. 활용 방법 를 활용하는 방법에 대해서 2가지 소개해드리겠습니다. 텍스트 사이의 강제 공백 생성 HTML에서 일반적인 공백 문자(스페이스 또는 탭)는 ..
2024.03.11