HTML
정보를 표현한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
CSS
정보를 꾸며준다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#selected{
color:red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
</body>
</html>
JavaScript
HTML을 프로그래밍적으로 제어한다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#selected{
color:red;
}
.dark {
background-color:black;
color:white;
}
.dark #selected{
color:yellow;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
<input type="button" onclick="document.body.className='dark'" value="dark" />
</body>
</html>
