개발자가 되고 싶어서 만든 tistory 개발자가 되고 싶어서 만든 tistory

focus와 blur 사용자가 폼 요소를 클릭하거나 Tab 키를 눌러 요소로 이동하면 해당 요소가 포커스(focus)됩니다. autofocus라는 HTML 속성을 사용해도 요소를 포커스 할 수 있는데 이 속성이 있는 요소는 페이지가 로드된 후 자동으로 포커싱 됩니다. 이 외에도 요소를 포커싱(focusing)할 수 있는 방법은 다양합니다. 요소를 포커싱한다는 것은 일반적으로 '여기에 데이터를 입력할 준비를 하라’는 것을 의미하기 때문에 요소 포커싱이 이뤄지는 순간엔 요구사항을 충족시키는 초기화 코드를 실행할 수 있습니다. 요소가 포커스를 잃는 순간(blur)은 요소가 포커스를 얻는 순간보다 더 중요할 수 있습니다. 사용자가 다른 곳을 클릭하거나 Tab 키를 눌러 다음 폼 필드로 이동하면 포커스 상태의 요..

코딩을 할 때 효과적인 방식은 html은 html파일에만 쓰고 css는 css파일에만 쓰고 자바스크립트는 로직만 처리하게끔 분리하는것이다. 간단한 예시로 어떻게 자바스크립트가 로직을 처리하며 html과 css를 조작할 수 있는지 알아보자. 다음의 html과 javascript 코드가 있다. This worksconst title = document.querySelector("#title"); 여기서 내가 하고싶은건 브라우저에서 클릭이라는 이벤트를 실행할때마다 타이틀의 폰트컬러가 바뀌게 하는 것이다. 이를 실행하기 위해서 필요한건 첫째로 클릭에 대한 새로운 클래스를 선언해주는 거다. h1 { color: #fd79a8; } .clicked { color: #a29bfe; } const CLICKED_CLA..

jsp 코드 나이 계산기 출생한 연도를 입력하세요.

핵심함수 기능 테이블이 초기화 되면서 1. 현재 년, 월 함수 적용하여 표시 2. 이전, 다음 달 누르면 월이 + 또는 -가 되고 테이블 초기화 되어 다시 함수 적용하여 표시 jsp 전체 코드 년 월 일월화수목금토 이전 달 다음 달 css 전체 코드 @charset "UTF-8"; #calendar_wrap{ background: #333; width: 350px; } caption{ font-size: 1.5em; color: orange; padding: 10px; } table, th, td{ color: white; border: 1px solid #666; border-collapse: collapse; } th, td{ width: 30px; padding: 10px; } /* 일요일 빨간색 ..

Lightbox 화면을 채우고 나머지 웹 페이지를 흐리게하여 이미지와 비디오를 표시하는 JavaScript 라이브러리입니다. light box 완성 이미지(클릭하면 확인 가능) 1. 이미지들을 화면에 보이게 한다. light box - sing agin top6 각 장르에서 존버한 가수들 2. 이미지에 마우스를 올려 놓으면 효과적용이 된다. 위 이미지(class="hover-shadow")에 대한 css 코드 body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px ..

Q. 다음과 같이 제시된 문제의 답을 입력한 후 '확인' 버튼을 눌렀을 때 답이 맞으면 알림창에 '정답 입니다' 를, 틀렸으면 '틀렸습니다' 를 출력하도록 자바스크립트로 코드를 작성하세요. 다음 빈칸에 올바른 값을 입력하세요 + = 자바스크립트 프로젝트 북 - 저자 : 권대웅님 책을 보고 정리하였습니다.

1. html 뼈대 잡기 계산기 2. javascript 변수 선언하기 var form = document.forms['cal']; //form name = 'cal' var input = form.getElementsByTagName('input'); ////input - 0~9,+-*%/=clear 버튼 var clear_button = document.getElementsByClassName('clear_button')[0]; //clear 버튼 var result_v = document.getElementsByClassName('result_v')[0]; // = 버튼 document.getElementsByTagName(요소명) document.getElementsByClassName(클래스명)..

jsp 할 일 목록(title) 목록 추가(add-btn) 제목 1 (id=list의 자식 li) 제목 2 (id=list의 자식 li) 제목 3 (id=list의 자식 li) 제목 4 (id=list의 자식 li) 기본 css와 클릭시 적용될 효과 css @charset "UTF-8"; #add-btn{ padding: 5px 10px; border: 0; background: #8080ff; color: white; border-radius: 5px; } ul{ padding: 0; list-style-position: inside; } li{ border-bottom: 1px solid #999; padding: 5px 0; } .active{ background: #ff80ff;} 결과 보기(클릭..