그냥, 일단 써내려가자

Clip-path를 활용한 마우스오버 효과 See the Pen Hover 이미지 슬라이드 효과 by TytanLee (@TytanLee) on CodePen. clip-path를 활용해서 디테일한 움직임을 보여줄 수 있는 모션

카드형 이미지 마우스 오버 효과 See the Pen [css]hover 효과 참고(scale) by TytanLee (@TytanLee) on CodePen. transform과 transform-origin을 활용한 마우스 오버 효과

안녕하세요 무택입니다 :) 오늘은 개발자도구를 이용해서 페이지 내에 사용된 스크립트를 찾는 방법에 대해 써보도록 할게요. 웹페이지에 신기한 스크립트 기능이 있는 걸 가끔 보는데 그때마다 스크립트가 어떻게 되어있는지 알고 싶었습니다. 그래서 어떻게 찾는지 찾아보고 제가 찾은 내용을 공유하려고 합니다. 페이지 내 스크립트 찾기 1. 확인하려는 사이트에서 우측 상단 햄버거메뉴에서 "도구 더보기 - 개발자 도구"를 눌러줍니다. 2. 우측 상단 톱니바퀴 모양 클릭 Preferences - Sourses에 "Search in anonymous and content scripts" 항목을 체크해 줍니다. 3. 그리고 개발자 도구 내에서 우측 상단 점 세 개 아이콘 클릭 후 Search를 눌러줍니다. 단축키 [ Ctr..

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 VScode에서 FTP연결을 어떻게 하는지입니다. FTP연결이 왜 필요하냐면 파일들을 로컬에서 작업을 하다가 이제 서버로 옮기게 되면 수정하기가 불편한데 이럴 때 FTP연결을 해서 서버 상에서 파일을 수정해야 합니다. 간단하게 볼 수 있도록 이미지로 정리해 놨으니 천천히 따라 해 주세요. VScode에서 FTP연결하는 방법 1. 왼쪽 맨 아래 확장프로그램 아이콘 선택 후 검색창에 ftp 검색, "ftp-simple"을 설치합니다. 2. "F1" 혹은 "Ctrl + Shift + P"를 눌러서 검색창을 활성화시킨 후 ftp를 검색해서 "ftp-simple: Config - FTP connection setting"을 눌러줍니다. 3. 그럼 위와 같은 설정 파일..

안녕하세요 무택입니다 :) 오늘은 스크린샷이 막힌 사이트나 이미지 저장이 안 되는 사이트에서 이미지를 저장할 때 어떻게 저장하는지 알아보려고 합니다. 여러 사이트들에서 서치를 하다 보면 이미지로 저장하고 싶은 영역이나 이미지들이 생기는 경우가 더러 있는데 요즘은 막아놓은 사이트들이 많은 것 같습니다. 아마 저작권 문제 때문에 막아놓은 사이트들이 많은 것 같은데 이번 포스팅에서는 기능을 불법적인 용도가 아닌 개인적인 용도로만 사용을 권합니다. 스크린샷 방법 1. 오른쪽 상단의 메뉴를 눌러 "도구 더보기 - 개발자 도구"로 들어갑니다. 2. 또 오른쪽 상단의 점 세 개 메뉴를 눌러 "Run command"를 실행합니다. 단축키 [ Ctrl + Shift + P ] 3. 검색창에 screentshot을 검색해..

안녕하세요 무택입니다 :) 오늘은 focus() 함수를 사용하려고 하는데 작동하지 않을 때 사용할 수 있는 setTimeout() 함수에 대해 써보려고 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 위 예시를 보면 아시겠지만 저는 버튼을 누르면 검색창을 띄워서 바로 자동으로 입력가능한 UX를 만들고 싶었습니다. 검색창을 누르고 input탭을 누르는 과정을 생략시켜 주면 사용자 입장에서는 편하기 때문에 focus 기능을 사용하려고 했는데 함수가 작동이 안 되더라구요. 그래서 대체 함수를 찾다가 setTimeout() 함수를 이용해서 구현해 봤습니다. 위 예시에서 보면 알 수 있듯이 focus()를 이용했을 때는 기능이 작동..

안녕하세요 무택입니다 :) 오늘은 HTML의 구조에 대해 설명해보려고 해요. 바로 p태그 안에는 div가 안 들어간다는 사실! 여느 때와 같이 작업을 하는 도중에 p태그 안에 div를 넣고 js에서 div를 불러오려고 하려고 하는데 기능이 안 돌아가는 거예요.. 그래서 찾아봤더니 구조상 p태그 안에는 div가 못 들어간다고 합니다. 자세한 이유는 잘 모르겠지만 구조상 불가능하다는 사실..😭 p태그 안에 div를 넣으면? 개발자 툴에서 보면 알 수 있듯이 p태그 안에 div를 넣으면 p태그가 자동으로 닫히고 그 후에 div태그가 나옵니다. 또 그 후에 p태그 하나가 자동으로 열리고 닫히는 걸 볼 수 있습니다.(이러니 js에서 p > div를 해도 찾을 수가 없지..) 구조상 p태그 안에 div를 만들 일이..

안녕하세요 무택입니다 :) 오늘은 웹퍼블리싱을 하면 거의 필수로 필요한 기능인 탭 활성화 + 나머지 탭 비활성화 코드에 대해 써보도록 하겠습니다. 사용성이 많은 기능이니 한번 보시면 좋을 거예요 동작 원리 먼저 탭을 선택하면 변화시킬 css내용을 클래스로 만들어놓고 탭을 누르면 모든 탭에서 활성화 클래스 제거, 누른 탭은 활성화 클래스를 추가하는 원리입니다. 여기서 중요한 건 클릭한 탭을 찾아줘야 하기 때문에 'this 선택자'를 사용해야 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. HTML 탭1 탭2 탭3 CSS * { list-style: none; margin: 0; padding: 0; } a { text-dec..

안녕하세요 무택입니다 :) 오늘은 스크롤에 따라 진행상태를 알려주는 바 만드는 코드에 대해 남겨보려고 합니다. 요즘 아티클 형식의 페이지는 거의 다 사용하고 있는 것 같은데 그만큼 웹사이트 사용성에 도움을 주는 기능이라고 생각합니다. 사람들이 페이지에 들어와서 글을 읽다가 어느 정도 남았는지 직관적으로 알 수 있기 때문에 적절한 페이지에 적용하면 좋은 기능이 될 것 같아요. 동작원리 저는 기능을 브런치 사이트의 아티클 페이지를 참조해서 만들었습니다. 그래서 기본적으로 동작 원리는 스크롤할 때마다 스크립트를 실행시켜서 현재 스크롤 위치를 파악 후 수치로 변환(0 ~ 100%), 그 수치를 진행바의 넓이로 넣는 원리입니다. codepen 예시 See the Pen 스크롤 위치 by TytanLee (@Tyt..

주목을 시키고 싶은 텍스트에 활용하기 See the Pen 텍스트 파도 애니메이션 by TytanLee (@TytanLee) on CodePen.