HTML
정보를 표현한다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> < html > < body > < ul > < li >HTML</ li > < li >CSS</ li > < li >JavaScript</ li > </ ul > </ body > </ html > |
CSS
정보를 꾸며준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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을 프로그래밍적으로 제어한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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> |