본문 바로가기

학교수업/웹 프로그래밍

(10)

9. 이벤트 기초 및 활용 1. 이벤트 마우스 클릭, 키보드 입력, 로딩, 타임아웃 등 사용자의 입력행위나 브라우저의 상태 변화를 브라우저가 자바스크립트 코드에게 알리는 통지 이벤트리스너 발생한 이벤트에 적절하게 대처하기위해 작성된 자바스크립트코드 이벤트가 DOM객체에 발생한다 == 이벤트가 HTML태그에 발생한다 == 객체에 이벤트가 발생한다 이벤트리스너 만들기 HTML 태그내에 작성 ! 마우스 올리면 색 변경 DOM객체의 이벤트리스너 프로퍼티에 작성 마우스 올리면 색 변경 DOM객체의 addEventListener()메소드 활용 다른 이벤트리스너들과 달리 removeEventListener이용해 제거 가능 동일 이벤트 리스너에 여러 함수 중복 등록 가능 마우스 올리면 색 변경 익명함수로 이벤트 리스너 작성 익명함수: 함수 이름..

08. HTML DOM과 Document 1. HTML DOM 브라우저가 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만듦 모든 브라우저에서 호환됨 HTML 태그가 출력된 모양, 콘텐츠 제어 위함 DOM 객체를 통해 CSS 스타일의 프로퍼티를 바꿔서 동적 제어 가능 DOM트리 HTML태그의 포함관계에 따라 그린 트리 구조 DOM트리를 따라 DOM객체에 마음대로 접근 가능 DOM 트리의 루트는 document 객체이다. 그러나 document 객체는 DOM 객체가 아니다. DOM객체의 종류는 HTML태그 종류 수만큼 있다. HTML태그 당 DOM객체가 하나씩 생성된다. 같은 태그가 여러개 있어도 하나만 생성된다. DOM트리는 HTML 태그의 포함관계에 따라 부모 자식 관계로 구성된다. 브라우저는 HTML태그를 통해 DOM..

07. 자바스크립트 코어 객체와 배열 자바스크립트 객체 프로퍼티: 객체의 고유한 속성 객체는 여러 프로퍼티와 값의 쌍 메소드: 객체 내 함수 객체는 소멸시키는 방법이 없다. >> 가비지 컬렉션: 사용하지 않는 객체 자동 수거 자바스크립트 객체의 종류 HTML DOM객체 >> CH8 html 페이지에 작성된 태그들을 브라우저가 하나씩 객체화한 것 html 페이지의 내용과 모양을 제어하기 위해 사용 브라우저 관련 객체(BOM) >> CH10 브라우저의 종류나 스크린의 크기정보 제공하는 등 브라우저 관련 객체들 코어객체 기본 객체 Array, Date, String, Math 타입 등 코어 객체 생성하기, new var today = new Date(); var msg = new String("hello"); 객체 접근 객체명.프로퍼티 = 값; ..

6. 자바스트립트 언어 자바스크립트 코드의 위치 html 태그의 이벤트 리스너 속성에 작성 코드가 짧은 경우 내 작성 script는 파일 내 어디든 들어갈 수 있으며 여러번 사용가능하다 마우스를 올려 보세요 자바스크립트 파일에 작성 확장자가 .js인 파일을 별도 저장하고 script 태그의 src 속성으로 불러와서 사용하기 이때 사이에 코드 추가 작성 불가 URL부분에 작성 태그의 href 속성 내에 작성 링크 자바스크립트로 html 콘텐츠 출력하기 자바스크립트 코드로 html 콘텐츠를 웹 페이지에 직접 삽입 가능 document.write()나 document.writeln() 사용 document.write(welcome!) 웹페이지 내 코드가 실행되는 위치에서 텍스트가 출력됨 writeln은 한줄이 아니라 한칸 띄워줌 자..

5. CSS 고급활용 목차 1. 배치 HTML 태그가 출력되는 위치를 지정하는 것 블록박스와 인라인 박스 html 태그의 종료: 블록 태그, 인라인 태그 블록태그: 코드를 블록박스로 다룸 항상 새 라인에서 시작 옆에 다른 태그 배치 불가 인라인태그: 인라인 박스로 다룸 블록 내에 배치 옆에 다른 태그 배치 가능 박스의 유형 제어, display default 박스 유형 무시하고 html 태그 박스 유형 다르게 지정 가능 display:block display:inline display:inline-block display:block display:inline display:inline-block 항상 새 라인에서 시작 새 라인에서 시작X. 항상 inline에 있음 새라인에서 시작불가. 라인안에 있음 블록 박스 내에만 매치 모..

4. CSS 폰트스타일: font-style normal, italic, oblique 폰트 굵기: font-weight 100~900사이 숫자 normal(400), bolder(700), lighter 단축 프로퍼티 font font-style, font-weight, font-size, font-family를 순서대로 지정 font-size, font-family는 필수, 나머지는 생략가능(디폴트 처리) 박스모델 콘텐츠, 내부여백 padding, 테두리 border, 여백 margin 박스를 제어하는 프로퍼티: width, height, margin, padding 박스의 색 테두리색(border-color)만 임의로 지정 가능 테두리 두께, 모양, 색 border-color border-width border..

웹 프로그래밍 중간고사 복원 1. HTML5의 출현배경 W3D > W3C 2. 이미지 태그에서 잘못된 것 atl > alt 3. 리스트 4. 비정형 table 5. 태그 href: 하이퍼링크 target: 링크에 연결된 html페이지의 윈도우 이름 결정 6. 시멘틱 태그 7. 태그 8. 폼 입력 코드 틀린 코드? 9. css스타일 시트의 적용 10. CSS 스타일 태그의 적용 ul>div>strong 11. box 유형 inlineblock 12. em 13. 자바스크립트 코드의 출력값: this 14. box배치 relative 15. z index 16. 자바스크립트 출력값: string 객체의 split

ch4. CSS /* 셀렉터 { 프로퍼티 : 값; 프로퍼티 : 값;} */ span{ color:blue; font-size:20px;} 셀렉터, 프로퍼티, 값은 모두 대소문자 구분하지 않는다. CSS 스타일 시트 작성하는 방법 태그에 스타일 시트 작성 : head에서만 가능. 여러번 작성 가능. 문서 전체에 적용 style 속성에 스타일 시트 작성 : 해당 태그에만 스타일이 적용 스타일 시트를 별도 파일로 작성하고 , @import 이용해 사용: .css라는 확장자를 가진 파일. 중복 작성 해소. CSS규칙 CSS스타일은 부모 요소에서 상속됨 스타일 합치기와 오버라이딩: 겹치면 가장 우선수위가 높은 스타일인 style 속성에 지정된 설정이 적용됨 셀렉터: p{내용;} 태그 이름 id 속성이나 class 속성의 값: 셀..

이전 1 2 다음

티스토리툴바