본문 바로가기

분류 전체보기

 (894)
17장 예제 - DOM 요소에 접근하고 속성 가져오기 (3) - setAttribute() 메서드 - 원하는 속성값으로 지정가능 - setAttribute("속성명","값") - 작은 이미지를 클릭하면 큰 이미지 자리에 표시하기 DOCTYPE html> 이미지 속성 가져오기 #container { width:600px; margin: 0 auto; } #prod-pic, #desc { float:left; /*왼쪽에 배치*/ } #prod-pic { margin:20px 20px auto 10px; padding:0; } #cup { box-shadow:1px 1px 2px #eee; /*수평,수직,흐림,색상*/ outline:1px dashed #ccc; /*border 바깥 부분에 테두리를 하나 더 두르는 부분 */ outline-offset:-7px; /*b..
17장 예제 - DOM 요소에 접근하고 속성 가져오기 (2) - 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장됨 - getAttribute() 메서드 - 속성에 접근 - getAttribute("속성명") - 이미지 속성 가져오기 DOCTYPE html> 이미지 속성 가져오기 #container { width:600px; margin: 0 auto; } #prod-pic, #desc { float:left; /*왼쪽에 배치*/ } #prod-pic { margin:20px 20px auto 10px; padding:0; } #cup { box-shadow:1px 1px 2px #eee; /*수평,수직,흐림,색상*/ outline:1px dashed #ccc; /*border 바깥 부분에 테두리를 하나 더..
17장 예제 - DOM 요소에 접근하고 속성 가져오기(1) 1. getElementById() 메서드 - 특정한 id가 포함된 DOM 요소에 접근 - 요소명.getElementByld("id명") 2. getElementsByClassName() 메서드 - 지정한 class 선택자 이름이 들어있는 DOM 요소에 접근 - 요소명.getElementsByClassName("class명") - 반환하는 요소가 2개 이상일 수도 있음 - 클래스 이름이 같은 DOM 요소들이 HTML Collection 객체로 저장 3. getElementsByTagName() 메서드 - 태그명을 사용한 DOM 요소에 접근 - 요소명.getElementsByTagName("태그명") - 반환하는 요소가 2개 이상일 수도 있음 - 태그 이름이 같은 DOM 요소들이 HTML Collectio..
17장 예제 - 문서객체모델 (DOM) 알아보기 1.문서객체모델 (DOM :document object model) -자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 - 웹 문서를 하나의 객체로 정의 - 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의 2. DOM 트리 - DOM은 웹 문서의 요소를 부모요소와 자식 요소로 구분 - html요소는 head와 body의 부모요소 body요소는 h1,img의 부모요소 - 문서안의 요소뿐만 아니라 각 용소에서 사용한 내용과 속성도 자식으로 나타냄 - 노드(node) : DOM트리에서 가지가갈라져 나간 항목 - 루트 노드(root) : 나무 뿌리에 해당하는 노드 , DOM 트리의 시작부분인 html 노드 - 부모노드(par..
16장 마무리 문제 2 DOCTYPE html> 현재 시각 #container { width:200px; margin:50px auto; } button { border:1px solid #ccc; background:#fff; padding:20px 30px; } 현재 시간 보기 document.getElementById('bttn').onclick = displayTime; function displayTime() { var left = (screen.availwidth - 400)/2; var top = (screen.availHeight - 200)/2; var opt = "left=" + left + ",top=" + top + ",width=" + 400+ ",height="+ 200; window.open("pra..
16장 마무리 문제 1 DOCTYPE html> 마무리 문제 1 p { margin-top:20px; font-size:1.2em; text-align:center; } .display { font-size:1.5em; font-weight:bold; color:blue; } 현재 시각 setInterval(displayNow, 1000); //1초마다 시간 계산 함수 실행 function displayNow() { //시간 계산 함수 var now = new Date(); var currentTime = now.toLocaleTimeString(); document.querySelector("#current").innerHTML = currentTime; //현재 시간 표시 }
16장 실습 4 - 팝업 창의 기본위치는 화면의 왼쪽 위이므로 화면 가운데에 배치하려면 위치를 계산 해야함 DOCTYPE html> 팝업 창을 화면 가운데에 표시하기 문서를 열면 팝업 창이 표시됩니다. function openCenter(doc, win, w, h) { var left = (screen.availWidth-w) / 2; // 화면의 너비 - 팝업창의 너비 /2 var top = (screen.availHeight-h) / 2; // 화면의 높이 - 팝업창의 높이 /2 var opt = "left=" + left + ",top=" + top + ",width=" + w + ",height=" + h; window.open(doc,win,opt) } openCenter("practice2.html","pop..
16장 실습 3 - 팝업 창에서 클릭한 내용을 메인창에 나타내기 DOCTYPE html> 메인 창 문서를 열면 팝업 창이 표시됩니다. popWin = window.open("practice2.html","popup","width=750,height=600"); popWin.opener = self; //popWin 객체를 만든 부모가 자신(self)이라고 알려줌 - 팝업창을 popWin이라는 객체로 할당한 후 popWin을 만든 부모 (메인 창)가 누구인지 브라우저에게 알려줘야 함 :popWin.opener = self; -openr() 함수 : 자식창의 action으로 부모창에 영향을 주거나 데이터를 넘길 때 사용 :popop 창 -> 자식창 :popup 창을 열게하는 메인 창 -> 부모창 DOCTYPE html> 이..

티스토리툴바