HTML을 배우기전 기본적인 내용을 먼저 알아보려 합니다.
<서버 / 클라이언트>
- 클라이언트 : 서버에게 요청(Request)하는 대상 (웹 브라우저, 안드로이드 등 요청을 하는 대상)
- 서버 : 요청받은 서비스를 제공(응답 Response)해주는 대상
<웹(web)>
요청과 응답이 일어나는 장소
+) 웹개발자 -> 웹에서 개발하는 사람
<웹 브라우저(Web Browser)>
사용자의 요청에 맞는 주소로 찾아가서 인터넷의 컨텐츠(문서와 그림, 멀티미디어 파일 등)를 검색 및 열람 후
사용자에게 응답하기 위한 응용 프로그램의 총칭.
주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 마이크로소프트 엣지, 오페라, 사파리 등이 있다.
<프로토콜(protocol)>
사람끼리 소통할 때 서로 이해할 수 있는 고용어를 사용해야 하듯이 컴퓨터끼리도 공용어를 사용해야 한다.
이러한 공용어를 원활하게 통신하기 위해 필요한 규약을 프로토콜이라고 한다.
- http:// (Hypertext Transfer Protocol)
클라이언트와 서버 간의 웹 페이지 등의 자원을 통신하는 규약
텍스트로 통신하기 때문에 가로채어 본다면 누구든 내용을 볼 수 있다.
- https:// (Hypertext Transfer Protocol Secure Soket)
SSL(Secyre Socket Layer) 프로토콜을 이용하여 자원을 공개키 암호화 방식으로
암호화 해서 통신하는 규약
서로 다른 키 2개가 존재하고, 1번키로 암호화를 했다면 반드시 2번키로만 복호화할 수 있다.
SSL인증서 구입 비용 및 갱신 비용이 발생하고 http에 비해서 서버에 부하가 더 많아진다.
+) http = 통신규약 / ip = 인터넷 규약
<IP(Internet protocol)>
사람이 태어나면 출생신고를 하고 고유번호인 주민번호를 발급받는다.
이를 통해 서로를 구분하듯이 네트워크 상에서 인터넷에 접속할 때 다른 컴퓨터와 구별될 수 있도록 하는 고유번호를 IP주소라고 한다.
cmd -> ipconfig -> ipv4
+) 네이버 주소로 찾아가기
(IP로 찾아가기) 인터넷 브라우저 주소창에 125.209.222.142 입력하여 접속
(도메인으로 찾아가기) 인터넷 브라우저 주소창에 https://www.naver.com으로 입력하여 접속
<Domain>
IP주소는 기억하고 이해하기 힘들기 때문에 이를 위해서 이름을 부여할 수 있도록 한 것.
<WWW(World Wide Web)>
인터넷에 연결된 전 세계 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보공간
<W3C(World Wid Web)>
WWW를 위한 표즌을 제정하고 관리하는 중립적인 기관
WWW를 연구하는 모임
<웹 접근성>
모든 사용자가 신체적, 환경적 조건에 관계 없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미한다.
마우스가 없는 환경이나 키보드만을 조작해야 할 경우, 신체적 장애로 인해 특수한 환경 하에 접속을 해야 되는 경우,
브라우저 별, 모바일 환경에서 접속해야 되는 경우와 같이 다양한 플랫폼에서도 정보제공이 다름이 없어야 한다는 것이다.
<웹 표준(Web Standard)>
웹에서 표준적으로 사용되는 기술이나 규칙을 의미하며, 이는 특정 브라우저에서만 사용되는
비표준화된 기술을 배제하고 W3C의 토론을 통해 나온 권고안을 사용하는 것을 말한다.
웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.
- 대표적인 웹 표준
1. HTML (Hypertext Markup Language)
웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크업 언어이다.
2. CSS (Cascading Style Sheets)
구체적으로 어떤 스타일로 요소가 표시되는 지를 정하는 규격이다.
HTML로 문서를 구조화하는 것 뿐만 아니라 구미기도 할 수 있지만
동일한 디자인을 사용한 문서가 여러 개 있다면, 변경 시 모두 하나씩 수정해야 하기 때문에
불편하다. CSS는 이런 문제를 해결함과 동시에 웹 페이지에서 내용과 스타일을 분리하고
역할도 분리해준다.
3. XHTML (Extensible HTML)
기존에 사용되던 HTML 규격이 가진 문제점을 극복하고, 보다 다양한 분야에 응용될 수 있도록
해주는 여러가지 확장된 기능을 포함한다. 하지만 XML기반으로 만들어졌기 때문에 지원되지 않는
브라우저도 있다. 따라서 HTML과 XHTML은 사실상 큰 차이 없이 사용된다.
4. XML (Extensible markup Language)
어떠한 데이터를 설명하기 위해서 임의로 지은 테그로 데이터를 감싼다.
태그로 데이터를 설명하며, 이것이 데이터의 표시(Markup)가 되고 추가적인 데이터가 생기면
태그 추가와 태그내부 내용 추가를 할 수 있다. 따라서 데이터 전달에 목적이 있다.
<? xml version= "1.0"?>
<user>
<userId>hds1234</userId>
<name>한동석</name>
</user>
<URI (uniform resource identifier) vs URL(uniform resource locator)>
I는 주소자체가 정보 naver.com/..../info_data.json
L은 로케이션 장소 news/naver.com
<HTML - 마크업 언어>
HTML은 마크업 언어이다.
마크업 언어란 우리가 보는 웹 페이지가 어떻게 구조화되어 있는 지 브라우저로 하여금 알 수 있도록 하는 언어이다.
<HTML의 요소>
(1) 여는 태그(Opening tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성된다.
(2) 닫는 태그(Closing tag) : 요소의 이름 앞에 슬래시(/)가 있다. 닫는 태그를 받드시 적어주어야 한다.
(3) 내용(Content) : 요소의 내용이며, 단순한 텍스트를 의미한다.
(1),(2),(3)을 통틀어 요소(Element)라고 한다.
요소의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로만 작성하는 것을 권장한다.
[내포된 요소(Nesting elements)]
요소 안에 다른 요소를 넣는 기법
[HTML 주석]
<!-- 주석 --> : Ctrl + Shift + /
[속성(Attrubutes)]
요소는 속성을 가질 수 있다.
<p class="conversation">You are much better</p>
속성은 요소에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.
특히 id와 class 속성은 스타일에 관련된 내용이나 기타 내용을 위해 해당 태그를
찾을 수 있는 구분점 역할을 수행한다.
[속성 사용 시 주의 사항]
1. 요소 이름 다음에 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고, 여러 속성이 있을 경우엔 속성 사이에도 공백이 있어야 한다.
2. 속성이름 다음에는 등호(=)를 작성한다.
3. 속성 값은 따옴표 안에 작성한다.