W3C, HTML, CSS, Javascript 등등
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현
W3C ( World Wide Web Consortium )
W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다.
이러한 W3C가 관리하는 대표적인 웹 표준은 HTML, CSS, DOM, SVG, XHTML, XML 등이 있다
HTML(HyperText Markup Language)
웹 표준을 주관하는 W3C에서 발표한 마크업 언어로 웹 문서를 제작하는데 사용된다.
HTML로 제작된 문서는 웹 브라우저가 해석하여 보여지게 된다.
HTML 문서는 태그(Tag)라고 부르는 마크업(Markup) 요소를 이용하여 문서를 구현함
확장명은 .html
<!DOCTYPE html> : 현재 문서가 HTML5(최신버전) 문서임을 명시합니다.
<html> : HTML 문서의 루트(root) 요소를 정의합니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
CSS(Cascading Style Sheets)
CSS는 HTML 문서의 스타일이나 레이아웃 등 디자인 서식을 작성하는 스타일 시트 언어이다.
확장명은 .css 이다.
HTML 문서에 CSS 스타일을 적용하는 방법
1. 인라인 스타일(Inline style) - 해당 요소에만 스타일을 적용
<p style="color:green; text-decoration:underline"> ~ </p>
2. 내부 스타일 시트(Internal style sheet) - HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정 , 해당 HTML 문서에만 스타일을 적용
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
3. 외부 스타일 시트(External style sheet)
스타일을 적용할 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함
<link rel="stylesheet" href="/examples/media/expand_style.css">
부트스트랩(bootstrap)
스타일시트를 쉽고 예쁘게 꾸밀 수 있는 프레임워크
자바스크립트(Javascript)
객체(object) 기반의 스크립트 언어
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
브라우저에서 실행되는 스크립트 언어
html에 포함되어 작성된다.
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있습니다. <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있습니다.
<script>태그 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시
DOM(Document Object Model)
W3C의 표준 객체 모델
브라우저가 HTML 웹 문서를 읽어들인 후 Tree 구조로 구성하여 메모리에 적재한다.
jQuery
자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 라이브러리