🔻select box 핸들링🔻 기초 코드 셀렉트 박스 사과 딸기 바나나 키위 망고 동적으로 요소 추가하기 태그로 생성한다. var op = new Option(); 우리 눈에는 object로 보이지만 옵션 태그 가 생성된것이다. value와 text를 추가해준다. function m3() { var op = new Option(); op.value = 'f6'; // op.text = '파인애플'; // 파인애플 } 하지만 부모인 select 태그에 연결을 하지 않아 보이지 않는다. select 에 add로 + 연결을 해준다. function m3() { var op = new Option(); op.value = 'f6'; op.text = '파인애플'; // + 연결 sel1.options.add(o..
🔻radio 핸들링🔻 기초코드 라디오 버튼 흰색 검은색 빨간색 노란색 파란색 선택한 값의 value를 가져오기 alert(event.target.value); event.target.value 를 이용하여 가져온다. 배열 상태의 라디오버튼들이 변화가 이뤄질 때 m1 메소드가 실행된다. 라디오 버튼 선택에 따라 배경 색 변경하기 배경이 검정색 일 때 글자색 바꿔주기 🔻전체 코드🔻 라디오 버튼 흰색 검은색 빨간색 노란색 파란색
🔻checkbox 핸들링🔻 버튼으로 checkbox 체크/체크해지 전체 체크 박스 만들기 전체 체크를 할 요소들을 for으로 이벤트 객체의 결과를 반영한다. for (var i=0; i
🔻회원가입 시, 유효성 검사 코드🔻 기본 코드 회원 가입 이름 나이 아이디 암호 암호확인 버튼( submit VS button) 회원 가입 submit 버튼은 전송만을 목적으로 하는 객체이므로 되도록 조건을 걸지 않는다. 조건을 작성하고자하면 submit 버튼이 아닌 일반 button으로 작성한다. 'document.form1.submit();' 을 사용하면 폼이 전송된다. 이름 유효성 검사 txtname.focus(); 빈 칸인 경우에는 focus 메소드를 사용하여 칸에 포커스가 가도록 한다. txtname.select(); 값을 수정해야하는 경우에는 select 메소드를 사용하여 전체 드래그 상태로 만들어준다. txtname.value=''; 텍스트 박스 초기화 할 때는 위와 같이 작성한다. //이름..
🔻메시지 박스🔻 다른 언어에서는 대화상자(Dialog Box)라고 한다. 1. alert void alert(message) 사용자에게 메시지 전달하기 위해 사용한다. 메시지 박스 2. confirm boolean confirm(message) 사용자에게 확인을 받아 그 결과값으로 진행한다. 메시지 박스 3. prompt string prompt(message, value) 사용자에게 값을 입력받는다. 디자인 바꾸기가 어려워서 잘 사용하지 않는다. 메시지 박스
이미지 크기 변경 및 사진 변경 이미지 롤오버 이미지 이미지 이미지로 토글 버튼 만들기 이미지 18개 이미지 연속 변경 이미지 viewer : 방향키로 이미지 이동 이미지 숫자를 입력받아 이미지 변경하기 이미지
collection 내장 배열(=컬렉션) 문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다. 태그에 접근하기 위한 도구이다. 1. window.document.images 현재 문서에 있는 모든 요소들의 컬렉션을 반환한다. 페이지에 있는 이미지를 접근하고 조작하는 데 사용된다. 이미지 2. window.document.links 현재 문서에 있는 모든 href 속성을 가진 요소들의 컬렉션을 반환한다. 페이지에 있는 모든 하이퍼링크에 접근할 수 있다. 링크 네이버 구글 다음 앵커 앵커1 앵커2 3. window.document.anchors 현재 문서에 있는 모든 name 속성을 가진 (앵커) 요소들의 컬렉션을 반환한다. 주로 링크의 목적지로 사용되는 앵커 태그에 접근하는 데 사용된다. 링크 ..
본문 폰트 크기를 키우고 싶어 계속 검색을 해보았지만 hELLO 스킨을 적용한 후 폰트 크기를 커스터마이징한 글을 찾지못하였다. 혹시나하여 스킨 버전을 다운그레이드해보았는데 폰트 크기 및 볼드체도 확실히 구분되게 보였다. https://pronist.tistory.com/5#%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-1 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 pronist.tistory.com 위 블로그에서 과거 버전을 다운로드 할 수 있다.
