분류 전체보기 (395) 썸네일형 리스트형 [javascript] 3d 스틸 박스 (작성중) HTML 삽입 미리보기할 수 없는 소스 [Javascript] HTML5 dragable API 를 사용하여 요소의 위치를 바꾸어 보자 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. Drag and Drop API API는 웹 애플리케이션에서 요소를 드래그하고 다른 위치로 놓는 기능을 구현하는 데 사용된다. 이 API는 기본적인 드래그 앤 드롭 동작을 처리하기 위한 이벤트 및 메서드를 제공하고 있으며, 현재도 계속해서 새로운 기능들이 추가되고 있다. 그래서 오늘은 이 API 를 활용해서 요소 끼리 위치를 바꾸는 간단한 기능을 구현해볼 생각이다. 기본 개념 코드 작성 이전에 우선적으로 필요한 환경 설정과 기본적인 메소드나 기능에 대해 알아 보자. 초기 셋팅 | 필수 우선 각 HTML 요소가 드래그를 가능하게 하려면 각 요소의 속성으로 draggable 을 true 로 지정 해줘야 .. [tailwindcss] NextJS & tailwindcss 에서 스크롤바 커스텀[간략 정리] tailwindcss 에서는 별도로 스크롤 바를 꾸밀 수 있는 유틸 클래스를 제공하지 않는다. 다만, NextJs 의 global.css 에서 별도로 스크롤바에 스타일을 적용할 수 있다. global.css 현재 불필요한 스타일 지정을 제거하고, global.css 파일을 살펴본다면 다음 형태와 같을 지도 모른다. @tailwind base; @tailwind components; @tailwind utilities; /* 생략 */ 위 옵션을 건드리지 말고, 다음과 같이 하단에 ::-webkit-scrollbar-* 를 지정하면 스크롤바를 커스텀 할 수 있다. /* 스크롤바 넓이 지정 */ ::-webkit-scrollbar { width: 5px; } /* 스크롤바 트랙 꾸미기 */ ::-webkit.. [개인 정리]프론트엔드 상태관리 라이브러리 비교(redux, recoil, zustand) 보호되어 있는 글입니다. [next.js] 클라이언트 측에서 POST 로 정보 받을 때 서버에서 읽는 코드 보호되어 있는 글입니다. [CSS] & | SCSS 를 쓰지 않고도 CSS 도 중첩 사용이 가능하게 해줌 원래 SCSS 에서만 사용 가능했던 중첩(nesting) 이 CSS 에서도 사용이 가능해졌다. (이 사실을 모르고 사용하지 않는 경우가 많은 것 같다. ) 예를 들어, SCSS 에서는 다음과 같이 중첩이 가능했다. .section { h2 { color: #008080; } p { font-size: 16px; } } 하지만 이제는 CSS 에서도 다음과 같이 중첩 사용이 가능해졌다. .parent-rule { /* parent rule properties */ .child-rule { /* child rule properties */ } } 그러나, 현재 까지는 제한 사항이 존재한다. 바로 유형선택기에서는 사용이 지원하지 않는다는 점이다. 여기서 유형선택기(type selectors)란 아래와 같이 흔히.. [HTML] <pickture> | 브라우저 크기에 대한 최적화 용도로 사용하는 이미지 태그 보통 웹 사이트에서 이미지를 화면 상에 그리기 위해서 태그를 단일로 사용한다. 그리고 브라우저의 크기에 대응하기 위해 퍼센트(%) 나 vw 를 사용하거나 미디어 쿼리를 사용하기도 한다. 하지만 이런 경우에는 이미지의 종횡비가 깨지거나 화질이 깨지는 등의 문제가 발생할 수 있고, 이는 결국 사용자 경험에 부정적일 수 밖에 없다. 이 때, 이를 개선하고 방지하기 위한 기능을 제공하는 태그를 감싸고, source 태그와 함께 사용할 수 있다. 용도 예시1) 다양한 해상도에 대응하는 이미지 제공 pickture 태그를 사용하면, 다양한 해상도 및 뷰포트 크기에 대응하여 다른 이미지를 제공할 수 있다. 브라우저 크기에 따라서 사용자에게 최적화된 이미지를 제공할 수 있기 때문에, 결과적으로 로딩 시간을 단축하고 대.. [React lib] 리액트에서 유효성 검사 라이브러리 4가지 간략 소개 및 링크 정리 보통 회윈가입 form 을 제출하기 전에 사용자가 입력한 데이터가 사이트에서 요구하는 조건을 만족하는지(유효성) 검사를 실시한다. 요구되는 사항 자체가 단순한 경우에는 바닐라 자바스크립트나 HTML form 을 구성하는 요소가 내부적으로 가지는 속성으로 간단하게 처리할 수 있지만, 요구되는 사항이 복잡한 경우에는 이 모든 것을 일일이 다루기에는 코드가 너무 길어져서 가독성이나 재사용성 등에 있어서 그리 좋은 처리는 아닐 수 있다. 따라서 언제든지 사항에 따라 활용할 수 있도록 오늘은 강력하면서도 단순하게 유효성을 체크할 수 있는 유효성 검사 라이브러리에 대한 간략한 소개와 사이트 링크에 대한 정보를 정리해두고자 한다. React Hook Form React Hook Form은 React Hook을 사용하.. 이전 1 ··· 19 20 21 22 23 24 25 ··· 50 다음
