[알토르] 0주차 과제 : 웹 기초 키워드

[ 알토르 과정 ]

 

- 주차별 과제 수행 및 발표 후 피드백 진행 (멘토링)
- 진행 속도와 이해도에 따라 선행 가능

---

 

[ 기술과제 ]

 

1. 웹브라우저 : 웹사이트를 볼 때 사용하는 소프트웨어 (ex. Chrome, Safari) 

 

Web = 인터넷 웹사이트 ('거미줄'처럼 웹사이트들이 연결됨)

Brouser = 둘러보는 도구

 

HTML = 텍스트, 이미지, 링크 등의 콘텐츠를 브라우저에 표현하는 언어 (웹사이트의 뼈대 / 정적)  

JavaScript = HTML만으로 구현 불가능한 기능을 위해 생긴 언어 (뼈대를 움직이게 하는 것 / 동적) 

CSS = HTML을 꾸며줄 때 사용하는 문법 (디자인)

 

2. 서버 : 컴퓨터에서 서비스를 하고 있는 것 (서비스 제공)

 

Service + er = 서비스 하는 사람

 

3. 클라이언트 : 서버한테 서비스를 제공 받는 것

 

컴퓨터는 서버도 클라이언트도 될 수 있음

(ex. 레스토랑 근무하는 동안은 서버지만 퇴근 하고 다른 레스토랑 가면 클라이언트다)

 

*HTTP : 클라이언트와 서버가 HTML을 주고 받기 위해 생긴 통신. 요즘에는 HTML 말고도 다양한 데이터를 주고 받을 수 있음

 

4. IP, DNS, Domain, PORT

 

IP = 컴퓨터의 집주소

(IPv4 : 0~255까지의 숫자 4가지 가지고 구성)

 

Domain = IP 주소의 별명

(숫자 외우기 힘드니 별명 부여)

 

DNS = 도메인과 IP 주소를 매칭해놓은 서버 

(컴퓨터는 별명 가지고는 만날 수 없음. 실제 집주소를 알아야 함.

DNS에게 질문. 별명을 주면 실제 주소를 알려줌. 웹의 전화번호부 역할)

 

PORT = 특정 서비스들의 출입문 번호(서비스 범위)

 

각각의 서비스마다 특정 번호가 부여되어 있음.

사용자는 이 서비스를 이용하기 위해서 번호표를 가지고 가야함

 

(ex. 전세계에 카페가 매우 많다. 카페마다 번호가 다르면 매번 번호표 체크하기 불편.

전 세계 카페끼리 모여 번호를 하나로 통일함 -> Well-Known Port)  

 

5. 네트워크 : 통신이 가능하면 네트워크 (너하고 나하고 대화 가능하면)

 

카페에서 친구와 대화중 = 네트워크

저 멀리 테이블도 4명이 대화중 = 네트워크

멀리있는 테이블과도 대화하고 싶어서 종이컵 전화기로 연결해서 대화 가능

근데 이걸 막 여기저기 연결하다보니 네트워크가 엄청 커짐

이 엄청 커진 네트워크를 인터넷이라고 함

 

6. 공유기

 

공유기는 다양한 디바이스가 연결되서 하나의 네트워크 망을 만들어 주는 것. 연결된 디바이스 끼리 대화가 가능함. IP를 변환해주는 역할도 함 (사설 IP-private을 인터넷에서 사용하는 공인 IP-public으로 변환)

 

즉 우리들만의 대화 공간을 만들고 외부와 소통할 수 있는 통로를 관리함

 

7. HTTPS : HTTP의 데이터가 다 암호화 되는 것

 

HTTP + S(Secure)

HTTPS는 HTTP에 보안(Secure)을 추가한 것으로, SSL(TLS) 기술을 사용해 데이터를 암호화하여 중간에서 해커가 통신 내용을 가로채거나 위장하는 공격을 막기 위해 사용

 

8. 브라우저 렌더링 과정

 

 

크롬(클라이언트)에서 'naver.com'(서버)를 검색창에 치면

크롬이 네이버 웹서버한테 html 주라고 요청 보냄

서버가 클라이언트한테 HTML을 줌

 

이때 크롬이 HTML을 한 줄 한 줄 해석해서 

실제 사용자가 보기 좋게 그려주는 과정이 브라우저 렌더링

 

추가설명 ) 한줄씩 해석하고 그려주는 과정 중간에

브라우저가 이해하기 쉬운 '나무 모양의 지도 - Tree 구조'로 먼저 만듦

이 지도가 있으면 브라우저가 당황 안 하고 내용을 고치거나 편하게 찾을 수 있음 

 

Tree 구조란 ?

 

HTML 코드를 보면 태그 안에 태그가 있고, 그 아래 태그가 있는 구조임

이걸 펼치면 나무 뿌리처럼 뻗어나감

 

이렇게 계층적으로 정리된 상태를 DOM이라고 한다.

즉 DOM은 브라우저 렌더링 과정에서 중간에 Tree 구조로 정리한 상태

---

 

[ 코드과제 ]

- 스스로 HTML/CSS 소스코드 만들어보기

 

HTML/CSS로 제작한 프로필 카드 페이지를 GitHub Pages로 배포

 

링크 : http://chanthedev.github.io/profile-card/