그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 스크롤 트리거에 대해 설명해보려고 합니다. 스크롤을 활용해서 웹페이지를 동적으로 만들어 줄 수 있는 라이브러리인데 너무 좋은 라이브러리라서 보시면 활용할 곳이 정말 많을 것 같습니다😊 스크롤 트리거, 왜 사용할까요? 동적인 웹 구현을 하기 위해서는 자바스크립트가 거의 필수로 들어가야 합니다. JS를 활용한 기능들 중 스크롤 위치에 따른 기능 구현이 많이 필요한데 페이지마다 자바스크립트만으로 구현하기에는 복잡하고 사용성이 떨어지기 때문에 편하게 스크롤 위치를 감지하고 기능을 넣을 수 있는 스크롤 트리거 라이브러리를 사용하면 쉽고 빠르게 동적인 기능을 만들 수 있습니다. 코드 및 설명 HTML/CSS .full_screen { width: 100%; height: 100vh..

안녕하세요 무택입니다 :) 오늘은 상업적으로 사용이 가능한 일러스트를 공유하려고 합니다. 보통 무료 일러스트는 개인 프로젝트에서만 이용이 가능한 게 대부분인데 이 파일들은 높은 퀄리티에 상업적 이용까지 가능하게 공유되었으니 필요하신 분들은 사용하시면 좋을 것 같습니다😊 무료 일러스트 Free Vector Illustrations For Your Projects Hand-drawn, vector, free illustrations. Ideal for websites, web applications, mobile applications, marketing materials, printouts, social media posts, templates, work presentations, www.freeillus..

안녕하세요 무택입니다 :) 오늘은 포토샵에서 고급개체 레이어를 사용하는 이유에 대해서 써보려고 합니다. 포토샵이 아직 익숙하지 않은 분들이라면 고급개체와 일반 레이어의 차이가 정확히 무엇인지 모르는 게 당연하다고 생각합니다. 아래 내용에서 고급개체의 사용 이유에 대해서 알아보세요😊 고급개체 레이어의 개념 우선 고급개체 레이어는 위 이미지처럼 레이어에 문서표시가 들어가기 때문에 일반 레이어와 구분할 수 있습니다. 그런데 이 고급개체는 뭘까요? 고급개체는 "원본을 보존하면서 편집할 수 있는 레이어"를 말합니다. 여기서 말하는 원본의 종류는 이미지, 벡터 파일, PSD 파일 등 여러 가지가 될 수 있습니다. 그런데 이 원본들을 보존하면 뭐가 좋을까요? 바로 레이어의 크기나 필터 효과 적용 등 많은 편집을 하더..

안녕하세요 무택입니다 :) 오늘은 윈도우 기본 스크린 샷 기능을 끄는 방법에 대해 써보겠습니다. 저는 스크린샷 프로그램을 따로 사용하고 있는데 언제부터인가 프린트 스크린 키를 누르면 윈도우 캡쳐 기능이 켜지더라구요. 이게 불편해서 윈도우 스크린 기능을 끄고 제가 사용하는 프로그램을 사용하기 위해 알아봤습니다. 윈도우 스크린 샷 기능 설정하기 1. 윈도우 검색창에 "캡처도구"를 검색해 줍니다. 2. 실행하기 3. 우측 상단 점 세 개 클릭 4. 설정을 눌러서 설정메뉴로 들어가기 그러면 왼쪽과 같은 화면이 뜨게 됩니다. 여기서 "바로 가기" 메뉴에 있는 인쇄 화면 키 어쩌구..를 눌러서 설정으로 들어가 줍니다. 그러면 오른쪽 창이 뜨게 되는데 이미지의 ②번 기능을 꺼줍니다. 여기까지 짧게 윈도우 기본 스크린..

안녕하세요 무택입니다 :) 오늘은 폰트 검색 기능에 대해 써보려고 합니다. 좋은 디자인에서 폰트는 중요한 역할을 합니다. 좋은 디자인을 봤을 때 폰트가 뭔지 궁금할 때가 있죠. 그럴 때 어떻게 폰트를 찾는지에 대해 써보도록 하겠습니다. AI 폰트 검색하기(한글) 1. 먼저 산돌 폰트 검색사이트에 들어가서 위 화면의 부분에 이미지를 등록해 줍니다. 드래그로 해도 등록이 되니 드래그로 편하게 등록하세요😊 2. 이미지를 등록하면 맨 위 화면처럼 어떤 폰트를 검색할 건지 영역 선택하는 부분이 나옵니다. 그러면 영역을 맞춰주시고 영역을 클릭해 주세요. 그러면 사용된 폰트와 비슷한 폰트들이 나오게 됩니다. 폰트가 나왔는데 유료면 곤란하기 때문에 비슷한 느낌의 폰트들이 나오니 그중에 무료 폰트가 있다면 검색해서 사용..

