-
자바 스크립트와 CSS를 HTML에서 분리하기Development/Javascript 2016. 3. 10. 13:21
이번에는 자바 스크립트와 CSS 파일을 HTML파일에서 분리하는 방법에 대해서 알아보겠습니다.
아래 코드와 같이 HTML에서 <style> 태그와 <script> 태그를 이용해서 자바 스크립트와 CSS 를 추가할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>No.1 Hello World</title> <style> #content_area { color: red; } </style> <script type="text/javaScript"> window.onload = function() { // 윈도우객체가 로드되면 아래를 실행하세요. document.getElementById('content_area').innerHTML= '<h1> Hello World </h1>'; // content_area를 ID로 가지는 DOM 객체를 가져와서 거기에 다음과 같은 HTML을 넣어주세요. }; </script> </head> <body> <div id = "content_area"> </div> </body> </html>하지만 코드가 길어지거나 동일한 스타일이나 자바스크립트를 다른 HTML파일에도 적용하고 싶을때가 있습니다. 동일한 스타일을 각각의 HTML 파일에 넣는다면 하나가 변경되면 매번 변경해줘야 하는 어려움이 있겠죠. 이럴때는 js 확장자를 가진 자바스크립트 파일과 css 확장자를 가진 스타일시트 파일로 분리 할 수 있습니다.
위 코드에서 <sytle> 부분을 my.css 파일을 생성한 후 붙여 넣겠습니다.
#content_area { color: red; }그리고 <script> 부분을 my.js 파일을 생성한 후 붙여 넣겠습니다.
window.onload = function() { // 윈도우객체가 로드되면 아래를 실행하세요. document.getElementById('content_area').innerHTML= '<h1> Hello World </h1>'; // content_area를 ID로 가지는 DOM 객체를 가져와서 거기에 다음과 같은 HTML을 넣어주세요. };기존 HTML 코드에서 <style> 태그와 <script> 태그를 아래와 같이 수정해 주겠습니다.
<!DOCTYPE html> <html> <head> <title>No.1 Hello World</title> <link rel="stylesheet" type="text/css" href="my.css" /> <script type="text/javaScript" src="my.css"></script> </head> <body> <div id = "content_area"> </div> </body> </html>실행해보면 처음 보았던 HTML과 동일한 결과를 보여줍니다. 이렇게 외부의 css와 js파일을 로드해서 사용할 수 있습니다. 이는 HTML과 CSS 그리고 자바스크립트를 분리하여 가독성이 좋고 유지보수가 쉽게 만들어주는 방법입니다.
'Development > Javascript' 카테고리의 다른 글
Hello World로 시작하기 (0) 2016.03.10