Nuke Olaf - Log Store
HTML 에서 CSS 와 JavaScript 분리하기 본문
1. HTML 문서 내에서 <head> 태그 안에 <style> 태그를 이용해서 CSS 를 추가할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>No.1 Hello World</title>
<style>
.content_area {
color: red;
}
</style>
</head>
<body>
<div class = "content_area">
</div>
</body>
</html>2. HTML 문서 내에서 <head> 태그나 <body> 태그 안에 <script> 태그를 이용해서 js 를 추가할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>No.1 Hello World</title>
<style>
.content_area {
color: red;
}
</style>
</head>
<body>
<div class = "content_area">
</div>
<script>
window.onload = function() {
document.getElementById('content_area').innerHTML= '<h1> Hello World </h1>';
};
</script>
</body>
</html>
3. 하지만,
(1) 코드가 길어지는 경우
(2) 동일한 스타일이나 자바스크립트를 다른 HTML 파일에도 적용하고 싶은 경우
이와 같은 경우에는 <script> 태그를 이용하여 js 확장자를 가진 자바스크립트 파일을 연결하고, <link> 태그를 이용하여 CSS 확장자를 가진 스타일 시트 파일을 분리, 연결하여 사용하면 효율적이다. 이렇게 HTML 과 CSS, js 를 분리하여 관리하면 가독성이 좋고 유지보수가 상대적으로 쉬워진다.
<html>
<head>
<meta charset="UTF-8">
<title>Nuke Olaf</title>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
</head>
<body>
<header>
<h1 class="title">
Nuke Olaf
</h1>
</header>
<script src="myscript.js"></script>
</body>
</html>
<llink> 태그의 속성
(1) href : 연결할 곳의 주소
문서를 연결하는 a 태그이다.
(2) rel : 현재 문서와 연결 문서의 관계를 표시
스타일시트로 연결하는 경우 - rel='stylesheet' 이런식으로 표기
그 밖에도 다른 속성값들이 있다.
(3) type : 연결문서의 MIME 유형 (Multipurpose Internet Mail Extantions)
웹에서 내용 유형 (content type) 을 말할 때 자주 쓰인다.
css -> text/css
js -> text/javascript
xml -> application/xml
이런식으로 쓰인다.
* <script> 태그의 위치
script 파일은 head 태그 보다 페이지의 body 태그가 끝나는 지점에 위치시키는 것이 더 좋은 방법이다.
script를 head 태그에 위치시킬 수도 있지만, 이 경우에는 오류가 발생한다.
element 의 존재를 알기 전에 js 코드를 해석하기 때문에 생기는 오류라고 생각할 수 있다.
https://opentutorials.org/course/1375/6620
head 태그에 script 태그를 위치시키려면 window.onload = function() {} 함수를 추가하면된다.
해당 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해 호출되는 함수이다.
참고 사이트>>>
https://aboooks.tistory.com/147
https://evanjelly.tistory.com/36
'Language > [PHP]' 카테고리의 다른 글
| HTML - <form> 태그 : 사용자에게 입력값을 받기 (0) | 2020.02.03 |
|---|---|
| CSS 분리할때, background-image url 주의할 점 (0) | 2020.02.03 |
| HTML 문서내에서 Java Script 다루는 방법 (0) | 2020.01.29 |
| HTML - 수평방향 타임라인 (Horizontal Timeline) 만들기 (0) | 2020.01.29 |
| PhpStorm 에서 Remote Host 의 파일을 다운로드 할 수 없다고 할때 (0) | 2020.01.29 |
