PC 통신과 WEB의 차이 PC 통신은 반 유선 공중전화망(PSTN)과 모뎀을 통해 연결되며, 연결되는 반대편에서 사전에 정해진 사업자 또는 개인이 서비스를 제공하는 폐쇄적인 형태이며, 속도가 느립니다. 반면, WEB은 개방되어 있고, 광랜(FTTH)를 사용하여서 속도가 빠릅니다.
WEB은 인터넷이란 서비스 체계 위에서 동작하는 서비스 중에 하나입니다.
1세대, 2세대, 3세대 웹의 발전과 특징
1. Web 1.0 :정보 제공 위주, 정적
어느 누구나 프로그램을 대중에게 공개할 수 있는 세상이 도래했었습니다.
전통적인 웹 시스템이었으며, 정적이었습니다.
브라우저를 통해 웹 서버로부터 HTML 파일을 받아오는 형식이었습니다.
초창기 웹 사이트는 단순히 정보 제공 위주였기 때문에user interaction이 많이 요구되지 않았습니다.
HTML, CSS를 주로 사용했습니다.
2. Web 2.0: user interaction, 동적
일방향적으로 정보를 제공받던 사용자가 직접 정보를 생산하고 공유하게 되었습니다.
2세대 웹은 웹서버로부터html파일을 받는것에 더해서javascript를 통해 필요한 정보를 주고받습니다.
웹서비스가 발전함에 따라user interaction이 요구되기 시작하였고, 동적인 형태로 변화했습니다. -이런 요구에 따라 웹브라우저에서 작동하는 언어인자바스크립트가 출현했습니다. -그러나 아직은javascript와API가 범용적으로 사용되지는 않았습니다.
예시)
네이버블로그-개개인이 사용 가능
wikipedia-누구나 수정, 추가 가능
-> 결정적인 사건: SNS 서비스와 스마트폰의 결합
3. Web 3.0:프론트엔드/백엔드 구분
데이타가 투명하게 공개됩니다.
동적인 기능이 주가 되며 3세대 웹이 됩니다.
SPA : Single Page Application: 단일의 html 페이지에서 전체 웹 사이트/서비스를 구현합니다.
이전에는 페이지 구성에 필요한 요소를 매번 전송했다면 3세대 웹에서는 서버에 필요한 파일을 한번에 다운받고, 그 뒤로는 실시간 데이터만 주고받습니다.
이에 따라 HTML/JavaScript를 개발하는 Frontend와 데이터를 개발하는 Backend가 명확히 나뉘게 됩니다.
네트워크
네트워킹이란?
두 대 이상의 컴퓨터를 케이블로 연결하여 네트워크를 구성하는 것입니다.
서버는 "서브" 정보를 제공한다는 의미로 서버이며, 정보를 제공하는 사업자가사용하는 컴퓨터 또는 컴퓨터 위에 설치되어 있는 소프트웨어들을 서버라고 부릅니다.
클라이언트는 무언가를 요청하는 사람을 클라이언트라고 합니다.
즉 서비스 및 데이터를 요청하는 쪽이 클라이언트입니다.
HTTP란?
HTTP는 인터넷 위에서 동작하는 서비스 중에서 하나인 WEB이라는 서비스를 이용하기 위해서 준수해야 되는통신 규약
즉, 클라이언트가 서버에게 요청할 때는 어떻게 요청해야 되고 또 그 요청에 대해서 서버가 응답할 때에는 어떻게 응답해야되는가?라고 하는 것이 약속 규칙으로 미리 정해져 있습니다.
URL란?
네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약
http://<host>:<port>/<path>?<searchpart> http://www.google.com/search?q=대학교 http://는 프로토콜, 통신규칙입니다. host는 서버의 규칙입니다. 경로는 호스트 내 서비스의 위치입니다. 서비스별로 분할이 됩니다. 예를 들면 검색=search, 회원=member searchpart는 쿼리문자열로 이루어져있습니다. ?기호로 시작하고 &로 연결을 합니다. 키 값 쌍으로 구성됩니다.
Layout
웹페이지에서 보이는 규칙적인 구조입니다.
용도별 태그는 영역 분할뿐만 아니라 웹페이지 해석을 도와줍니다.
semantic이란?
시맨틱(Semantic) HTML을 직역하면의미론적 HTML이 됩니다.
즉, 의미가 잘 전달되는 웹입니다.
css의 구성
css 파일 연결하는 방법같은 폴더 내에 html 파일과 css 파일 생성<link rel="stylesheet" href="파일의 위치">
1. css 기본 구조
선택자: 어떤 HTML 요소에 스타일을 적용할지 선택
속성: 스타일을 부여할 항목
값: 속성에 대한 값
선언: 속성과 값을 합한 부분
규칙: 선택자와 선언부의 조합
body는 선택자, background-color는 속성, red는 값, background-color: red;는 선언, 코드 전부를 통틀어서 규칙
2. css 선택자
요소 전체에 적용-Universal
* {
color:brown;
}
특정 태그 전체에 적용
h1 {
color:brown; }
특정 클래스에 해당되는 요소에 적용
.tool {
color:brown;
}
특정 클래스가 명시된 특정 태그에 대해 적용
h1 .intro {
color:brown;
}
특정 아이디에 해당되는 요소에 대해 적용
#original {
color:brown;
}
특정 아이디가 명시된 특정 태그에 대해 적용-같은 아이디 중복 사용될 때
h2#original {
color:brown;
}
부모 요소 내의 특정 자식 요소
div h2 {
color:brown;
}
웹 브라우저 쿠키란?
웹 서버가 웹 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보,
웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일입니다.
웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장합니다.
일반적으로 쿠키에는 만료일이 있습니다.
예를 들어, 브라우저를 닫는 경우 자동으로 삭제되는 쿠키도 있으며(세션 쿠키),
일부는 수동으로 삭제되기 전까지 남아있는 등 더 오랜기간 동안 컴퓨터에 저장되는 쿠키도 있습니다(지속적 쿠키).
본 웹사이트는 세션 및 지속적 쿠키의 사용을 통해 유저들에게 일관성 있고 간소화된 웹 경험을 제공합니다.
세션이란?
세션이란일정 시간동안같은 사용자(정확하게 브라우저를 말한다)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이라고 합니다.
또한 여기서일정 시간이란 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점을 말합니다.
즉, 방문자가 웹서버에 접속해 있는 상태를 하나의 단위로 보고 세션이라고 칭한다는 것입니다.
세션과 쿠키의 차이점은?
-쿠키의 경우는 방문자의 정보를방문자 컴퓨터의 메모리에 저장하는 것을 말합니다.
예를 들자면 ID나 비밀번호를 저장하거나 방문한 사이트를 저장하는데에 사용합니다.
-세션은 방문자의 요청에 따른 정보를 방문자 메모리에 저장하는 것이 아닌 웹 서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는서버에 저장을 하는것을 말합니다.
PORT란?
"논리적인 접속장소"이며, 특히 인터넷 프로토콜인 TCP/IP를 사용할 때에는 클라이언트 프로그램이 네트워크 상의 특정 서버 프로그램을 지정하는 방법으로 사용됩니다.
대부분의 경우 하나의 컴퓨터에는 여러 개의 서버가 실행될 수 있습니다. 컴퓨터에 여러 개의 서버가 실행되고 있다면, 어느 서버에 접속해야 하는지 컴퓨터에게 알려주어야 합니다. 이때 사용되는 것이 포트 번호입니다.
IP란?
인터넷에 연결되어 있는 모든 장치들(컴퓨터, 서버 장비, 스마트폰 등)을 · 식별할 수 있도록 각각의 장비에게 부여되는 고유 주소입니다.
우리 휴대폰마다 전화번호가 다르듯이 컴퓨터도 컴퓨터만의 주소(전화번호)를 가지고 있어야 합니다.
IP는 유동 IP와 고정 IP로 나눌 수 있습니다.
고정IP란 말 그대로 하나의 IP주소를 컴퓨터가 고정적으로 가지고 있고 IP가 변치 않는 다는 것을 의미합니다.
유동IP는 고정IP와 달리 컴퓨터를 사용할때 남아 있는 IP중에서 돌아가면서 부여하는 IP이다.
조합선택자
후손보다는 자식을 많이 사용합니다. (사용자 위주로 생각하기) 요소의 가중치를 둬야하는지 항상 생각하면서 선택자 쓰기!
1. 후손선택자 = 자손선택자 = 하위선택자
- 자식을 포함하는 의미 = 계층구조에서 하위에 오는 모든 자손선택
- 선택자 :공백(스페이스바 한번)
→ 사진이 의미하는 것 :#container ul
2. 자식선택자
- 앞 요소의 자식인 뒷요소를 선택 =직계 자식만을 선택
- 선택자 :>
→사진이 의미하는 것 :#container>ul
3. 동위선택자 = 형제선택자
- 같은 부모를 가진 요소들 = 계층구조에서 요소 바로 다음에 오는 요소선택
- 선택자 :+, ~
- 인접형제선택자(+) : 앞의 요소 바로 뒤에 있는 요소만선택
→사진이 의미하는 것 :p+ ul
- 일반형제선택자(~) : 앞요소 뒤에 있는 모든 요소를 선택
→사진이 의미하는 것 :p~ ul
가상 요소 선택자
선택자::가상요소 {
속성: 속성 값;
}
content 속성은 ::before와 ::after 가상 요소에 사용할 수 있는 속성들 중 가장 중요한 역할을 하는 속성입니다. 그리고 가상 요소에만 사용할 수 있습니다.
내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의합니다.
특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있습니다.
가상 요소는 inline 요소이므로 특정 영역을 갖기 위해서는 css에 display: block;을 사용해야 합니다.
