link 는 연결한다는 뜻
href는 hypertext reference 라는 뜻
link 는 정보이므로 head범위 내에 작성하여야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>Hello World!</div>
</body>
</html>main.css 의 내용
div {
/* css는 C언어와 같이 세미콜론으로 줄 구분 */
color:red;
font-size: 100px;
}참고!
./은 현재 폴더 기준
즉, ./main.css 는 현재 폴더에 있는 main.css 파일을 가리킨다.
그리고 우리는 한국어 베이스 웹사이트를 만들 것이므로 html 옆의 lang속성을 ko로 바꾸어주어야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>Hello World!</div>
</body>
</html>또한 JS 역시 연결할 수 있는데
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</head>
<body>
<div>Hello World!</div>
</body>
</html>위와 같이 link 가 아닌 script 태그로 연결하고 시작 태그의 script 뒤에 띄우고 src= 을 입력하여 속성 중 source가 무엇이냐를 알려준다
이 때 소스는 연결할 자바스크립트 파일이므로 main.css 와 마찬가지로
./main.js 라 적어주면 된다.
(main은 내가 작성한 js파일의 이름)
main.js의 내용
console.log('HEROPY!');console이라는 탭에 log 즉, 기록을 남긴다는 의미
그 결과로 console에 HEROPY!가 출력된 것을 볼 수 있다.
