그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 일반 폰트를 웹폰트로 변환시킬 수 있는 방법에 대해 알아보려고 합니다. 웹개발 작업에서 웹폰트를 사용하는 것은 아주 중요한 일입니다. 왜일까요? 아래에서 자세한 내용을 만나보세요😊 같이 보면 좋은 포스팅 [디자인 팁]디자이너가 추천하는 핫한 타이틀 폰트 + 안좋은 예 [디자인 팁]디자이너가 추천하는 핫한 타이틀 폰트 + 안좋은 예 안녕하세요 무택입니다 :) 오늘은 디자이너로써, 타이틀에 사용하면 좋을 폰트를 들고 왔습니다. 요즘은 간단한 디자인은 디자이너가 아니더라도 많은 분들이 직접 하시기 때문에 실무로 디자 mu08.tistory.com 웹 폰트 사용 이유 몇몇 분들은 '일반 폰트가 있는데, 왜 웹폰트를 사용해야하지?' 라고 생각할 수도 있습니다. 하지만 웹 환경은 ..

안녕하세요 무택입니다 :) 오늘은 탭 클릭 시 원하는 내용을 노출시키거나 비노출시키는 코드에 대해 써보도록 하겠습니다. 정말 많이 사용하는 기능인데 아래에서 최대한 쉽게 설명을 해볼 테니 아래 내용을 참고해 주세요😀 탭 클릭 시 내용 노출, 비노출 HTML/CSS tab one tab two tab three tab one contents tab two contents tab three contents JS const tab = document.querySelectorAll('.tab'); const con = document.querySelectorAll('.content'); tab.forEach(function(tab_btn, index){ tab_btn.addEventListener('click'..

아마 이 글이 올해의 마지막 글이 될 것 같은데 한 해 동안 제 블로그에 방문해 주신 분들 모두 감사드리고, 모두들 내년은 더욱더 의미 있는 한 해가 되었으면 바라봅니다. 안녕하세요 무택입니다 :) 오늘은 불규칙한 이미지 프레임을 어떻게 만드는지 알아보려고 합니다. 아래 이미지 같은 웹디자인을 보신 분이 많을 것 같습니다. 주로 해외 웹디자인에서 많이 볼 수 있는 디자인인데 이런 프레임을 어떻게 구성하는지 알아보도록 하겠습니다. 불규칙한 이미지 프레임 HTML/CSS SERVICES Special Think Elevate your spaces sustainably with Nilsson. Discover innovative modern designs for architecture, interior, an..

겨울시즌 눈 내리는 효과 See the Pen [HTML/CSS]눈 내리는 효과 by TytanLee (@TytanLee) on CodePen. 겨울 시즌에 홈페이지에 적용하면 좋습니다😀 출처 : 프론트베이커

안녕하세요 무택입니다 :) 오늘은 투명도 있는 영상을 웹에서 보여줄 때 어떻게 보여줄 수 있는지 알아보도록 하겠습니다. 결론부터 말씀드리면 WebM이란 포맷을 사용하면 되는데 아래에서 자세한 내용을 살펴봅시다👍 투명도 있는 동영상을 찾아보려 했으나 찾을 수가 없어 실제 적용 예시는 제외하게 되었습니다😢 그래도 아래 내용을 따라 하면 적용할 수 있으니 잘 살펴봐주세요 개념설명 WebM은 동영상 포맷입니다. MP4, MOV, AVI 같은 포맷 중에 하나인 셈이죠. 이 포맷은 구글에서 지원하고 개발한 오픈소스 포맷입니다.(킹갓구글) 이 포맷은 이미지에서 투명도를 활용하려면 PNG를 쓰듯 동영상에서 투명도를 활용하려면 WebM을 쓴다고 생각하면 됩니다. 장점은 압축률이 좋아서 파일의 크기가 작습니다. 웹 환경에..

안녕하세요 무택입니다 :) 오늘은 퍼블리싱을 하다가 생길 수 있는 오류 중 하나인 이상한 간격이 생겼을 때 없애는 방법에 대해 써보도록 하겠습니다. 분명 `margin`이나 `padding`이 들어간 게 없는데 이상한 간격이 생겨서 어떻게 해도 사라지지 않을 때가 있습니다. 그럴 때 어떻게 해결할 수 있는지 아래에서 확인해 보세요🙂 같이 보면 좋을 비슷한 오류 글 [HTML/CSS] P태그 안에 DIV를 넣지 마세요! [HTML/CSS]border의 픽셀이 깨지는 오류 해결 Codepen See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 왜 생길까? 이 간격이 생기는 이유는 위에 보이는 공백 때문에 생기게 됩니다. 정확히 설명하면 저런 공백이 있는 상태..

안녕하세요 무택입니다 :) 오늘은 알고 가면 좋을 기법인 Image sprites 기법에 대해 써보려고 합니다. 모르시는 분이라면 생소한 이름일 텐데 아래에서 자세한 내용을 만나보시죠. 스프라이트 기법이란? 여러 개의 아이콘이나 이미지를 하나의 이미지로 합쳐서 업로드한 뒤, 각각 필요한 곳에 맞게 이미지의 위치를 조정해서 맞추는 기법입니다. 왜 사용하는지? 기존 방식이라면 아이콘마다 각각의 이미지가 있기 때문에 용량이 적은 파일들이라 하더라도 사이트에 들어오면 이미지들을 각각 다운받게 됩니다. 하지만 이미지 스프라이트 기법을 사용하면 하나의 이미지만 다운받으면 되기 때문에 이미지의 다운속도가 향상됩니다. 또한 용량 관리 차원에서도 미세하게나마 도움이 될 수 있습니다. 결과적으로 웹 최적화에 좋은 기능이기..

HTML/CSS Codepen See the Pen [HTML/CSS]Neon 애니메이션 by TytanLee (@TytanLee) on CodePen. 원본 : 깜보랜딩페이지

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 before&after를 효과적으로 보여줄 수 있는 UI를 카피 구현해 봤습니다. 원본 사이트에서 JS코드를 찾아볼 수가 없어서 따라서 구현하는데 애를 조금 먹었는데, 아래에서 자세한 코드들을 살펴보시죠😊 읽기 전 보면 좋은 글 [JavaScript]마우스 좌표를 구할 수 있는 다양한 방법 HTML/CSS JS const find_xy = document.getElementsByClassName('find_xy')[0]; find_xy.addEventListener('mousemove', function (e) { const moveX = e.offsetX; document.querySelector('.af_img_div').style.width = (5..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 map+area에 `hover`효과를 줄 수 있는 방법에 대해 써보려고 합니다. `hover`는 css에서 간단하게 줄 수 있는 코드인데 area에도 적용이 가능할까 궁금증에 찾아본 내용인데 JS를 이용해서 적용할 수 있더라구요. 주로 css에 접근할 수 없는 경우에 쓸 수 있는 코드로, 아래에서 같이 한 번 살펴봐요😀 HTML JS function on_mouse() { document.querySelector('#main_img').src = `https://i.ibb.co/RPM1KMJ/image-16.png`; } function off_mouse() { document.querySelector('#main_img').src = `https://i..