HTML CSS JavaScript 자바스크립트 연결
HTML CSS JavaScript 자바스크립트 연결
■ 우리가 눈으로 보는 웹 브라우저 화면은 [HTML + CSS + 자바스크립트]로 만들어져 있는데요. 이들 문서를 모두 한 곳(HTML)에 작성해도 되지만, 많이 복잡해지기 때문에 이번 글에서는 각각의 문서를 분리해서 작성하고 연결하는 방법을 알아보겠습니다.
■ HTML은 화면의 전체적인 구조를 잡아주는 역할을 하고 확장자는 [.html]입니다. css는 화면을 이루고 있는 각 요소의 위치와 모양 등을 꾸며주는 역할을 하고 확장자는 [.css]입니다. 앞에 두 문서의 역할이 전체적이 화면을 이루고 꾸미는 것들이라면 자바스크립트는 이것들을 역동적으로 움직여주는 역할을 하구요. 확장자는 [.js]입니다. 대충 개념을 알아봤으니 세 개의 문서를 작성하겠습니다. 나중에는 '에디터'를 이용하겠지만, 지금은 간단한 내용이니까 메모장에 만들어볼게요.
▲ html 문서에는 본문에 한 줄의 문자열만 입력해서 출력하도록 해봤습니다.
▲ 스타일 시트는 HTML에 입력된 <h2> 문자열의 글자색을 빨간색으로 변경하는 속성을 입력해봤습니다.
▲ 모두 한 폴더에 넣겠습니다. 이렇게 작성된 세 개의 문서가 제대로 연결이 된다면 html에서 입력한 글자색은 빨간색이 될 것이고, aaa() 함수를 호출하면 js 파일에 입력된 문자열이 그대로 출력이 될 것입니다. 하나씩 연결해볼게요.
먼저 HTML 문서에 스타일 시트(css)를 연결하겠습니다.
▲ 외부 스타일 시트를 HTML과 연결하는 방법은 그림과 같이 <head> 태그 사이에 <link rel="stylesheet" href="파일 경로"/> 형식으로 입력합니다. 앞에서 작성한 스타일 시트가 제대로 연결이 됐다면 글자색이 빨간색으로 바뀌게 될 겁니다.
▲ 제대로 연결이 됐군요. 스타일 시트는 이렇게 연결하면 되구요. 다음은 자바스크립트를 연결해보겠습니다.
▲ 자바스크립트의 연결 형식은 <script type="text/javascript" src="파일 경로"> 인데요. 여기서 type는 생략해도 됩니다. 이렇게 스크립트를 연결한 후에는 본문(body)에서 <script> 태그를 입력하고 그 사이에서 함수를 호출하면 되는데요.
▲ 예제처럼 <body> 태그 안에 <script> 태그를 넣고 그 사이에 함수의 이름을 입력해서 호출하면 됩니다. 함수 호출이 제대로 이루어져서 함수의 내용이 출력되는지 확인하고 마무리할게요.
▲ 이렇게 함수의 문장이 실행되면서 출력되네요. 간단한 내용이니까 직접 입력해서 연결해보세요. ^^ 수고하셨습니다.