VS Code 설치
https://code.visualstudio.com/
Extension : HTML Preview
- 우측 메뉴에서 Extension 실행
- "Live HTML Previewer" 입력 후, 설치 → 다시로드
- (F1) 클릭 후, Preview를 입력
- Side Preview 실행
Hello, HTML!
HTML
Hyper Text Markup Language
Hyper : 초월한
Text : 문서
Markup : 마크로 둘러쌓여있는
Language : 언어
HTML 기본형식
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<!DOCTYPE html>— doctype : 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.<html></html>—<html>: 이 요소는 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.<head></head>—<head>: 이 요소는 HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다. 여기에는 keywords와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.<body></body>—<body>: 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.- : 문서가 사용해야 할 문자 집합을 utf-8으로 설정합니다(utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있습니다). 본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도 다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며, 그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.
<title></title>—<title>: 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
Hello, Vue!
Vue CDN 가져오기
- Google에 "vue.js cdn" 검색 [설치방법- Vue.js] 클릭
- CDN 복사
https://unpkg.com/vue@2.5.22/dist/vue.js
- HTML 기본형식내에 CDN 추가
<script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></scrript>
Hello, Vue.js!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, Vue.js!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
});
</script>
</body>
</html>
- 실행결과
'FrontEnd > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue BootStrap CSS 넣기 (0) | 2019.01.14 |
|---|---|
| [Vue.js] Vue 추천이유 (0) | 2019.01.13 |
| [Vue.js] MVVM (0) | 2019.01.13 |