WEB/JavaScript
image 조작
이미지 크기 변경 및 사진 변경 이미지 롤오버 이미지 이미지 이미지로 토글 버튼 만들기 이미지 18개 이미지 연속 변경 이미지 viewer : 방향키로 이미지 이동 이미지 숫자를 입력받아 이미지 변경하기 이미지
분류 전체보기
WEB/JavaScript
[JavaScript] collection(내장배열)
collection 내장 배열(=컬렉션) 문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다. 태그에 접근하기 위한 도구이다. 1. window.document.images 현재 문서에 있는 모든 요소들의 컬렉션을 반환한다. 페이지에 있는 이미지를 접근하고 조작하는 데 사용된다. 이미지 2. window.document.links 현재 문서에 있는 모든 href 속성을 가진 요소들의 컬렉션을 반환한다. 페이지에 있는 모든 하이퍼링크에 접근할 수 있다. 링크 네이버 구글 다음 앵커 앵커1 앵커2 3. window.document.anchors 현재 문서에 있는 모든 name 속성을 가진 (앵커) 요소들의 컬렉션을 반환한다. 주로 링크의 목적지로 사용되는 앵커 태그에 접근하는 데 사용된다. 링크 ..
카테고리 없음
[기타] hELLO 스킨 4.2.1버전과 4.1.4버전 비교
본문 폰트 크기를 키우고 싶어 계속 검색을 해보았지만 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 위 블로그에서 과거 버전을 다운로드 할 수 있다.
WEB/JavaScript
[JavaScript] BOM - screen, loaction, history
window 자식 객체로는 history, screen, navigator, location, document가 있다. 이 중 screen, location, history 객체를 알아보고자 한다. 🔻screen 객체🔻 화면 정보를 제공한다. 속성 availWidth, availHeight : 작업표시줄을 제외한 화면크기 🔻location 객체🔻 현재 창의 페이지주소와 관련된 객체를 참조한다. 🔶전역이벤트로 단축키 만들기 네이버(n) 구글(g) 다음(d) 화면에서 n, g, d를 누르면 네이버, 구글, 다음으로 접속된다. 🔻history 객체🔻 브라우저가 방문한 탐색 기록을 접근한다. 메소드 back : 이전페이지로 이동 forword : 다음페이지로 이동 go(위치) : -1(이전페이지), 1(다음페이..
WEB/JavaScript
[Javascript] BOM - window
🔻window 객체🔻 최상위 root 객체이다. window. 생략이 가능하다. 메소드 window.open(URL, name, options) : url 주소 페이지를 새창을 통해 나타낸다. URL : 새창의 URL (외부/내부 URL) name : 새창 이름 (빈 칸으로 두면 새창이 계속 열리고, 지정하면 창이 하나만 열린다.) options : 새창 옵션들 (주로 크기를 설정한다.) window.close() : 현재 윈도우를 닫는다. 🔶새 창 열기 및 닫기 window 객체 창 제어하기 window.open이 object 를 반환하는 특성을 이용한다. 새로 생성한 자식 창을 child 변수로 저장하여 새 창에 접근할 때 child로 접근한다. 🔶자식창에서 부모창 접근하기 자식 페이지 부모창의 wi..
WEB/JavaScript
[JavaScript] HTML 속성 조작하기
🔻HTML 속성 조작하기🔻 1. 태그를 찾아 속성을 조작할 수 있다. 2. 내용물(PCDATA)을 조작할 수 있다. 🔶조작 규칙 1. HTML의 대부분 속성은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다. txt1.value = '홍길동' 2. HTML 속성명이 복합어로 되어 있으면 JavaScript에서는 캐멀표기법으로 제공한다. txt1.maxLength = 5; 3. 플래그 타입의 속성은 boolean 값으로 조작한다. txt1.readOnly = true; 4. 열거형 타입의 속성 및 색상 속상은 문자열로 조작한다. window.document.body.bgColor = 'blue'; 🔶조작 하기 JavaScript로 태그의 속성 제어하기 버튼을 누를 때마다 배경색이 변경되고 버튼의 ..
WEB/JavaScript
[JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트
🔻Event🔻 객체에서 발생하는 사건 언제 발생할지 예측 불가능하다. 🔻Event Handling🔻 이벤트를 처리 및 등록한다. 언제 발생할지 예측 불가능한 사건에 대비하여 미리 처리할 코드를 준비한다. 사건이 발생하면 준비한 코드를 자동으로 실행할 수 있다. 오라클의 트리거 개념과 유사하다. 이벤트 등록 onXXX 속성(프로퍼티)로 제공한다. 1. 정적 이벤트 HTML 태그에 적용한다. btn2 클릭시, text box에 '홍길동' 삽입된다. 2. 동적 이벤트 자바스크립트에서 사용한다. Event btn3 클릭시, text box에 '홍길동' 삽입된다. 🔻마우스 이벤트🔻 onmouseXXX 으로 제공한다. 1. onmouseover / onmouseenter 해당 객체 영역에서 마우스 커서가 진입하는 ..
WEB/JavaScript
[JavaScript] BOM(Browser Object Mode)
🔻HTML 계층 구조🔻 HTML 계층 구조는 Tree 구조로 이루져있다. 그 조직을 이루는 방식이 BOM, DOM이 있다. 1. BOM 초창기 모델, 현재도 사용하고 있다. 선택적 모델 : 계층 구조에 일부 태그만 포함되어 있다. 계층 구조에 포함되지 않은 태그는 조작이 불가능하다. 조작 가능 태그 : 이미지, 링크, 폼태그 접근 방법 : 태그의 name을 사용하여 검색한다. (id, class는 인식할 수 없다.) 최상위 계층은 window 이다. 2. DOM 현재 발전된 모델 전역 모델 : 계층 구조에 모든 태그가 포함되어 있다. 모든 태그 조작이 가능하다. 🔻BOM(Browser Object Mode)🔻 html, css를 조작한다. JavaScript를 사용하여 브라우저 창의 크기, 위치, 히스토..
WEB/JavaScript
[JavaScript] 배열, Array (선언, 대입, 꺼내기)
🔻배열, Array🔻 자바 Array의 외형과 ArrayList의 성질(길이가변, 자료형object)을 가지고 있다. Array 내장 객체를 사용한다. 배열 선언 및 대입하기 초기화 리스트 값 추가 및 꺼내기 push와 pop 사용이 가능하다.