안녕하세요 무택입니다 :) 오늘은 티스토리에서 인라인코드를 코드블록으로 만드는 방법 + 간편하게 설정할 수 있는 방법에 대해 써보려고 합니다. 개발 관련 블로그를 운영하고 있고 운영할 생각이 있으신 분들이 보면 좋을 것 같은 글이니 아래 내용을 천천히 읽어주세요. 인라인 코드블록(이하 코드블록)이란? 노션 서비스를 보면 위 이미지처럼 텍스트를 코드블록으로 감싸서 상황에 따라 가독성을 높여줄 수 있는 툴이 있습니다. 위 이미지에서 `Notion` 부분이 그 예시입니다. 포스팅에 코드를 적어야 할 경우 [display : none;] 이런 식으로 써주는 것보다 `[display : none;]` 이런 식으로 쓰면 코드 가독성이 더 올라가기 때문에 코드블록은 개발 블로그에서 필수적으로 사용해야 한다고 생각합니..

안녕하세요 무택입니다 :) 오늘은 포토샵 파일의 용량을 줄일 수 있는 방법에 대해 알아보려고 합니다. 포토샵으로 디자인 작업을 하다 보면 파일 용량이 너무 커질 때가 많아요😢 그럴 때 용량 관리하기 위한 아주 좋은 방법을 설명하려고 하니 아래 내용을 참고해 주세요. 포토샵 파일 용량 줄이는 방법 오늘의 예시 이미지입니다. 간단하게 작업을 해보았고 이 파일로 예를 들어서 설명해 보겠습니다. 파일의 용량을 봤을 때 54MB 정도 나오는 것 같습니다. 그렇게 큰 용량은 아니지만 예시로 드는 파일이기 때문에 실무에서 작업하다 보면 1GB도 훌쩍 넘어가는 경우도 많죠. 파일을 열어보면 레이어들도 있고 레이어 효과, 고급 개체들도 포함하고 있습니다. 아마 여기서 많은 용량을 잡아먹고 있는 건 고급개체 레이어라고 생..

아이콘 등장 효과 See the Pen 카드 hover 효과(아이콘 등장 모션) by TytanLee (@TytanLee) on CodePen. 텍스트보단 아이콘을 보여주고 싶을 때 사용할만한 모션 참고 : 서핏 커리어 프로필 페이지

안녕하세요 무택입니다 :) 오늘은 저번 Slick-slider의 dot을 커스텀한 글에 이어서 이번에는 Swiper의 dot을 커스텀하는 방법에 대해서 써보려고 합니다. 아래에서 바로 확인하시죠. Slick-slider의 Dot을 커스텀하는 방법은 아래 글을 참고해 주세요. https://mu08.tistory.com/107 Swiper 라이브러리의 Dot을 커스텀하는 방법 HTML/CSS Swiper 1 Swiper 2 Swiper 3 꼭 swiper의 js파일과 css파일을 불러와야 적용이 됩니다. JS var bullet = ['슬라이드1', '슬라이드2', '슬라이드3']; var swiper = new Swiper('.swiper-container', { pagination: { el: '.sw..

안녕하세요 무택입니다 :) 오늘은 Slick-slider라이브러리의 dot을 커스텀할 수 있는 방법에 대해 써보려고 합니다. 이 라이브러리는 웹개발에 있어서 쓸 일이 정말 많은데 커스텀하지 않은 버전의 슬라이드도 정말 좋지만 상황에 따라 커스텀해야 할 경우도 생기더라고요. 그럴 때를 위해 써보려고 합니다. Slick-slider의 dot을 커스텀할 수 있는 방법 HTML/CSS slick 01 slick 02 slick 03 JS $('.slick_slider_div').slick({ autoplaySpeed: 2500, dots: true, slidesToShow: 1, customPaging: function (slider, i) { var thumb = $(slider.$slides[i]).data..