1. ✍inline 방식
//.css <body> <h1 style="color: blue;background-color: yellow; border: 1px solid black;">Hello World!</h1> </body>//.js <body> <input type="button" onclick="alert('Hello world')" value="Hello world" /> </body>// 여러 페이지 수정시 유지보수의 비효율 // 코드의 가독성 떨어짐
2. script 방식(내부 파일 방식)💻
//.css <head> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head>//.js <body> <input type="button" id="hw" value="Hello world" /> <script type="text/javascript"> var hw = document.getElementById('hw'); hw.addEventListener('click', function(){ alert('Hello world'); }) </script> </body>// 특정 상황에서 사용함 // html 코드 안에 제어를 담당하는 코드를 삽입 하지 않음으로 정보와 제어를 분리
3. 외부 파일 방식📂
//.css <html> <head> <link rel="stylesheet" href="styles.css"> </head>//.js <head> <script src="script2.js"></script> </head>// 확실하게 정보와 제어를 분리 할수 있음 // 하나의 파일로 여러 웹페이지 로드함으로 코드의 재활용성을 높일수 있음 // 유지보수의 편의성 // 캐쉬를 통해서 속도의 향상, 전송량 경량화 도모
Foot print