Web (1)

Web

ddanss 2018. 9. 11. 22:43

728x90

web editor : 웹 문서를 작성하는 프로그램

web browser : 웹 문서를 보는 프로그램 – ex) 익스플로러 크롬, 파이어폭스 같은 프로그램들

HTML(HyperText Markup Language) : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어

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

Markup : tag를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것.

front-end : 사용자와 직접 마주하는 부분을 가리키는 것으로 웹 브라우저 화면에 사이트 내용을 보여주는 것.

back-end : 회원제 사이트의 사용자 정보나 게시판의 게시물 내용을 저장하고 수정, 삭제하는 부분. 정보를 저장하고 관리하는 부분.

tag : Markup 할 때 사용하는 약속된 표기법

태그를 사용할 때 생각해야되는 것.

1. Web browser는 <와>사이에 있는 문자는 태그로 인식한다!

2. 태그는 소문자로 쓰는 것을 권장한다.

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

4. 적당히 들여쓴다. (들여쓰기할 땐 Tab키 사용)

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

6. 포함 관계를 명확히 한다.

<!doctype> : 문서 유형을 지정하는 선언문

<!doctype html> - HTML5의 버전을 사용한다! 라고 알려주는 선언문.

HTML4에서처럼 strict mode인지, transitional mode인지 구별할 필요도 없고 문서 유형을 정의하는 긴 구문을 기억하지 않아도 된다. <!doctype html> 만 기억하자!

<html>태그 :웹 문서 시작을 알리는 태그

문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그.

-> lang이라는 속성을 사용해 사용할 언어를 지정할 수 있다. ko 는 korea

-> de : 독일어, en : 영어, fr : 프랑스어, ja : 일본어, ko : 한국어, zh : 중국어

<head>태그 : 브라우저에게 정보를 주는 태그

web browser화면에는 보이지 않지만 web browser가 알아야 할 정보들은 모두 <head> 부분에 입력한다. 문서에서 사용할 외부 파일들도 이곳에서 링크한다.

- <head>사이의 주요 태그

<title> 태그 : 문서 제목

거의 모든 web browser의 제목 표시줄에 표시됨. 이것을 보고 페이지 전체의 내용을 추측하니 신중하게 짓자.

2. <meta> 태그 : 문자 인코딩 및 문서 키워드, 요약 정보

- 웹 문서 정보를 검색 엔진에게 전달해 주는데 매우 유용하게도 사용 됨.

가장 중요한 부분은 문자 인코딩임!

HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8방식을 사용함.

문서에 대한 간단한 설명을 지정할 수 있다. 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시됨.

이외에 스타일 시트를 사용하기 위한<style>태그와 <link>태그 등이 사용됨.

<body>태그 : 실제 부라우저에 표시될 내용