#1_HTML 기본

- 웹 편집기 : 웹 문서를 작성하는 프로그램 ex. 메모장, 비쥬얼코드 등

- 웹 브라우저 : 웹 문서를 보는 프로그램 ex. 익스플로어, 구글, 사파리 등

 

HTML(HyperText Markup Language)란?

ㄴ 하이퍼텍스트 마크업 랭귀지의 줄임말. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어.

 

  * 하이퍼텍스트(HyperText) : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

  * 태그(Tag) : 소스에서 <>(꺽쇠)로 묶인 부분

  * 마크업 : 태그(tag)를 사용해 문서 어느 부분이 제목이고 본문인지 등을 표시하는 것. 태그를 붙이는 걸 마크업이라고 한다.

    ex. <P> 이렇게 양 옆에 이 글이 어디에 해당하는지를 이야기 하는 것 </P>

 

- 네이티브 앱 : iOS나 안드로이드 같은 운영체제 별로 따로 개발한 모바일용 앱

  * 아이폰 앱이나 안드로이드 앱을 제작하는 프로그래밍 언어는 따로 있지만 앱 화면을 보여주는 정보들은 html과 CSS로 제작한다.

- 웹앱 : HTML5의 API를 사용하여 모바일 운영체제와 상관없이 실행되는 앱

 

프론트엔드와 백엔드

- 프론드엔드(front-end) : 사용자와 직접 마주하는 부분. 웹 브라우저에서 보여지는 화면. HTML와 CSS가 기본으로 필요하며 자바스크립트도 사용해야 한다.

- 백엔드(back-end) : 서버에 저장된 정보들을 관리하는 부분. 눈에는 직접적으로 보이지 않는다.

 

태그의 특징

1. 태그는 <와>를 이용하여 구분한다.

ㄴ ex. image 삽입 태그는 <img>, 텍스트를 삽입할 때는 <p> 태그

 

2. 태그는 소문자로 쓴다.

ㄴ태그는 대소문자를 구별하지 않지만 HTML5 표준명세는 태그 사이의 속성들은 모두 소문자로 사용할 것을 권장한다.

    ex. <img src="test.jpg"> (O)

         <IMG srg="test.jpg"> (X)

 

3. 여는 태그와 닫는 태그를 정확히 입력한다.

ㄴ 대부분의 태그는 <p>~</p> 처럼 여는 태그와 닫는 태그가 한쌍이다. 종종 <img>나 <br>처럼  닫는 태그가 없는 경우도 있으나 닫는 태그가 필요한 경우에는 반드시 닫는 태그를 삽입해야함.

 

4. 적당히 들여쓴다.

ㄴ HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식한다. ex. "    " = " "

ㄴ 소스를 들여 쓸 때는 "tab"키를 이용

 

5. 태그는 속성과 함께 사용할 수 있다.

ㄴ HTML태그는 태그에 여러 기능을 추가하는 속성과도 함께 사용된다.

 즉, <태그 속성="속성값" 속성="속성값" …> 형태로 사용할 수 있다.

 ex. <img> 태그의 속성

    - src : 이미지 파일의 경로를 알려주는 속성

    - width, height : 이미지의 크기를 알려주는 속성

    - alt : 이미지에 보조설명을 붙여주는 속성

 

6. 포함관계를 명확히 할 것

ㄴ 여는 태그와 닫는 태그의 쌍을 정확히 맞추기

ex. <u><i>만약 네가 봄이라면</i></u>