부트스트랩(Bootstrap)을 사용하여 card-body안에 이미지를 배경 형태로 넣으려면 아래와 같이 코드를 작성하면 됩니다. 부트스트랩 예시 제목 Card Body 본문 위와 같이 card-body의 css 속성에 backgound-image를 넣으면 되는데요. 위의 예제를 그냥 실행하면 아래와 같이 빈칸으로 card-body가 표현됩니다. 이제 백그라운드 이미지를 다운로드 한 후, url에 아래와 파일명을 입력합니다. 그리고 실행을 하게 되면 아래와 같이 card-body에 백그라운드 이미지 형태로 출력된 것을 확인할 수 있습니다. 위와같이 class를 직접 커스터마이징하는 방법도 있지만, 백그라운드 이미지는 일반적으로 1회성이기 때문에 css를 별도로 수정하는 것보다 html 태그 내에서 sty..
웹으로 회원가입 페이지를 만들 때, 값을 체크하기 위해서 입력 후 점검하는 펑션 등을 호출해야 되는 경우가 있는데요. 이렇게 Html에서 포커스를 잃어버렸을 때 발생 시키는 액션을 onblur 이벤트라고 합니다. 예를 들어 패스워드를 입력한 후, repeat 패스워드를 입력했다고 가정을 하면 repeat 패스워드 입력 후 onblur 이벤트를 발생하여 패스워드를 체크하면 사용자는 다른 값을 입력하기 이전에 여부를 알 수도 있습니다. onblur 예시 위 예시는 input text에 onblur 이벤트를 넣었고, 이탈할 경우 1이라는 값이 들어있는 경고창이 뜨게 됩니다. onblur 부여하기 Html 자바스크립트 object.onblur = function() {스크립트}; 자바스크립트 (addEventL..
코드펜(Codepen) 코드펜(Codepen)은 사용자가 직접 만든 HTML, CSS, 자바스크립트(Javascript)를 테스트하고 시연하기 위한 온라인 커뮤니티 사이트입니다. 코드펜에서는 펜(pen)이라고 불리는 코드 조각을 만든 후 이를 테스트 할 수 있습니다. 코드펜에서 테스트를 하는 방법은 다음과 같습니다. https://codepen.io/pen/ Create a New Pen ... codepen.io 위의 사이트를 직접 입력하여 실습을 하던지, 아니면 코드펜 사이트에서 Start Coding이라는 버튼을 클릭하여 펜을 만드는 방법이 있습니다. 아래의 이미지는 Start Coding을 눌러서 HTML을 실습한 내용을 캡쳐해봤습니다. CSS와 JS(Javascript)도 입력하여 다양한 테스트..
