본문 바로가기
728x90

html530

[HTML5] 11-2 브라우저 객체 모델 브라우저 객체 모델(BOM): 브라우저를 객체로 표현한 것 : 특정 객체의 메서드/속성 사용 방법    window 객체: 창에 대한 전반적인 모든 상황을 제어하는 최상위 객체-> 각 윈도우마다 하나의 window 객체가 생성 -주요 메서드    open(), close() 메서드    window.open()메서드   윈도우 크기와 위치 조절-윈도우 크기 -윈도우 위치 예제1) 예제2)    setTimeout()메서드: 지정한 시간이 지난 후에 주어진 코드를 한 번만 실행시키는 메서드  예제1) 예제2 - 재귀적 사용)    setInterval() 메서드: 일정한 시간 간격으로 주어진 함수를 무한히 반복 호출    setInterval(), clearInterval() 메서드 2024. 5. 5.
[HTML5] 11-1 문서 객체 모델 문서 객체 모델(DOM)*문서 객체 -> HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체로 만든 것*DOM -> 브라우저가 HTML 문서에 접근할 수 있도록 정의해 놓은 표준 모델           -> HTML 문서를 분석하고 표시하는 방식*문서가 적재되면 브라우저는 정적으로 DOM 생성: 계층적인 구조를 갖는 트리로 표현 -> DOM 트리: 자바스크립트를 이용하면 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일에 대한 작업 가능-> 결과가 즉각적으로 화면에 반영됨    문서 객체 모델    DOM 객체의 접근 방법-id 속성을 이용한 방법* getElementById("아이디명")-> id="아이디명" 속성을 갖는 오직 하나의 요소만 선택  -요소명을 이용한 방법* getEle.. 2024. 5. 4.
[HTML5] 10-4 이벤트 이벤트: 사용자가 어떠한 동작을 하거나 문서/브라우저의 상태가 변할 때 발생하는 특정한 사건이나 동작 -> 특정 이벤트에 대응하여 적절한 처리를 수행하기 위해서는 자바스크립트 코드로 작성한 이벤트 리스너가 필요*해당 이벤트가 발생할 때마다 이와 연동된 이벤트 리스너가 자동으로 호출되어 수행 -주요 이벤트구분이벤트설명윈도우load브라우저에서 문서/이미지의 로딩이 완료된 순간unload브라우저에서 문서를 닫을 때 발생포커스focus윈도우, 폼 등의 객체가 포커스를 가질 때 발생blur객체가 포커스를 잃을 때 발생폼changeinput, select 요소 등의 값이 변경되었을 때 발생select입력된 텍스트를 사용자가 선택했을 때 발생submitsubmit 버튼을 눌러 폼을 전송했을 때 발생resetreset.. 2024. 4. 28.
[HTML5] 10-3 객체 객체: 자바스크립트의 작업 대상 -> 가장 기본적인 자료형: 실세계의 유무형의 것을 모델링하기 위해 변수와 함수를 그룹화한 것-속성 : 객체의 특성/상태를 표현하기 위한 데이터-메소드 : 객체와 관련된 작업을 처리하는 함수             : 데이터를 동작하는 규칙이나 방법 : 종류-내장 객체(코어 객체) -> String, Array, Date, Math 등-사용자 정의 객체      String 객체: 문자의 모양을 지정하거나 문자열을 다루기 위한 객체-> new 연산자 사용, 문자열을 변수에 할당하면 자동으로 생성 -속성: length -> 문자열의 길이 반환 -메서드: 글꼴 관련 메서드: 위치 이동 관련 메서드: 문자열 처리 관련 메서드      Array 객체: 배열을 사용하기 위한 객체 .. 2024. 4. 28.
[HTML5] 10-2 변수, 연산자, 문장, 함수 변수: 프로그램에서 다루는 데이터를 저장하기 위한 공간 -변수 선언: 데이터를 저장할 적절한 크기의 공간을 확보하는 것: 변수가 가질 수 있는 데이터의 종류를 나타내는 자료형과각 변수를 구별하기 위한 이름에 해당하는 식별자가 필요하다.   식별자: 변수 이름이나 함수의 이름으로 사용하기 위해 프로그래머가 만든 단어 -지정 규칙필수): 첫 글자는 반드시 영문자, '_', 또는 '$'로 시작-> 두 번째 글자부터는 영문자, 숫자, '_', '$'의 조합으로 구성: 대소문자 구분: 키워드 사용 불가 -> let, if, for, while 등 권장): 의미를 내포한 충분한 길이의 단어 사용: 낙타체 표기 -> camelCaseNotation 예시): 주석이 있는 것은 식별자가 될 수 없는 예시이다.   자료형.. 2024. 4. 28.
[HTML5] 10-1 자바스크립트 HTML 웹 프로그래밍    JavaScript: HTML5의 공식적인 스크립트 언어*스크립트 : 컴퓨터 프로세서가 아닌 다른 프로그램에 의해 번역되거나 수행되는 프로그램이나 명령어 나열 : JavaScript vs Java특징자바자바스크립트작성 방법별도의 소스 파일로 작성HTML 내에 직접 삽입실행 방식소스를 컴파일하여 자바 가상머신 위에서 실행되는 컴파일 언어클라이언트에서 직접 해석되고 실행되는 인터프리터 언어변수 선언명시적인 선언이 필요선언이 불필요보안성소스를 볼 수가 없으므로 보안 유지가 가능브라우저의 메뉴를 통해 소스를 볼 수 있어 보안이 취약     자바스크립트 선언 방식: HTML 문서에서 자바스크립트 코드를 사용하는 방식  예시)    자바스크립트의 주석 2024. 4. 28.
[HTML5] 9-3 다단 다단 관련 속성 다단 지정 : column-width와 column-count 속성값은 동시에 auto 불가 -단의 폭 지정 : 단의 개수는 요소의 폭에 따라 자동으로 조정 -단의 개수 지정 : 단의 폭은 요소의 폭에 따라 자동으로 조정 출력: *column-count *column-width *columns column-gap 속성 : 단과 단 사이 간격 지정 *값 -> normal(기본 1em), column-rule 속성 : 단과 단 사이의 구분선 관련 속성(column-rule-*)의 일괄 지정 예시) column-span 속성 : 해당 요소를 얼마나 많은 단을 차지해서 표시할 지 지정 *해당 요소에 설정된 다단을 무시하고 하나의 단으로 표시할 지 여부 column-fill 속성 : 각 단을 채우.. 2024. 4. 20.
[HTML5] 9-2 애니메이션 애니메이션 관련 속성 키 프레임 : 애니메이션을 구성하는 움직임의 키가 되는 프레임 -> 각 프레임을 연결하여 동작을 구성 애니메이션 속성 -animation-name 속성 : 키 프레임의 이름 지정 *값 -> none, -animation-duration 속성 : 애니메이션의 한 사이클이 실행되는 시간 지정 *값 -> 0, -animation-delay 속성 : 애니메이션이 시작하기 전의 대기 시간 지정 *값 -> 0, -animation-timing-function 속성 : 애니메이션의 진행 속도의 형식 지정 -animation-iteration-count 속성 : 애니메이션의 반복 횟수 지정 *값 -> (기본 1), infinite -animation-direction 속성 : 애니메이션의 진행 방.. 2024. 4. 20.
[HTML5] 9-1 전환 전환 : 어떤 이벤트에 대해서 지정한 시간 내에 속성의 특정 상태가 다른 상태로 부드럽게 변화하는 것 *스타일의 점진적인 변화 -> 애니메이션 효과 부여 -전환 지정 방법 : 어떤 이벤트에 대해서 스타일 변화를 부여할 지를 지정 : 전환 효과를 부여하려는 속성의 처음 상태와 최종 상태를 지정 : 전환 관련 속성의 설정 -> transition-property 속성 : 전환이 적용될 속성의 이름 나열. 여러 개인 경우에는 콤마로 구분 -> transition-duration 속성 : 전환이 진행되는 시간 지정 예시) transition-delay 속성 : 전환 효과가 시작되기 전 대기 시간 지정 -전환이 바로 시작하지 않고 지정한 시간이 지난 후에 시작 -값 -> 초(s), 밀리초(ms) transitio.. 2024. 4. 20.
728x90