<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Hello world!</div>
</body>
</html>html과 < /html >사이에
문서의 전체 범위를 적는다. 여기에는 HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할이다.
< head >과 < /head >사이에는
문서의 정보를 나타내는 범위가 기록된다. 여기에는 웹 브라우저가 해석해야할 웹페이지의 제목, 설명, 사용할 파일위치, 스타일(css)같은, 웹페이지의 보이지 않는 정보를 작성하는 범위이다.
< body > 와 < /body >사이에는
문서의 구조를 나타내는 범위가 기록된다. 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위이다.
→ title 하고 엔터하고 link를 하고 엔터를 누르면 다음과 같이 뜨게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>title 밑에 link 가 작성되게 된다.
css 사이트에 다음과 같이 작성하고 오른쪽 커서를 눌러 open with live server 를 누르게 되면
새창에서 다음과 같이 작성되게 된다.
다시html 에서
<html lang="ko">를 작성해서 해당 사이트를 주로 사용하는 언어를 한글로 설정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>head 부분에
<link rel="stylesheet" href="./main.css">
<script src="./main.js"> </script>
다음과 같이 작성해서 위에는 css 와 연결하고 아래는 js와 연결한다.
CSS 연결할때는 < link>를 사용한다.
그리고 다시 사이트로 가서 새로고침하고 f12를 누르면 다음과 같은 창이 뜨게 된다.
JS 연결할때는 < Script>를 사용한다.
그리고 console 에 가면 js 에 작성한 내용이 작성된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
<style>
div{
text-decoration: underline;
}
</style>
</head>
<body>
<div>Hello world!</div>
</body>
</html> 작성하게 되면
밑줄이 그어지게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HEROPY~</title>
<link rel="stylesheet" href="./main.css">
<script src="./main.js"> </script>
<style>
div{
text-decoration: underline;
}TITLE 안에 HEROPY~라고 작성하면 창의 이름이 HEROPY~ 가 된다.
0개의 댓글
