분류 전체보기(107)
-
[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)
웹퍼블리셔로서 웹사이트나 앱의 사용자 경험을 향상하기 위해 디자이너와 협력하여 다양한 디자인 요소를 구현합니다. 이미지는 이러한 디자인 요소 중 하나로, 올바른 형식과 해상도로 이미지를 추출하는 것은 웹사이트나 앱의 성능과 사용자 경험에 직접적으로 영향을 미칩니다. 이번 포스팅 글에서는 이미지 추출의 기준과 피그마를 활용한 이미지 추출 방법에 대해 알아보겠습니다. 이미지 추출의 기준? PNG - 이미지를 여러 번 저장하거나 압축해도 품질이 손상되지 않습니다. - 예를 들어 로고(Logo)나 아이콘(Icon)같이 투명한 배경이 필요한 경우 사용됩니다. JPG - 압축률을 조정하여 파일 크기를 줄일 수 있습니다. 따라서 이미지 파일 크기를 최소화해야 할 때 유용합니다. - 사진이나 복합적인 이미지를 저..
2024.03.29 -
[CSS] 플렉스 박스(Flexbox)와 아이템 속성 살펴보기
플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아웃을 제공할 수 있습니다. 이번 글에서는 플렉스 컨테이너와 아이템을 제어하는 주요 속성에 대해 살펴보겠습니다. Flex Container display:flex;로 설정하면 해당 요소가 플렉스 컨테이너로 작동합니다. 이는 그 안에 있는 아이템들을 플렉스 아이템으로 만듭니다. 플렉스 아이템들의 배치 및 정렬을 제어하는 각 속성들에 대해 간단히 알아보겠습니다. flex-direction 플렉스 아이템의 배치 방향을 결정합니다. 주요 값으로는 row(가로 방향), row-reverse(가로, 반대 방향), column..
2024.03.27 -
[CSS] Flexbox 크기 제어 전략 : flex-basis, flex-grow, flex-shrink, width, max-width, min-width
Flexbox는 웹 개발자들이 레이아웃을 구성하는 데 매우 유용한 도구 중 하나입니다. 그러나 Flexbox를 처음 사용하는 사람들에게는 각 속성들의 역할과 상호작용이 혼란스러울 수 있습니다. 특히, 크기를 제어하는 데 사용되는 속성들인 flex-basis, flex-grow, flex-shrink, width, max-width, min-width의 차이점에 대해 이해하는 것은 중요합니다. 이러한 속성들을 올바르게 이해하는 시간을 가져보겠습니다. flex-basis 플렉스(flex) 아이템(item)이 플렉스 컨테이너(container) 내에서 차지할 초기 크기를 지정합니다. 기본값은 auto이며, 해당 아이템의 너비(width)를 해당 아이템의 내용 또는 고정된 너비에 따라 결정합니다. width ..
2024.03.26 -
[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기
Photopea의 Content-Aware 기능은 작은 결함들을 보정하는 데 있어 손쉽게 도와주는 기능입니다. 이 기능을 통해 작업의 결과물을 보다 완성도 있게 만들 수 있는데요~ 이 기능에 대해서 알아봅시다. 앞서 포스팅된 글에서는 Photopea의 주요 기능을 간략히 살펴보았습니다. 자세한 내용이 궁금하시다면 아래의 링크를 확인해 주세요! [Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아) 포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우 dev-chim.tistory.com Content-A..
2024.03.25 -
[Git] 2가지 방법으로 변경사항 가져오기 (feat. git checkout, git cherry-pick)
코드를 관리하는 과정에서 이전 상태로 돌아가야 할 때나 다른 브랜치에서의 변경 사항을 현재 브랜치로 가져와야 할 때가 있습니다. 이럴 때 사용하는 주요 명령어에 대해서 살펴보겠습니다. git checkout으로 파일 가져오기 이전 커밋 상태로 되돌리는 명령어입니다. --를 사용하여 git에게 파일 이름으로 해석하라고 명시적으로 알려줍니다. git checkout HEAD~1 -- [경로/파일명] git checkout 명령어를 사용하여 파일을 이전 커밋의 상태로 가져오면, 해당 파일의 현재 상태는 이전 커밋의 상태로 완전히 교체됩니다. 그러므로 충돌이 발생하지 않습니다. 주의할 점은 현재 작업 디렉토리에 변경 사항이 있는 경우, 해당 파일을 checkout 하기 전에 변경 사항을 stash에 잠시 보..
2024.03.24 -
[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!
클로바노트는 음성인식, 자연어 처리 등의 AI 기술을 활용한 회의록 관리 서비스입니다. 이 서비스는 긴 문장과 비정형화된 대화를 인식하는 데 특화된 음성인식 엔진을 사용하며 참석자의 목소리 차이를 구분할 수 있습니다. 최근에는 회의록 요약, 노트 공유, 하이라이트 표시, 메모 등의 기능이 추가되어 사용자 경험을 한층 업그레이드했습니다. 이에 대해 알아봅시다. 클로바 노트 설치 방법 클로바 노트 홈페이지에 접속하시고, 상단 메뉴에서 앱 다운로드 > 운영 체제 앱 스토어 > 설치하세요. 네이버 로그인을 하시고 서비스를 이용하시면 됩니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 클로바노트 음성 그 이상의 기록 clovanote.naver.com 사용 전 알아두..
2024.03.24