HTML이란?

* 학습목표

- 웹 사이트에 대한 이해

- 브라우저에 대한 이해

- HTML에 대한 이해

- CSS에 대한 이해

- 자바스크립트에 대한 이해

 

 

* 웹 사이트란 ?

기업 단체, 개인이 정보를 올릴 수 있는 홈페이지 (각 주제별)

web page 의 모음 (집합체)

 

특징

1 ) 웹 사이트는 복잡해 보일 수 있지만, 전부 텍스트 ( 문자열 )와 이미지로 이루어져 있다.

2 ) HTML은 맞는 위치에 (장소에) 맞는 text를 사용한다면 직접 웹 사이트를 만들 수 있다. (프론트)

3 ) 브라우저가 html (문자열)을 분석해서 시각적으로 구현해 준다. : 결국 브라우저는 누군가에게 소스 코드를 받아서 구현이 된다.

4 ) 웹 사이트는 최소 2~3가지 이상 text로 구성되어있다. 이제 부터는 text 라는 말 대신에 language 라는 단어를 사용하자!

 

 

 

 

* 웹 사이트 언어

HTML (뼈대)
약자 : Hyper Text Markup Language
- Hyper : 뛰어넘다, 초월하다 - Text (책) 정보를 습득하기 위해서는 순차적으로 읽어서 습득한다. - Hyper Text : 어떠한 정보에 대한 접근을 순차적으로 접근하는 것이 아니고 접근방식을 뛰어 넘어서 얻는다. - Markup : 어디간에 Mark, 즉 표시를 해두는 것을 의미한다.
* 표시가 없을 때	Html 이란 Hyper Text Markup Language 의 약자 입니다. D 강의실에서 진행합니다
* 표시가 있을 때	- 제목 : HTML 이란 - 내용 : Hyper Text Markup Language 의 약자 입니다.
위 정보들을 마크업 언어로 통해서 구조적으로 표현하기 위한 개념이 마크업의 개념이다.

 

브라우저의 구성요소는 모든 것이 content 입니다.

브라우저도 컴퓨터와 마찬가지로,

인간의 언어를 이해 할 수 없기 때문에 모든 것을 직접 알려주어야 한다.

(ex. 이건 title 이야/ 이건 image야/ 이건 날짜야 등..)

즉 브라우저에게 우리가 사용할 content를 알려줘야 하기 때문에 사용하는 언어가 바로 HTML!

 

 

 

 

 

CSS 언어 (디자인 - 색상, 여백)

약자 :Cascading Style Sheets Language

종속형 시트 캐스케이딩 스타일 시트는 마크업 언어가 실제 표기되는 방법을 기술하는 스타일 언어로 HTML과 XHTML에 주로 쓰이며 XML에서도 사용할 수 있다. * 종속형 ? HTML과 함께 쓰이는 언어이다.

W3C의 표준 언어이며 레이아웃과 스타일을 정의 할 때 자유도가 높다.

기본 파일명은 style.css 이다.

HTML은 브라우저에게 웝 사이트의 content가 무엇인지 알려 주는 언어라면 CSS는 브라우저에게 웝 사이트가 어떻게 보여야하는지 알려주는 언어이다.

 

 

 

 

Javascript 언어 (움직이기)

사람의 뇌라고 생각하면 된다.

뼈대와 근육이, 생김새가 결정 되었다면 어떻게 움직여야 하는지 알려주는 언어이다.

슬라이더나 애니메이션처럼 사용자에 선택에 따라서 동적으로 움직여야 할 때 필요하다 (상호작용)