부트스트랩(Bootstrap)을 사용하여 card-body안에 이미지를 배경 형태로 넣으려면 아래와 같이 코드를 작성하면 됩니다. 부트스트랩 예시 제목 Card Body 본문 위와 같이 card-body의 css 속성에 backgound-image를 넣으면 되는데요. 위의 예제를 그냥 실행하면 아래와 같이 빈칸으로 card-body가 표현됩니다. 이제 백그라운드 이미지를 다운로드 한 후, url에 아래와 파일명을 입력합니다. 그리고 실행을 하게 되면 아래와 같이 card-body에 백그라운드 이미지 형태로 출력된 것을 확인할 수 있습니다. 위와같이 class를 직접 커스터마이징하는 방법도 있지만, 백그라운드 이미지는 일반적으로 1회성이기 때문에 css를 별도로 수정하는 것보다 html 태그 내에서 sty..
jQuery에서 가장 기본적으로 시작해야 하는 것은 바로 Selector입니다. 어떤 웹페이지 요소를 핸들링하기 위해서는 어떤 요소를 선택했는지를 알아야 하기 때문입니다. jQuery의 Selector 기능에 대해서 알고 이해해보는 시간을 가져보도록 하겠습니다. jQuery Selector 개념 jQuery Selector는 웹 페이지의 요소를 선택하기 위한 강력한 기능이며 이를 통해서 특정 요소를 빠르게 찾아 조작하거나 스타일을 변경합니다. jQuery Selector는 CSS를 다룰 수 있는 사람에게는 유사하게 동작하기 때문에 쉬울 수 있으며, 복잡한 DOM 구조에서도 원하는 요소를 빠르게 찾을 수 있습니다. Selector 예제 Selector는 다양한 기능들을 제공하지만 대표적으로 몇가지의 예제를..
제이쿼리(jQuery)는 자바스크립트 라이브러리(Javascript library)로, Html 문서 조작, 이벤트 처리, 애니메이션 등 다양한 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이번 포스팅에서는 jQuery의 기본 개념과 사용법을 코드 예제를 곁들여서 자세히 살펴보도록 하겠습니다. jQuery의 라이브러리 로딩 jQuery 라이브러리를 사용하기 위해서는 먼저 jQuery 라이브러리 파일을 HTML 문서에 로딩해야 합니다. jQuery 라이브러리 파일은 jQuery 공식 웹사이트에서 다운로드하거나, CDN(Content Delivery Network)에서 제공하는 파일을 사용할 수 있습니다. HTML 예시 선택자(Selector) Query를 사용하여 HTML 요소를 선택하기 위해..
웹으로 회원가입 페이지를 만들 때, 값을 체크하기 위해서 입력 후 점검하는 펑션 등을 호출해야 되는 경우가 있는데요. 이렇게 Html에서 포커스를 잃어버렸을 때 발생 시키는 액션을 onblur 이벤트라고 합니다. 예를 들어 패스워드를 입력한 후, repeat 패스워드를 입력했다고 가정을 하면 repeat 패스워드 입력 후 onblur 이벤트를 발생하여 패스워드를 체크하면 사용자는 다른 값을 입력하기 이전에 여부를 알 수도 있습니다. onblur 예시 위 예시는 input text에 onblur 이벤트를 넣었고, 이탈할 경우 1이라는 값이 들어있는 경고창이 뜨게 됩니다. onblur 부여하기 Html 자바스크립트 object.onblur = function() {스크립트}; 자바스크립트 (addEventL..
회원가입 페이지는 일반적으로 회원값을 전송하기 전에 자바스크립트(Javascript)에서 폼에 있는 값을 검증한 후, 이상이 없을 경우 페이지에 전송하게 됩니다. Javascript로 패스워드와 패스워드 확인 컬럼을 체크한 후 이상이 없을 경우 폼의 값을 넘기는 자바스크립트와 해당 기능을 어떻게 submit에 넣는지 알아보도록 하겠습니다. Javascript Code function validatePassword() { var passwd = document.getElementById("password").value; var repeatPasswd = document.getElementById("repeat-password").value; if (password != confirmPassword) { a..
JSP에서 Include란? Include는 JSP, HTML과 같은 리소스의 내용을 현재 페이지에 포함을 시키는 것으로, 구조가 복잡하고 여러명의 개발자가 동시에 개발하기에 용이한 기능입니다. 우리가 프로그래밍을 하는데 한 메소드에 다양한 기능을 몽땅 넣어버리면 어떻게 될까요? 특정 메소드에 있는 기능이 다른 곳에서도 필요하게 될 경우 N번 이상의 중복 작업을 해야 되는 문제가 있게 되고, 다른 페이지만 수정해서 놓치는 문제 등이 있을 수 있으며, 동료 개발자가 있다면 역시 분리해서 작업하기 상당히 힘들어 질 것입니다. Include의 장점 장점을 정리하자면 다음과 같습니다. 동시에 작업을 할 때 용이함 프로젝트 구조가 분리되면서 페이지가 심플해짐 동일한 작업을 여러번 할 필요가 없음 동일한 기능이 여..
코드펜(Codepen) 코드펜(Codepen)은 사용자가 직접 만든 HTML, CSS, 자바스크립트(Javascript)를 테스트하고 시연하기 위한 온라인 커뮤니티 사이트입니다. 코드펜에서는 펜(pen)이라고 불리는 코드 조각을 만든 후 이를 테스트 할 수 있습니다. 코드펜에서 테스트를 하는 방법은 다음과 같습니다. https://codepen.io/pen/ Create a New Pen ... codepen.io 위의 사이트를 직접 입력하여 실습을 하던지, 아니면 코드펜 사이트에서 Start Coding이라는 버튼을 클릭하여 펜을 만드는 방법이 있습니다. 아래의 이미지는 Start Coding을 눌러서 HTML을 실습한 내용을 캡쳐해봤습니다. CSS와 JS(Javascript)도 입력하여 다양한 테스트..
