[1장]웹, HTML 시작하기

HTML = Hyper Text Markup Language

 

 

 

 

▶ HTML : 웹에서의 텍스트, 이미지, 링크 등 여러 요소들을 다루고 표시하는 문서이자 언어

 

 

▶ HTML은 <p>, <img>, <title> 등의 태그들로 구성

 

 

▶ HTML로 작성된 웹 문서는 웹 브라우저를 통해 사용자에게 보여준다.
    ex)인터넷 익스플로러, 크롬 브라우저 등

 

 

▶ 기존 HTML4의 플래시 재생 등의 문제를 보완하고 더 편리해진 HTML5 등장

 

 

▶ HTML5로 홈페이지 제작 뿐 아니라 윈도우 어플리케이션 제작도 가능해짐

 

 

▲[F12]키를 누르면 HTML5로 짜여진 네이버의 소스를 볼 수 있다.

 

 

 

▶ HTML과 CSS

 

- 웹사이트 제작을 위해서 필수

 

- TISTORY, 카페 등에서 자신이 원하는 형태의 레이아웃과 스킨을 만들 수 있다.

 

- 플래시나 Active X 같은 플러그인 설치 없이 인터렉티브(interactive) 사이트 제작 가능
  즉, 웹 브라우저에서 멀티미디어 콘텐츠를 기본으로 재생 가능
  (CSS3이 트랜지션이나 애니메이션 기능 또는 자바스크립트 이용)
  스마트 기기에서도 설치 없이 플래시나 동영상 재생이 가능해짐
    *인터렉티브(interactive) 사이트 : 사용자들의 동작에 바로 반응하는 사이트

 

- 반응형 웹 디자인 : 접속하는 기기에 따른 레이아웃을 다양하게 바꿔주는 기법 사용
  ex)PC화면과 스마트폰의 화면 크기는 다르기 때문에 접속한 기기에 따라 다른 레이아웃을 제공
  해준다.

 

             

                                  ▲ PC화면                                                      ▲ 모바일 화면

 

- 모바일용 웹앱을 만들 수 있다.
  즉, 각 OS별 언어를 사용하여 앱을 개발하는 대신에 HTML5와 CSS3를 사용해 모바일용 애플리
  케이션 제작이 가능해 졌다.

 

 

▶ 웹 표준

 

- 웹 표준을 지켜 사이트를 제작하면 웹 브라우저나 기기별로 사이트를 다르게 제작하는 수고를 덜어준다.

 

- HTML4에서는 먼저 레이아웃을 만들고 내용을 입력했기 때문에 의도했던 웹사이트 레이아웃을만들 수 있다는 장점이 있었다. 하지만 이미 만들어진 웹사이트를 수정할 때 레이아웃에 영향을 주는 수정은 할 수 없었다.

- 따라서 다지인과 내용을 분리하여 HTML을 이용해 내용을 만들고 CSS를 이용해 디자인을 구성하는 아이디어가 웹 표준의 시작이 되었다. 만약 동작에 반응해야 하는 경우는 자바스크립트로 처리하도록 하였다.

 

 

위의 소스를 사용할 경우 아래의 결과가 나온다.

 

 

 

 

아래에 두 번째 소스를 보면

 

 

 

 

첫 번째 소스와 차이가 나보이지만 이 소스 역시 첫 번째 소스와 같은 결과가 나온다.

 

 

 

 

두 소스의 다른 점은 첫 번째 소스는 디자인과 내용을 분리하지 않았고
두 번째 소스는 디자인과 내용을 분리하였다.

 

첫 번째 소스에서 내용의 색을 파란색으로 바꾸기 위해서는
<font color="red">라는 소스를 <font color="blue">로 바꿔야 한다.
길고 복잡한 소스일 경우 수정할 부분을 찾는데 오래걸리거나 다른 영역을 건드릴 수 있다.

하지만 두 번째 소스에서는 디자인의 영역만 고치면 간단하게 해결할 수 있고
다른 영역을 건드릴 위험이 줄어든다.

 

 

 

 

 

- 정리하자면, 웹 표준을 지킬 경우 유지, 보수가 쉽고 웹 접근성을 확보할 수 있다.
    *웹 접근성 : 노인, 시각 장애인, 지체 장애인 등을 위한 서비스