그냥, 일단 써내려가자

안녕하세요 무택입니다 :)오늘은 웹사이트 속도 향상에 크게 도움이 되는 '서브셋 폰트'에 대해 포스팅해 보겠습니다. 놓치면 아쉬운 꿀팁들이 포스팅 중간에 섞여있으니 자세히 읽어주세요.미리 확인하면 좋은 글 [HTML/CSS] CDN, OTF, WOFF 폰트 적용에 따른 차이 [HTML/CSS] CDN, OTF, WOFF 폰트 적용에 따른 차이안녕하세요 무택입니다 :) 오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이mu08.tistory.com [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기 [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기안녕하세요 무택입니다 :) 오늘은 일..

안녕하세요 무택입니다 :) 오늘은 5분만 투자하여 크롬 개발자 도구를 활용하여 웹사이트의 SEO를 최적화하는 방법을 배워보겠습니다. SEO(Search Engine Optimization)는 웹사이트가 검색 엔진 결과 페이지에서 높은 순위를 차지할 수 있도록 최적화하는 프로세스를 의미합니다. 이를 위해 크롬 개발자 도구는 매우 유용한 도구 중 하나입니다. 크롬 개발자 도구 소개 크롬 개발자 도구는 Chrome 브라우저의 내장 개발자 도구로, 웹 개발 및 디버깅을 위한 강력한 기능을 제공합니다. 이를 통해 웹사이트의 성능을 분석하고 문제를 해결할 수 있으며, SEO 최적화에도 도움이 됩니다. SEO최적화 방법 웹사이트 로딩 속도 최적화 먼저, 웹사이트의 로딩 속도를 최적화해야 합니다. 빠른 로딩 속도는 검..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 최신 웹디자인 및 퍼블리싱 카피를 해보려고 합니다. 기능은 마우스 올렸을 때 이미지가 나타나서 마우스를 따라다니는 기능입니다. 아래에서 자세한 내용을 살펴봅시다😀 HTML/CSS ALL IMAGE VIDEO FILM JS const div_wraps = document.querySelectorAll('.div_wrap'); document.getElementById('list_ul').addEventListener('mousemove', function(e){ const x = e.clientX; const y = e.clientY; div_wraps.forEach(function(div){ div.style.transform = `translate(${..

안녕하세요 :) 무택입니다🧔 오늘 기록할 내용은 웹페이지 nav에 활용하면 좋은 효과입니다. nav에 투명도를 주고 블러효과를 입혀서 아래레이어가 보이는 구성으로 웹페이지에 개방감을 줄 수 있는 장점이 있습니다. See the Pen nav filter effect by TytanLee (@TytanLee) on CodePen.

실무를 하다 보면 디자인 소스를 가져와서 작업을 많이 하게 되는데 보통 화질 손실을 막고 편집을 편하게 하기 위해 고급개체로 가져오게 됩니다. 하지만 고급개체로 가져와서 작업하고 저장하면 파일 용량이 커지기도 하고, 클라이언트 측에 전달할 때 고급개체 상태로 전달하게 되면 클라이언트 측에서 사용할 수 있어서(라이센스 문제가 발생) 고급개체는 레스터화해서 관리하는 게 좋습니다. 그래서 오늘은 빠르게 레스터화할 수 있는 단축키 설정을 알아보려 합니다. 01. '편집 - 바로 가기 키' 메뉴 선택 02. 레이어 항목 선택 03. 레스터화를 보면 바로 가기 키가 설정이 되어있지 않는 게 기본값입니다. 여기를 눌러서 본인이 사용하기 편한 키를 누르면 입력이 됩니다. 저는 'Ctrl+Alt+F'가 편하다고 생각해 ..

웹 디자이너로 생활하면서 레퍼런스 찾는 작업을 많이 하는데 레퍼런스를 찾다 보면 아래와 같은 익숙하지 않은 디자인들이 가끔 보인다. 그래서 이런 디자인은 왜 나오는 건지 찾아보고 정리하고자 한다. 브루탈리즘은 20세기 초의 모더니즘 건축의 뒤를 이어 1950년대에서 1970년대 초반까지 융성했던 건축 양식이다.(위키백과) 브루탈리즘이란 용어의 의미가 '가공되지 않은 콘크리트'와 비슷한데 말 그대로 뭔가 정돈되지 않은 느낌과 날 것 그대로의 모습을 연상시킨다. 웹디자인으로 다시 돌아가보면 요즘 웹사이트들의 디자인은 비슷한 느낌이 많이 들고 평범한 웹사이트는 눈에 띄기 힘들어졌다. 그 와중에 네오브루탈리즘 디자인은 한번 경험하면 기존의 디자인과의 이질감 때문에 더 확실하게 사이트를 기억할 수 있다. 이 트렌..

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다. 처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다. 1.HTML 첫 번째 타이틀 첫 번째 서브 타이틀 예시용 텍스트 문단입니다. 두 번째 타이틀 두 번째 서브 타이틀 예시용 텍스트 문단입니다. 세 번째 타이틀 세 번째 서브 타이틀 예시용 텍스트 문단입니다. 2.CSS *{ pdding: 0; margin: 0; } /* 전체 설정 가이드화 */ :root{ --color-black: #131313; --color-gray: #55..