그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 웹서핑을 하다가 좋은 사이트를 발견해서 공유하려고 합니다. iOS 디바이스 정보 확인 사이트 Screen Sizes링크로 가보면 위 화면을 확인할 수 있습니다😄😄😄 Screen Sizes A complete guide for Apple displays screensizes.app - iOS의 다양한 디바이스 정보 확인, 레이아웃 가이드, 위젯 크기 등 OS에 관련된 픽셀이나 정보를 확인할 수 있는 사이트 - 디바이스 크기도 비교할 수 있는 부가기능 참고 글 : https://yozm.wishket.com/magazine/detail/2232/ "정리된 모바일 디바이스별 해상도"를 보고 싶다면 아래를 참고해 주세요 :) 모바일 디바이스별 해상도(2023.09.18 기준) ..

안녕하세요 무택입니다 :) 오늘은 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..

See the Pen [HTML/CSS]원형 차트 만들기 by TytanLee (@TytanLee) on CodePen. 이해를 돕기 위한 설명 - `stroke`클래스를 `rotate`로 돌렸기 때문에 HTML내의 `circle`에서 `cx`,`cy`로 위치 조정, 그리고 `r`로 차트의 반지름 설정 - `stroke-dasharray`는 점의 길이, `stroke-dashoffset`은 점 사이 간격의 길이 - `show_circle` 애니메이션으로 차트가 움직이는 모습 구현 - `storke`클래스의 `stroke-dasharray`와 `show_circle`애니메이션의 `stroke-dashoffset`의 값을 조정해 차트가 얼마 나 찰 것인지 조정 - `storke`클래스의 `stroke-das..

안녕하세요 무택입니다 :) 오늘은 animation 옵션 중에서 steps에 대한 설명을 해보려고 합니다. HTML/CSS 코드 step non-step 한 글 자 씩 보 여 주 기 Codepen See the Pen [CSS}animation step 사용 by TytanLee (@TytanLee) on CodePen. 개념 설명 오늘 사용한 `steps` 옵션은 프레임을 설정해 주는 기능입니다. 애니메이션 옵션에서 기본 설정은 자연스럽게 움직이는 것이지만 `steps`옵션을 넣어주면 몇 단계를 통해서 애니메이션을 보여줄 것인지 설정할 수 있습니다. 왜 사용하는지 시곗바늘이 딱딱 움직이는 연출을 할 수도 있고, 위 예시처럼 텍스트를 한 글자씩 노출시키는 연출을 할 수도 있고 다양한 연출을 할 수 있기 ..

HTML ' TEXT INPUT ' CSS div.wrap { width: 100%; height: 40vh; background-color: #2d2d2d; } div.wrap p { color: #fff; font-size: 40px; text-align: center; line-height: 40vh; font-family: 'Poppins', sans-serif; } .noise { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1001; background-image: url('https://i.ibb.co/x3TCktM/645cbb8ec449398255b76326-noise.gif'); background-position: 0..

안녕하세요 무택입니다 :) 오늘은 자바스크립트로 HTML 내에 코드를 어떻게 넣을 수 있는지 알아보겠습니다. 필요에 따라 HTML 내에 하드코딩식으로 넣을 수도 있지만 하나의 방법으로 자바스크립트로 어떻게 넣는지 알아보겠습니다🤔 왜 JS를 이용해서 넣을까? 단순히 한 부분에 간단한 코드를 넣는다고 하면 하드코딩으로 직접 HTML 코드를 넣으면 편합니다. 하지만 넣어야 하는 코드가 `input_text`라는 클래스를 가진 요소 앞에 모두 넣으려고 한다면 하드코딩으로 하기 힘듭니다. 그렇기 때문에 JS를 활용하면 특정 클래스나 아이디 등의 관련된 위치에 넣을 수 있는 편의성이 있습니다. HTML/CSS post JS window.addEventListener('load', function () { let p..

안녕하세요 무택입니다 :) 오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이 세 개 적용에 따라 차이점이 있을까 궁금해졌습니다. 아래에서 바로 확인해 보시죠🤔 폰트 적용 방법 차이 1. CDN 적용하는 방법 중 하나인 CDN에서 불러오는 방법은 파일이 업로드된 서버에서 바로 불러오는 방법입니다. @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); 위처럼 파일 경로에 'cdn'이 들어가는 곳에서 파일을 불러다 쓰는 게 cdn 방식이고 위 코드 두 가지 중..

안녕하세요 무택입니다 :) 오늘은 스크롤 트리거에 대해 설명해보려고 합니다. 스크롤을 활용해서 웹페이지를 동적으로 만들어 줄 수 있는 라이브러리인데 너무 좋은 라이브러리라서 보시면 활용할 곳이 정말 많을 것 같습니다😊 스크롤 트리거, 왜 사용할까요? 동적인 웹 구현을 하기 위해서는 자바스크립트가 거의 필수로 들어가야 합니다. JS를 활용한 기능들 중 스크롤 위치에 따른 기능 구현이 많이 필요한데 페이지마다 자바스크립트만으로 구현하기에는 복잡하고 사용성이 떨어지기 때문에 편하게 스크롤 위치를 감지하고 기능을 넣을 수 있는 스크롤 트리거 라이브러리를 사용하면 쉽고 빠르게 동적인 기능을 만들 수 있습니다. 코드 및 설명 HTML/CSS .full_screen { width: 100%; height: 100vh..

아이콘 등장 효과 See the Pen 카드 hover 효과(아이콘 등장 모션) by TytanLee (@TytanLee) on CodePen. 텍스트보단 아이콘을 보여주고 싶을 때 사용할만한 모션 참고 : 서핏 커리어 프로필 페이지

안녕하세요 무택입니다 :) 오늘은 저번 Slick-slider의 dot을 커스텀한 글에 이어서 이번에는 Swiper의 dot을 커스텀하는 방법에 대해서 써보려고 합니다. 아래에서 바로 확인하시죠. Slick-slider의 Dot을 커스텀하는 방법은 아래 글을 참고해 주세요. https://mu08.tistory.com/107 Swiper 라이브러리의 Dot을 커스텀하는 방법 HTML/CSS Swiper 1 Swiper 2 Swiper 3 꼭 swiper의 js파일과 css파일을 불러와야 적용이 됩니다. JS var bullet = ['슬라이드1', '슬라이드2', '슬라이드3']; var swiper = new Swiper('.swiper-container', { pagination: { el: '.sw..