HTML 문서의 범위
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html><html> //문서의 시작이 어디고 끝이 어딘지 표현한다.
<head> //html문서가 가질수 있는 정보에 해당하는 내용들을 이 범위안에 넣는다.
<meta charset = "UTF-8"> //meta는 정보를 나타낸다.
<meta name = "author" content = "hong-gil-dong"> // 이 사이트의 제작자가 누구인지
<meta name = "description" content = "our site is the best!"> // 이페이지의 설명
<title>my site</title> // 이 페이지의 제목
<link rel = "stylesheet" href = "./css/main.css">
<script src = "./js/main.js"></script>
</head>
<문서의 정보 범위>
<정보 문자인코딩방식 = "UTF-8">
<정보 정보종류 = "사이트 제작자" 정보값 = "홍길동">
<정보 정보종류 = "사이트설명" 정보값 = "우리 사이트가 최고!">
</문서 정보 범위>
<body> //정보를 바탕으로 실제로 화면에 출력할 구조들은 (이미지, 동영상, 글자 등) 이 영역안에 넣는다.
<section>
<h1></h1>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</section>
</body>
</html>
LINK(CSS 불러오기)
외부 문서(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 | (필수) 현재 문서와 외부 문서와의 관계를 지정 | stylesheet, icon 등... |
| href | 외부 문서의 위치를 지정 | 경로 |
STYLE(CSS 작성하기)
CSS를 외부 문서에서 작성하고 연결하는 것이 아니고 HTML 문서 내부에 작성할 떄 사용한다.
CSS는 무조건 style라는 태그 안에 작성해야한다.
<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> //범위를 지정했지만 범위안에 내용이 없다.
//src를 통해서 자바스크립트를 외부에 가지고 와서 이 html에 연결해서 사용할건데 그 외부에 있는 자바 스크립트 파일이
//어디에있는지 소스 속성에다가 작성을 했다.
<script> //style 태그처럼 내부에 자바스크립트를 직접 작성하는 방법
// 자바스크립트 내용이 작성되어 있다.
function windowOnClickHandler(event){
console.log(event);
}
sindow.addEventListener('click', windowOnClickHandler);
</script>
'HTML > 기초' 카테고리의 다른 글
| 웹 표준 검사하기 (0) | 2020.06.02 |
|---|---|
| HTML 문서의 구조 (0) | 2020.05.31 |
| 태그란 (0) | 2020.05.31 |
| JPG, PNG, GIF, WEBP, SVG (0) | 2020.05.30 |
| 비트맵과 백터 이미지 (0) | 2020.05.30 |