그냥, 일단 써내려가자

안녕하세요 무택입니다 :)오늘은 아주 빠르게 '텍스트 필드에서 자동완성 비활성화하기'를 알아보겠습니다.우리는 인터넷에서 오만가지를 다 검색해 봅니다.'주식으로 부자 되기', '아무도 나를 모르고 돈 많은 부자 되기'..(여러분도 원하잖아요..)가끔 '내가 이런 것도 검색했나' 기억도 안나는 기록들이 나오는데..개발자로서 이런 기록들을 보여주지 않게 만들 수 있는자동완성 비활성화, 바로 시작합니다. 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]폰트 파일을 웹 폰트로 쉽게 변환시키기안녕하세요 무택입니다 :) 오늘은 일..

1.HTML 프로덕트 매니지먼트 사용자 친화적 서비스 개발 PM 실무 역량 강화 더 알아보기> 2.CSS *{ margin: 0; padding: 0; } #container{ padding: 20px; width: 300px; height: 200px; background-color: lightgray; position: relative; top: 10vh; transition: all .2s ease-out; border-radius: 16px; box-sizing: border-box; } #container > p{ margin-block: 16px; } #container > a > span{ background-color: white; border-radius: 100%; } #containe..

안녕하세요 :) 무택입니다🧔 이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다. 일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다. 배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다. See the Pen popup Layer(배경 블러 효과 + 외부 클릭시 닫기) by TytanLee (@TytanLee) on CodePen. 추가로 사용된 문법들에 대한 정리는 아래를 참고해 주세요. [jQuery] mouseup() mouseup() 메서드는 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. #문법 $("선택자").mouseup(); [JavaScript] classList.add() class..

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

티스토리 블로그에 코드 블럭 스킨 적용하는 방법 (highlight.js) ?. 코드블럭이란 게시글에 코드를 넣을 때 최적화 시켜주는 툴이다. 여기서 여러가지 언어를 선택할 수 있다. 스킨을 사용하지 않으면 평범한 코드블럭 형태가 나온다. 하지만 평범한 스킨이 싫다 싶은 사람들은 코드 스킨을 사용하면 자신만의 블로그 색깔을 만들 수 있다. 아래 순서대로만 따라오면 쉽게 적용할 수 있다. 01. 블로그 설정에서 '플러그인 - 코드 문법 강조' 선택 02. 적용 클릭 03. '스킨 편집' 클릭하고 창 먼저 띄워두기 04. https://highlightjs.org/ highlight.js Version 10.7.2 This is a patch release. The only change is that dep..

원본 링크 : https://github.com/bfintal/Counter-Up GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becom Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible. - GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts u... github.com 사용 소스 : 01...

오늘도 웹서핑을 하다가 좋은 사이트를 발견하게 되었다. 바로 이미지맵 좌표를 편하게 찾아주는 사이트. 내가 아무것도 모르고 네이버 블로그스킨을 제작할 때는 포토샵에서 이미지맵을 직접 계산하느라 머리가 아팠다. 네이버 블로그스킨 특성상 이미지맵으로 링크를 넣어야하는데 알려주는 사수도 없었기 때문에 포토샵에서 가로값, 세로값, x좌표, y좌표 직접 수치 적어가면서 적용하곤 했는데 이렇게 좋은 사이트가 있었다면 그 때 덜 고생했을텐데.. 본론으로 들어가서 링크는 http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 들어가면 아래 화면이 보인다. 1 : 파일 선택 2 : 파일 업로드 3 : 파일 허용 위 순서대로 하면..

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