01 웹은 어떻게 움직일까
02 웹 개발 시작하기
03 HTML 기본 문서 만들기
04 웹 문서에 다양한 내용 입력하기
05 입력 양식 작성하기
01 웹은 어떻게 움직일까
01-1 여러 형태의 웹 사이트
이미 친숙한 웹 사이트
웹 개발
- 웹 사이트에 어울리는 여러 장치와 기능을 만드는 것
플랫폼으로서의 웹
- 인터넷의 다양한 서비스를 사용할 수 있게 해주는 출발점으로 웹을 사용함
- 이미 일상에 스며들어 있음
웹 개발과 웹 표준
- 웹 개발
- 단순히 웹 사이트뿐만 아니라 애플리케이션처럼 동작하는 웹, 플랫폼으로 동작하는 웹을 만드는 일
- 디지털 트랜스폼 환경에서는 웹을 다양한 스마트 기기에서 활용할 수 있도록 개발하는 것이 중요함
- 모든 스마트 기기가 함께 지켜야 할 표준이 필요함 -> 웹 표준(HTML, CSS, 자바스크립트)
01-2 네트워크 이해하기
컴퓨터끼리 연결하기
- 네트워크: 쉽게 말해 여러 컴퓨터를 연결해 놓은 체계를 말함
- 인터넷: 라우터를 이용한 네트워크를 끊임없이 연결하면 거대한 네트워크를 만들 수 있음
서버와 클라이언트의 관계
- 서버: 네트워크에 연결된 컴퓨터가 인터넷에 공개할 정보를 저장하는 역할
- 라우터: 서버 컴퓨터에 저장 및 연결
- 클라이언트: 서버에 연결해서 정보를 보여 달라고 요청하는 역할
서버와 클라이언트의 작동 과정 살펴보기
- 웹의 작동 방식: 인터넷을 통해서 클라이언트와 서버가 정보를 주고받는 과정
클라이언트: 정보를 보여 달라거나 작업을 처리해달라고 요청
서버: 클라이언트가 요청한대로 정보를 보여주거나 작업을 처리
- 클라이언트가 웹 브라우저에 홈페이지 주소를 입력해 정보를 요청함
- 요청이 라우터를 통해 서버 컴퓨터에 연결됨
- 요청을 찾으면, 서버 컴퓨터에서 반대 방향으로 라우터를 거쳐 클라이언트에게 정보를 전달함
- 웹 브라우저에 해당 정보 표시
프론트엔드 개발과 백엔드 개발
프론트엔드
- 사용자 앞에 보이는 영역으로, 웹 브라우저 화면에 보이는 것을 다룸
백엔드
- 사용자 뒤에 있어서 보이지 않는 영역을 다룸
01-3 웹의 기본 동작 이해하기
IP 주소와 도메인, DNS 서버
IP 주소
- 인터넷에 연결되어있는 여러 사이트를 구분하기 위해 붙이는 주소
- 서버는 IP주소를 이용해 웹 페이지를 구분함
- IPv4: 4개의 숫자 조합으로 구분하는 IP주소, 대부분의 웹사이트가 사용
- IPv8: 8개의 숫자 조합으로 구분하는 IP주소
- IPv6: 휴대폰 등에서 사용함
도메인
- IP주소를 이해하고 기억하기 쉬운 도메인으로 바꿔서 사용함
- 예) google.com, naver.com
DNS 서버
- 도메인을 IP주소로 바꿔 주는 역할
- 등록된 도메인 정보를 가지고 있다가 사용자가 도메인을 입력할 때마다 빠르게 IP주소로 바꿔줌
HTTP 프로토콜과 HTTPS 프로토콜
HTTP 프로토콜
- 인터넷이 등장하면서 같이 만들어진 개념
- 모든 사이트가 HTTP 프로토콜을 사용해 접속
- 클라이언트와 서버가 사용하는 프로그래밍 언어와 동작하는 방식이 다르지만 공통으로 인식하는 규칙
HTTPS 프로토콜
- 웹이 애플리케이션이나 플랫폼으로 발전하면서 개인 정보나 결제 정보처럼 민감한 내용이 오고갈 때, 암호화를 추가해 보안(security)을 강화한 것
01-4 웹 접근성 알아보기
웹 접근성이란
웹 접근성
- 웹 개발에서 나이나 장애에 상관없이 모든 사용자가 접근할 수 있어야 함
- web accessibility를 줄여서
A11Y또는a11y라고 함
어떤 걸 고려해야 할까
한국지능정보사회진흥원
"웹 접근성이란 어떠한 사용자(장애인, 노인 등), 어떠한 기술 환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것"
어떤 사이트를 참고할까
연습문제
- (1) 클라이언트
- (1) 도메인을 IP주소로 바꾸는 것
- (2) IP주소
- (2) 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 하기 위해
- (1)
- (3)
