Web Dev (109) 썸네일형 리스트형 CSS : <div class="overflow-hidden ..."></div> overflow-hidden 이 뭐지 ? hidden Tailwind CSS의 클래스 중 하나로, 해당 요소의 내용이 넘칠 때 넘친 부분을 감출 수 있도록 설정하는 클래스입니다. 이 클래스를 사용하면 요소의 크기를 벗어나는 내용이 자동으로 잘려서 보이지 않게 됩니다. overflow-hidden 클래스는 일반적으로 컨테이너나 박스 형태의 요소에 적용되며, 다양한 상황에서 유용하게 사용될 수 있습니다. 예를 들어, 이미지 갤러리, 카드 레이아웃, 뉴스 기사 등의 요소에서 내용이 넘칠 경우, 이 클래스를 사용하여 넘친 부분을 감출 수 있습니다. Tailwind CSS는 매우 유연한 CSS 프레임워크로, 다양한 유틸리티 클래스를 제공합니다. 이러한 클래스들을 조합하여 원하는 디자인을 쉽게 구현할 수 있습니다. overflow-hidden 클래스는 그.. Javascript 배열 변수에 공백 값이 자꾸 들어가는 경우 filter() 메서드 Javascript 배열에서 공백 값을 제거하려면 filter() 메서드를 사용할 수 있습니다. 다음과 같이 코드를 수정하면 됩니다: wr_7 = wr_7.filter(function(value) { return value.trim() !== ''; }); 이 코드는 wr_7 배열을 순회하면서 각 요소의 앞뒤 공백을 제거한 후, 공백이 아닌 값들로 새로운 배열을 생성합니다. 이렇게 생성된 새로운 배열이 다시 wr_7에 할당되면서 공백 값이 제거됩니다. HTML JSTL - , 태그 를 사용하는 경우 - ${trimmedItem} wr_7_list 배열에서 공백 값을 제거하려면 forEach 루프 내에서 각 요소에 접근하기 전에 공백을 제거해야 합니다. 다음과 같이 코드를 수정할 수 있습니다: 위의 코드에.. Javascript 첨부파일 용량 제한하는 방법 쉽습니다 feat JQuery HTML -파일 첨부시 250KB 이하 용량만 첨부 가능 위와 같은 파일 업로드 input 태그를 만들고 파일을 업로드 할 때 용량 제한은 서버 관리를 위해 매우 중요하다. 너무 큰 용량의 파일의 경우 해당 파일을 서버까지 전송하는데 많은 시간과 에러를 발생시킨다. JAVASCRIPT $(document).ready(function() { $('.upload_file').change(function() { var file = this.files[0]; var maxSize = 250 * 1024; // 250KB 제한 (1KB = 1024 bytes) if (file.size > maxSize) { alert("파일 크기는 250KB 이하여야 합니다."); $(this).val(''); // 선택한 파일.. Netlify 에 React.js Web 웹페이지 Deploy 배포 하는 방법 쉬워요! Netlify는 웹 애플리케이션 및 동적 웹사이트를 위한 구축, 배포 및 서버리스 백엔드 서비스를 포함하는 개발 플랫폼을 제공하는 원격 최초의 클라우드 컴퓨팅 회사입니다. 제한적으로 웹 페이지 배포 서비스를 무료로 제공해주고 있습니다. 배포하는 가장 쉬운 방법은 github 깃허브에 내가 개발한 코드가 올라가 있으면 간편합니다. 회원 가입을 진행해줍니다. 여러가지 방법으로 로그인 할 수 있습니다. 보면 하나의 team 에 site 를 배포 할 수있습니다. Add new site 버튼을 클릭합니다. 저 같은 경우는 github로 리포지토리에서 내려 받았습니다. 위에는 예시 입니다. 개발한 코드의 폴더 명을 base directory에 적어 줍니다. build command의 경우 npm rund build.. JAVA 백엔드 api 자동 등록방지 코드 음성 출력 코딩 자동 등록방지 코드 음성 출력 코딩 알려드립니다. 우선 저기 수시로 바뀌는 자동등록방지 코드 값을 가져와야 하는데 저의 경우는 이미 누군가가 만들어 놓은게 있어서 쉽게 값을 가져 올 수 있었습니다. Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME); 뭐 어째든 해당 값이 105135 번이면 해당 값을 저기 스피커 모양의 버튼을 누르면 가져오면 되는 겁니다. controller 는 간단히 만들었습니다. [백엔드 api] @RequestMapping("/captchaSound") @ResponseBody public String captchaSound(HttpServletRequest req, HttpServletResponse .. Javascript : 웹페이지 원하는 위치에 애니메이션 focus 주는 방법 feat JQuery 방법 예를 들어 이런 포커스 주기를 원하는 HTML 태그가 있습니다. 동의합니다. 해당 태그를 구분할 수 있는 값은 여러 방식이 있지만 우선 class , name , id 값이 있습니다. JQuery 사용 법은 jQuery는 JavaScript 기반의 오픈 소스 라이브러리로, HTML 문서의 구조를 조작하고 상호 작용할 수 있는 강력한 기능을 제공합니다. jQuery를 사용하면 간단하고 효과적으로 DOM 요소를 선택하고 조작할 수 있으며, AJAX를 통해 서버와 통신하는 등 다양한 작업을 수행할 수 있습니다. jQuery를 사용하기 위해서는 먼저 해당 라이브러리를 HTML 문서에 포함시켜야 합니다. jQuery를 다운로드하여 로컬에 저장하거나, CDN(Content Delivery Network)을 통해 온.. Java (Spring boot): Tomcat 에러 [The following method did not exist: org.apache.tomcat.util.modeler.Registry.disableRegistry()] 자바 스프링 부트 공부를 하는데 시작 부터 막힌다 계속 에러가 발생하는데 이놈의 자바 에러는 콘솔창에 너무 장황하게 써 놔서 에당초 보기도 싫게 만든다. 부트를 실행했을 때 나오는 에러다. . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.4.5) 2021-04-20 22:47:29.229 INFO 16316 --- [ main] co.. Next.js 개발 - 넥스트.js Dynamic Routes 을 어떻게 사용하면 될까? Defining routes by using predefined paths is not always enough for complex applications. In Next.js you can add brackets to a page ([param]) to create a dynamic route (a.k.a. url slugs, pretty urls, and others). 사전에 정의된 경로를 사용하는 라우팅은 복잡한 어플리케이션에 항상 적합하지 않습니다. Next.js 에서는 {}을 사용하여 동적인 라우팅이 가능하게 합니다. import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { pi.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
