Programming Learning Diary

HTML LINK(CSS 불러오기) STYLE(CSS 작성하기) SCRIPT(JS 불러오거나 작성하기)

페이지 정보

작성일 21-01-14 08:26

본문

LINK(CSS 불러오기)

외부 문서를 연결할 때 사용합니다.
특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용합니다.
빈(Empty) 태그입니다.

<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<외부문서연결 관계="CSS" 문서경로="./css/main.css">
<외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>

속성의미
rel(필수)현재 문서와 외부 문서와의 관계를 지정stylesheeticon 등..
href외부 문서의 위치를 지정경로
 



STYLE(CSS 작성하기)

CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용합니다.

<style>
img {
width: 100px;
height: 200px;
}
p {
font-size: 20px;
font-weight: bold;
}
</style>
<!-- 다음과 같이 이해할 수 있습니다. -->
<스타일정의>
<!-- CSS 코드 -->
</스타일정의>


SCRIPT(JS 불러오거나 작성하기)

HTML 문서에서 CSS는, 작성된 CSS를 <link>로 불러오거나 <style></style>안에 작성할 수 있습니다.
JS는 <script></script>로 이 2가지 방식을 모두 사용할 수 있습니다.

<!-- 불러오기 -->
<script src="./js/main.js"></script>

<!-- 작성하기 -->
<script>
function windowOnClickHandler(event) {
console.log(event);
}
window.addEventListener('click', windowOnClickHandler);
</script>

<!-- 다음과 같이 이해할 수 있습니다. -->

<!-- 불러오기 -->
<자바스크립트 문서경로="./js/main.js"></자바스크립트>

<!-- 작성하기 -->
<자바스크립트>
<!-- JS 코드 -->
</자바스크립트>



댓글목록

등록된 댓글이 없습니다.