그냥, 일단 써내려가자

안녕하세요 무택입니다 :)오늘은 UX를 조금, 아주 조금이라도 향상시킬 수 있는 팁 datalist에 대해 써보겠습니다.datalist는 `input`에서 텍스트를 입력받을 때, 몇몇 예시를 보여주는 기능입니다.`select`를 사용하기에는 선택사항이 정해져 있는 건 아니고,`input`을 사용할 때 선택사항을 보여줘서 선택할 수 있는, 약간의 편리성을 더해주는 기능입니다. 사용방법사용방법은 어렵지 않습니다.See the Pen [HTML/CSS] input의 datatlist 추가 by TytanLee (@TytanLee) on CodePen. `input의 list`와 `datalist의 id`만 일치시켜 주면 선택사항을 노출시킬 수 있습니다.  사용에 적합한 상황텍스트를 입력받아야 하는데, 사용자..

안녕하세요 무택입니다 :)오늘은 아주 빠르게 '텍스트 필드에서 자동완성 비활성화하기'를 알아보겠습니다.우리는 인터넷에서 오만가지를 다 검색해 봅니다.'주식으로 부자 되기', '아무도 나를 모르고 돈 많은 부자 되기'..(여러분도 원하잖아요..)가끔 '내가 이런 것도 검색했나' 기억도 안나는 기록들이 나오는데..개발자로서 이런 기록들을 보여주지 않게 만들 수 있는자동완성 비활성화, 바로 시작합니다. input 자동완성 비활성화하기위 이미지처럼 자동완성은 `autocomplete`라는 옵션을 사용합니다.대체적으로 모든 브라우저에 활성화되어 있는데 아래 코드를 통해 확인해 보시죠See the Pen [HTML]Autocomplete 기능 by TytanLee (@TytanLee) on CodePen.첫 번째..

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

안녕하세요 무택입니다 :)오늘은 MS기본 폰트인 맑은 고딕을 맥에서 웹폰트로 사용하는 방법을 알아보겠습니다. 우선 맑은 고딕은 MS 기본 폰트로 윈도우를 사용하시는 분들은 가장 익숙한 폰트일 수 있습니다. 하지만 윈도우에서 사용되는 폰트이기 때문에 맥에서 폰트를 보여주기 위해서는 글꼴 파일 작업이 필요합니다. 그 방법을 아래에서 자세하게 설명해 보도록 하겠습니다.  같이 보면 좋은 포스팅[CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기 [CSS]폰트 파일을 웹 폰트로 쉽게 변환시키기안녕하세요 무택입니다 :) 오늘은 일반 폰트를 웹폰트로 변환시킬 수 있는 방법에 대해 알아보려고 합니다. 웹개발 작업에서 웹폰트를 사용하는 것은 아주 중요한 일입니다. 왜일까요? 아래에서mu08.tistory.com   맥에서 ..

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

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

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

안녕하세요 무택입니다 :) 오늘은 CSS를 사용하지 않고 HTML에서 이미지 태그에 대해 편집하는 방법에 대해 써보려고 합니다. 많이 사용하진 않지만 혹시 모르니까 자투리 상식 개념으로 알고 있으면 좋을 것 같아요👍 imageKit API 사용 이 기능을 이용하기 위해서는 imageKit API를 이용해야 합니다. 이게 가장 큰 단점이라고 생각합니다ㅜ Image & Video CDN | Dynamic Optimizations, Transformations & DAM | ImageKit.io Real-time image and video optimizations & transformations with integrated digital asset management & a fast CDN for deliv..