Website?
익숙하게 알고있는 홈페이지라고 부르는 것들이 Website이다. Website는 Web page들을 그룹으로 묶거나 연결 모음이고 Web page는 Browser상에서 보여지는 HTML 문서이다.
HTML?
HyperText Markup Language의 약자. Hypertext란 Web page를 다른 page로 연결시켜주는 Link이다. Markup language는 문서나 다른 자원의 구조를 명확하게 구분해주는 언어이다. 그대로 해석해보면
Web page의 구조를 구분하고 다른 Web page로 연결시켜주는 언어
- HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML STRUCTURE</title>
</head>
<body>
<div id='tag-property'>DATA, CONTENTS</div>
<div className='tag-property'>DATA, CONTENTS</div>
</body>
</html>HTML은 Programming 언어는 아니고 사용자가 요청한 자원을 단순히 구조화하여 보여주기만하는 정적 언어이다.
CSS?
Cascading Style Sheet, HTML이 문서를 구조화하는 언어였다면 CSS는 문서의 구조를 어떻게 보여주어야하는지 Markup 언어에 옷을 입혀주는 정적 언어. HTML에서는 (1)tag에 직접 접근하거나 (2)tag가 가지고 있는 id 또는 classname으로 접근하여 표현할수 있다. 위 HTML 문서에서 <body>에 있는 <div>는 tag-property라는 같은 값을 가지고 있지만 id와 classname으로 구분되어 다른 style을 가질 수 있다.
// (1)
div {
// style
}
// (2)
#tag-property {
// style
}
.tag-property {
// style
}Javascript?
HTML과 CSS로 이루어진 정적 Web page를 동적으로 작동할 수 있도록 도와주는 programming 언어. HTML이나 CSS에 직접 접근하여 구조나 style 또는 content를 바꿀 수 있다. Javascript를 이용하여 하나의 page만 가지고 다양하게 표현할 수 있다.(Single page web 또는 Single page application)
document.querySelector('div')
document.querySelector('#tag-property')
document.querySelector('.tag-property')Referance
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML
