반응형
웹을 개발하다보면 css코드와 js 코드덕분에 엄청나게 길어진 index.html 내부 코드를 보게 될 것 입니다.
또 웹을 실행해 보면 F12를 눌렀을 시 css코드와 js코드가 전부 보이게 되죠..!
그걸 방지하기 위해서 타 파일에서 링크를 해오는 방법이 있습니다.
1. CSS 링크하기
저같은 경우는 <html> 이 부분과 <head> 사이에 링크 소스를 추가합니다.
<head>~</head> 사이에 넣든 <body>~</body> 사이에 넣든지 크게 상관은 없습니다.
css의 경우 <link href="style.css" type="text/css" rel="stylesheet"> 가 기본 소스가 됩니다.
이 소스를 제 방식대로 예제에 적용을 시켜 보자면
<!doctype html> <html> <link href="style.css" type="text/css" rel="stylesheet"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
이렇게 됩니다. 이렇게 된다면 style.css에 있는 파일을 불러오게 되는거죠.
다시 기억해 주세요 <link href="대상경로" type="text/css" rel="stylesheet">
2. JS 링크하기
JS의 경우 html 내부에서 <script></script> 사이에서 작성을 하였잖아요?
이번에는 script 앞에 src를 붙혀주어서 <script src="대상경로"></script> 이러한 소스를 만들어서 JS 파일의 링크를 연결 해 줄겁니다.
제 방식대로 예제에 적용을 시키면
<!doctype html> <html> <script src="test.js"></script> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
이런식이 됩니다.
반응형
'엄청 과거 이야기 > HTML 강좌' 카테고리의 다른 글
| [ 본격 ] input 태그에 대하여 ( email , button , checkbox ) (0) | 2015.12.20 |
|---|---|
| [ 본격 ] input 태그에 대하여 ( text , password , submit ) (0) | 2015.12.17 |
| [ 기초 ] HTML5 시맨틱 태그 , 웹 개발 편집기 (1) | 2015.10.22 |
| [기초] HTML5 에 대한 설명과 기본 구조 (1) | 2015.10.21 |