본문 바로가기

분류 전체보기214

HTML5 텍스트 선택 HTML5 텍스트 선택 텍스트 선택 객체 생성 텍스트 선택 상태에 대한 정보를 가져오기 위해서는 우선 객체를 생성을 해야 합니다. 객체 생성은 window 객체나 document 객체의 getSelection() 메서드를 사용합니다. 브라우저의 호환성을 생각한다면 window 객체의 getSelection() 메서드를 사용하기를 권장하고 있습니다. getSelection() 메서드 형식 window.getSelection( ) 예제 function getSelect( ) { var select = window.getSelection( ); // 객체를 생성함 var string = select.toString( ); // 선택한 텍스트를 문자열로 가져옴 alert(string); } 선택 영역 지정 관련.. 2022. 6. 9.
HTML5 텍스트 편집 HTML5 텍스트 편집 기존에 텍스트 편집이 불가능한 요소들까지 텍스트 편집이 가능하도록 지정할 수 있습니다. contenteditable 속성 contenteditable 속성은 특정 요소의 내용을 편집할 수 있도록 지정하는 역할을 수행합니다. 만약 contenteditable 속성값을 지정하지 않고 contenteditable 속성만을 지정한다면 자동으로 true의 의미를 갖습니다. contenteditable 속성의 값 값 설명 true 편집 가능을 의미함 false 편집 불가능을 의미함 inherit 부모 요소로부터 생성됨을 의미함 예제 designMode 속성 designMode 속성은 페이지 전체에 편집 속성을 부여하고자 할 때 사용합니다. designMode 속성의 값으로는 on, off 두.. 2022. 6. 8.
HTML5 포인터 변경 HTML5 포인터 변경 포인터 변경 속성 속성 변경 dropEffect 드래그가 끝날때 어떤 효과를 사용할지 지정함 (값: none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized) effectAllowed 드래그하는 동안 어떤 효과를 사용해도 되는지 지정함 (값: none, copy, link, move) 일반적으로 effectAllowed 속성은 드래그시 발생하는 dragstart 이벤트에 지정하고, dropEffect 속성은 드롭할 때 발생하는 dragenter 이벤트와 dragover 이벤트에서 사용합니다. 예제 function dropset(event) { event.preventDefault( ); event.dataTr.. 2022. 6. 7.
HTML5 드래그 앤 드롭 HTML5 드래그 앤 드롭 드래그 앤 드롭은 마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것을 의미합니다. draggable 속성 draggable 속성은 드래그 속성을 부여하는 것을 의미합니다. draggable 속성의 값이 true 이면 드래그를 할 수 있는 것이고, false 이면 드래그를 하지 못합니다. a 요소로 생성한 링크나 div 요소로 생성한 영역도 드래그가 가능합니다. 예제 드래그 앤 드롭 관련 이벤트 이벤트 설명 dragstart 드래그 시작시 발생함 drag 드래그 중에 발생함 dragend 드래그 종료했을 때 발생함 dragenter 드래그 요소가 드롭 요소 범위 안에 들어올 때 발생함 dragleave 드래그 요소가 드롭 요소에서 나갔을 때 발생함 dragover 드래그 요소가 .. 2022. 6. 6.
HTML5 미디어 이벤트 처리하기 HTML5 미디어 이벤트 처리하기 미디어와 관련된 주요 이벤트 이벤트 설명 play 미디어 파일을 재생할 때 발생함 timeupdate 재생 중에 지속적으로 발생함 waiting 다음 프레임의 다운 로드를 대기함 ended 재생 종료함 progress 미디어 파일을 로드할때 지속적으로 발생함 loadstart 미디어 파일 로드 시작시 발행함 load 데이터 다운 로드가 완료될 때 발생함 error 미디어 파일을 재생하거나 로드할때 에러가 있을 경우 발생함 networkState 네트워크 접속 상태를 나타냄 readState 미디어 파일의 다운 로드 상태를 나타냄 미디어 이벤트 처리하기 미디어 이벤트는 addEventListener( ) 메서드를 사용하여 등록합니다. addEventListener( ) 메.. 2022. 6. 5.
HTML5 오디오와 비디오 제어하기 HTML5 오디오와 비디오 제어하기 오디오와 비디오 재생 제어하기 미디어 파일 제어를 위한 메서드나 속성은 오디오 파일이나 비디오 파일이나 사용 방법이 모두 동일합니다. 미디어 파일 제어와 관련된 메서드 메서드 설명 load( ) 미디어 파일을 로드함 play( ) 미디어 파일을 재생함 pause( ) 미디어 파일을 일시 정지함 재생 제어하기 예제 // 재생 버튼 생성함 미디어 파일 제어 및 상태 관련 속성 속성 설명 src 미디어 파일 경로를 지정함 currentSrc 재생 중인 미디어 파일의 URL currentTime 현재 재생 위치를 초 단위로 반환함 duration 미디어 파일의 총 재생 시간을 초 단위로 반환함 paused 일시 정지 상태인지의 여부를 반환함 defaultPlaybackRate.. 2022. 6. 4.

티스토리툴바