그냥, 일단 써내려가자

안녕하세요 :) 무택입니다🧔 오늘은 웹사이트 서치하다가 좋아 보이는 기능을 발견해서 그 기능에 대해 기록해보려 합니다. 스크롤 시 천천히, 부드럽게 보여주는 애니메이션에 대한 내용입니다. smoothwheel 제이쿼리를 찾아보다가 문제점이 있어서 실제 적용하기는 힘들어 보여서 실제로 더 서치 하다가 적용 가능한 scrooth라이브러리를 발견해서 두 가지를 남겨봅니다. 1. smoothwheel.js 원본 링크 - https://github.com/fatlinesofcode/jquery.smoothwheel GitHub - fatlinesofcode/jquery.smoothwheel: Cross browser smooth mouse wheel and trackpad scrolling Cross browse..

안녕하세요 :) 무택입니다🧔 오늘은 제이쿼리 여러 가지 선택자에 대해 정리해보려고 합니다. closest(), parent() 등 선택자는 쓰이는 경우가 많아서 꼭 알아야 할 문법인 것 같습니다. 예시 코드도 같이 설명에 넣어놨으니 활성화 버튼을 누르기 전에 뭐가 활성화될지 한번 생각해 보고 눌러보면 좋을 것 같습니다. #부모 선택자 $("기준요소").parent() : 기준요소의 부모 선택 - See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen. $("기준요소").parents() : 기준요소의 부모들 모두 선택 - See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen. $("기준요소").c..

안녕하세요 :) 무택입니다🧔 오늘은 동등연산자(==)와 일치연산자(===)의 비교입니다.처음에 보면 헷갈리는 부분이 있기 때문에 정리해보려고 합니다. #동등연산자(==) - 두 피연산자의 값이 같으면 true반환 - 피연산자의 타입이 서로 다르면 강제로 타입을 같게 변환 [10 == '10'] // true [true == 1] // true [true == '1'] // true [true =='true'] // false [null == undefined] // true [10 == '10'] 하나가 숫자형이고 다른 하나가 문자열이면 문자열을 숫자로 변환 후 비교 [true == 1] 피연산자 중 불리언 값이 있으면 불리언 값을 0&1로 변환 후 비교(false=0, true=1) [true == '..

안녕하세요 :) 무택입니다🧔 이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다. 일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다. 배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다. 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..