<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
}
function solveM1(){
}
function solveM2(){
}
function solveM3(){
}
function solveM4(){
}
function solveM5(){
}
function solveM6(){
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p>
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div>
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>

</html>

-------------------------------------------------------------------------------------------------------





<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
solveM1();
solveM2();
solveM3();
solveM4();
solveM5();
solveM6();
}
function solveM1(){
var m = document.getElementById('m_1');
m.style.color='red';
}
function solveM2(){
var m = document.getElementById('m_2');
m.setAttribute("class","active");
}
function solveM3(){
var m = document.getElementById('m_3');
var imgimg = document.getElementById('imgimg');
imgimg.setAttribute('src', './images/navi.jpg')
}
function solveM4(){
var m = document.getElementById('m_4');
var output ='';
output += '<p>';
output += '항목4';
output += '</p>';
m.innerHTML += output;
}
function solveM5(){
var m = document.getElementById('m_5');
var p1 = document.getElementById('p1');
m.removeChild(p1);
}
function solveM6(){
var m = document.getElementById('test6');
test6.parentNode.removeChild(m);
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png" id="imgimg">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p id="p1">
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div id="test6">
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>
</html>






저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요. 단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요.  (0) 2013.07.31
JQuery를 이용한 레이어 팝업  (0) 2013.07.31
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29

+ Recent posts

티스토리툴바