👩💻/기타 (5) 썸네일형 리스트형 디자인 레퍼런스 참고 사이트 모음 디자인 레퍼런스는 단순 참고자료라기 보다 효율적인 디자인을 위한 필수 조건이라고 할 수 있습니다. 좋은 레퍼런스는 디자인 영감과 창의적인 아이디어를 떠오르게 하고, 시장의 최신 트렌드를 분석할 수 있으며 이미 검증된 UI/UX 패턴으로 시행착오를 줄이는 데에도 중요한 역할을 합니다. 클라이언트나 팀원과의 소통에서도 원하는 바를 명확하게 전달할 수 있어 효율적인 작업 진행을 가능하게 하지요. 저도 새로운 프로젝트를 시작할 때 좋은 레퍼런스를 찾는것에 공을 들이는데요. 이 때 주로 찾게되는 사이트를 공유하려고 합니다.핀터레스트가장 자주 찾는 사이트는 당연하게도(?) 핀터레스트입니다. 사용자가 많은 만큼 자료가 광범위하고, 꼭 UI를 참고하지 않더라도 여러 이미지를 접할 수 있어 무드보드나 색감에 대한 영감을.. 티스토리 게시물에 코드펜(Codepen) 적용하기 코드펜은 실시간으로 작성한 코드의 결과를 확인할 수 있고 쉽게 공유할 수 있어 편리한 온라인 코드에디터이다.가끔 티스토리에 작성한 코드에 대한 결과를 그때그때 보여주고 싶을 때가 있어서 찾아보다가 코드펜의 임베드 기능을 사용하여 티스토리에 올리는 방법을 알게되어 기록하려고한다. https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io코드펜의 사용법은 매우 간단했다. 일단 회원가입을 하고 좌측 상단의 메.. SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 2 이전글에서는 SVG 스프라이트의 개념과 수동 생성 방법을 알아보았는데요, 이번 글에서는 SVG 스프라이트를 자동으로 생성하는 방법들에 대해 적어볼까 합니다. 프로젝트의 환경에 따라, 프로젝트의 규모에 따라 알맞은 방식으로 자동생성하면 SVG 스프라이트 관리를 수월하게 할 수 있습니다.Webpack을 활용한 자동생성Webpack을 사용하는 프로젝트라면 플러그인을 설치하여 SVG 스프라이트를 자동생성 할 수 있습니다. 이 글에서는 svg-sprite-loader를 설치하여 스프라이트를 생성하겠습니다.npm install svg-sprite-loader --save-dev위 코드로 플러그인을 설치한 후, webpack.conpig.js 파일에 다음과 같이 아이콘 ID를 설정해 줍니다.module.exports.. SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 1 SVG 스프라이트가 뭐지?SVG 스프라이트는 여러개의 SVG아이콘을 하나의 파일로 결합하여 관리하는 기법을 말합니다. 하나의 파일 안에서 태그를 사용하여 각각의 개별 아이콘을 정의하고, 태그로 사용하게 됩니다. SVG 스프라이트를 사용하는 이유는 다음과 같습니다.성능 최적화 - 하나의 SVG파일만 로드하므로 네트워크 비용을 줄여 성능을 개선할 수 있습니다.일관된 스타일 - fill, stroke등의 스타일을 쉽게 제어할 수 있습니다.재사용성 증가 - 여러페이지에서 동일한 아이콘을 사용할 경우 유리합니다.유지보수성 증가 - 하나의 파일만 관리하면 되기때문에 효율적입니다.어떻게 만들까?SVG 스프라이트를 만들때는, 태그를 사용하여 여러개의 SVG 아이콘을 하나의 파일에 저장하면 됩니다. 개별 아이콘을 태그로.. zsh: command not found: brew 해결법 macOS용 패키지 관리자인 homebrew를 설치하고, brew를 사용해서 다른앱을 설치하려 하는데 오류가 뜨는 답답한 상황. homebrew 삭제와 재설치를 반복하다가, 결국 방법을 찾았다🤧 homebrew설치를 아직 안한 경우에는 brew가 없어서 그럴 수 있으니 설치 먼저 해보세요~https://brew.sh/ko/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh 터미널에서 open ~ 명령어 입력 (파인더가 열린다)파인더에서 command + shift + . 누르면 숨겨진 파일을 볼 수 있다.숨겨진 파일 중 .zshrc를 연다export PATH="/opt/homebrew/bin:$PATH" 를 추가한다..zshrc 저장한.. 이전 1 다음
