전체 글(90)
-
[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해
VSCode는 Microsoft에서 개발한 가벼우면서 강력한 오픈 소스 코드 편집기로, 다양한 플랫폼에서 널리 사용되고 있습니다. 이 글에서는 VSCode의 핵심 기능 중 하나인 단축키 설정하는 방법에 대해 다뤄보려고 합니다. 사용자 정의 단축키 설정하기 단축키는 작업을 빠르게 수행하고 생산성을 향상하는 데 중요한 역할을 합니다. 키보드 조작을 통해 마우스로 수행하는 작업보다 훨씬 효율적이며, VSCode에서는 다양한 기능에 대한 단축키를 제공하여 개발자의 작업 효율을 높일 수 있습니다. 사용자가 정의하는 단축키 설정 방법에 대해서 알아보겠습니다. 설정 > 바로 가기 키 왼쪽 하단에 설정 아이콘 > 바로 가기 키 클릭하세요. 키 바인딩 리스트 창이 띄어집니다. 각 키 또는 키 조합에 할당된 작업 또는 명..
2024.03.30 -
[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