-
Internet2. HTML학교 수업/인터넷프로그래밍 2020. 5. 13. 18:46
HTML(Hyper Text Markup Language)
- www서비스에서 하이퍼텍스트 문서를 만들기 위해 사용되는 마크업 언어
- www를 통해 서비스하는 모든 내용은 HTML로 표현되어야 한다.
Hypertext?
- 노드(node)와 링크(link)로 구성
노드는 문서고, 링크는 문서를 서로 연결하는 통로
-> 링크를 통해 서로 다른 문서 오가며 정보를 얻고,
필요할 경우 자신이 아는 정보를 문서로 만들어 다른 문서와 연결 가능
- 대표적인 예가 위키백과
Markup Language?
- 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어
- 데이터를 기술한 언어로, 프로그래밍언어와는 차이가 있다.
www? World Wide Web,w3 -> 간단히 Web이라고 부름
HTML의 문법
1. 요소 (Element)
HTML의 요소는 시작 태그 + 콘텐츠 + 종료 태그로 구성된다.
<title> Page title </title>
① 시작 태그 (start tag): 어떤 태그를 사용하는지 명시
② 콘텐츠 (contents): 해당 태그가 적용되기를 바라는 텍스트 문구
③ 종료 태그 (end tag): 해당 태그가 적용되는 끝 지점을 명시, 종료태그의 이름은 슬래시 문자("/")로 시작
태그(tag) : HTML을 기술하기 위해 사용되는 명령어의 집합
꺾쇠괄호(“<>”)안에 둘러 싸인 키워드
+ 종료태그가 없는 태그도 존재 (ex) <img>, <br> 등 이들은 빈 태그(empty tag)라 한다.
2. 속성 (Attribute)
HTML에게 추가적인 정보나 명령을 받을 수 있게 정보들을 전달해주는 것
이름(Attribute Name)-값(Attribute Value) 형태이고, "="로 구분한다.
요소의 시작태그 안에서 요소의 이름 다음에 쓰인다.
ex)
이미지 정보
<img src = "html.png">
src : 이미지의 경로 명시 ->Attribute Name (속성명), "html.png" -> Attribute Value (속성값)
<abbr id ="anID" class ="aClass" style ="color:blue" title = "하이퍼텍스트 마크업 언어">HTML</abbr>
id 속성명 : 요소에 대한 문서 전체의 고유 식별자 제공 ->"anlD" 속성값
class 속성명 : 유사한 요소를 분류
style 속성명 : 다양한 tag의 스타일 지정
3. HTML의 기본구조
① <!DOCTYPE html>: 문서 형식 정의 태그로 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다.
② <html>: 전체 HTML 문서를 감싸는 태그, 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다. 하나만 존재해야 하고 HTML바깥에 DOCTPYE을 제외한 다른 태그가 존재하면 안된다.
③ <head>: HTML 문서에 대한 정보를 나타내는 부분으로 주로 외부소스를 참조해야 할 경우 사용한다.
+ <title> : 문서의 제목을 나타내는부분
④ <body>: HTML 문서에서 실제적으로 보여지는 부분
대부분의 태그가 이곳에 들어간다.
<!DOCTYPE html> ß HTML5 표준을 정의하며 없을 경우 4버전으로 인지한다.
<html>
<head>
<title>타이틀</title>
화면에 보여지기 위한 추가적인 정보(메타정보)를 담고 있는 부분
</head>
<body>
화면에 보여지는 부분, 문서본문
</body>
</html>
4. 상대경로와 절대경로
① 상대경로 (Relative): 현재 위치를 기준으로 해당 자료의 위치를 표현한다. 주로 웹사이트 내부의 자료를 연결할 때 사용
② 절대경로 (Absolute): 전체 인터넷을 기준으로 해당 자료의 위치를 표현한다. 주로 외부 웹페이지로 연결할 때 사용
ex) index.html문서 연결
상대경로: index.html , 절대경로: https://google.com/index.html
HTML5
- HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어로 모바일 웹에서의 핵심 기술
- 차세대 웹 표준으로 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현, 제공하도록 진화한 “웹 프로그래밍 언어”
- 오디오, 비디오, 그래픽 처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 웹 자체에서 처리할 수 있는 기능이 대폭 향상됨
- 위에서 말했다 싶이, 문서 작성시 최상단에 아래 선언문을 적어야 HTML5사용가능
<!DOCTYPE html>특별한 경우가 아닌 이상 DOCTYPE 부분은 대문자로 적는 게 좋다.
- 특징
1. 클라이언트와 서버와의 통신이 가능 è GET방식과 POST방식이 존재
GET vs POST 방식
1. GET: 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 방식으로 게시판의 게시물을 조회할 때 쓸 수 있다. (DB로 따지면 SELECT에 가까움)
Get을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송(query string)되고 ?로 구분한다. (요청 패킷의 헤더를 통해 전달)
www.example.com/show?name1=value1&name2=value2
특징
1) 캐시가 될 수 있고 데이터가 북마크 될 수 있다.
2) 전송 데이터 크기가 작고 내용이 URL에 노출되기 때문에 중요한 정보를 다루면 안된다. (보안 안됨)
2. POST: 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 방식으로 게시판에 게시글을 작성하는 작업 등을 할 때 사용할 수 있다. (DB로 따지면 CREATE에 가까움 à 파일 전송, 로그인 전송)
전송할 데이터를 HTTP메시지 body부분에 포함시켜서 전송한다.
Host: w3schools.com
name1=value1&name2=value2
특징
1) 캐시 되지 않고 데이터가 북마크 되지 않는다.
2) 전송 데이터의 길이 제한이 없고 내용이 URL에 노출되지 않음(보안 유지, 암호화되어 보안성을 보장하는 것은 아님) è 전송데이터 크기가 크거나 주소 표시줄에 데이터 내용을 감주고자 할 때 사용
2. 다른 외부 Active-X(Internet Explorer용 플러그인)와 같은 plug-ins을 사용하지 않고도 웹 서비스 제공할 수 있을 정도로 많은 기능이 추가됨
3. 시맨틱(Semantic) 태그를 사용한 레이아웃 구성 (새로 추가됨)
-> HTML5에서는 시멘틱 웹(semantic web)을 중요시해서 시맨틱 태그라는 것을 만들어 사용함
시멘틱 웹(semantic web)
- 기계가 사람을 대신해서 웹페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해 주는 것
시멘틱 태그(semantic tag)
- 웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그
- 즉, 태그의 이름을 통해 문서의 구조를 짐작할 수 있고 레이아웃을 구성하기 위해서 사용한다.
(컨테이너로의 역할)
HTML5이전에는 <div>와 <span>에 id와 class속성을 이용하여 구역을 나누고 스타일을 지정했지만
HTML5에서는 시맨틱태그를 이용하여 코드의 가독성을 높이고 명확하게 한다.
즉, <div class=”header”> à <header>와 같이 뜻이 명확한 태그를 제공
시멘틱 태그 ex)
'학교 수업 > 인터넷프로그래밍' 카테고리의 다른 글
Internet 4. script language (0) 2020.05.14 Internet3. CSS (0) 2020.05.14 Internet 1.web & URI (0) 2020.05.13
