책으로 공부하는 비전공자 코딩 챌린지 1일차 - 웹 용어와 HTML

디자이너가 코딩을 배우게 되면 개발자와 협업할 때 원활하게 의사소통이 가능하며 이는 더 좋은 결과물로 이끌어준다.

즉 일을 잘하는 디자이너로 만들어준다.

 

웹 코딩은 파이썬, c언어 , 자바처럼 결과물이 텍스트로 보여지는 것과 달리 비주얼 하게 보이기 때문에 더 쉽게 재미를 느낄 수 있다.

<1일 차 목차>

0. 코드 에디터 설치
1. 웹개발 언어별 특징
2. 코딩 목표 세우기
3. 웹과 html
3-1. 웹 페이지

0.  편집 도구 (vs code) = 코드 에디터 설치

코드는 메모장으로 작성해도 되나 효율적으로 작성하기 위해 설치형 에디터인  visual studiocode를 다운로드 한다.

vscode는 현업에서 가장 많이 사용하는 에디터이며 코딩에 필요한 기능을 제공한다 (자동완성 등)

에디터 종류: 아톰, 비주얼 스튜디오 코드, 서브라임 텍스트, 이클립스 등이 있음

 

1. 웹 대표 기술로는 html, css, js가 있다.

언어	html [1단계]	css [2단계]	자바스크립트 [3단계]
역할	기본구조제공	서식 및 레이아웃 제어	요소의 동작을 제어

 

2.  웹과 HTML

- 웹: 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 서비스로 텍스트, 그림, 소리, 영상 등이 포함된다.

WWW(World Wide Web) = W3

 

- 네트워크: 컴퓨터와 컴퓨터를 연결해주는 망이다. 망들이 모여 더 큰 네트워크인 인터넷이 된다.

네트워크와 인터넷은 통신 규약(프로토콜) 기반으로 연결되어 있으며  대표적인 통식 규약이 TCP/IP이다.

 

네트워크 이미지

기능	이름	통신규약
웹	www	HTTP, HTTPS
이메일	Email	SMTP, POP3, IMAP
파일전송	FTP	FTP, SFTP

- HTML (Hyper Text Markup Language)

하이퍼텍스트를 마크업(표시) 하는 언어이다. 웹 페이지의 구조를 지정하며 자체적으로 프로그램을 만들 수 없어 프로그래밍 언어가 아니다. 프로그래밍 언어는 자체적으로 프로그램을 만들거나 논리 흐름을 제어하는 등 갖춰야 할 기능이 더 많다.

 

2-1. 웹페이지

정보를 하이퍼텍스트 양식으로 제공하는 웹 문서로 브라우저에 주소를 입력해서 해당 창으로 넘어갔을 때 보이는 화면을 뜻한다. 인터넷은 클라이언트와 서버 사이를 오가며 동작한다.

 

클라이언트(요청)- 서버(응답)

출처: 위키백과

요청과 응답이 일어날 때 웹 페이지 코드가 서버에서 클라이언트로 전달되는데 이때 http통신 규약을 이용한다.

http통신 규약으로 실어 나르는 대상인 문서는 하이퍼 텍스트 양식으로 되어있으며 이 텍스트는 html이라는 마크업 언어를 사용해 작성해주어야 한다.

 

-하이퍼텍스트: 정해진 순서 없이 참조를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트다.

대표 예로는 하이퍼링크가 있다.

 

-브라우저:  하이퍼텍스트를 해석해서 보여주는 대표적인 클라이언트 (크롬, 웨일, 익스플로어 등)