티스토리 뷰
1. 웹의 이해
1) 웹의 이해
- 웹 : 인터넷(전 세계가 연결된 통신망)에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
- 웹의 특징 : 정보를 하이퍼텍스트(링크, 참조)형식으로 표현하여, 하이퍼텍스트를 따라 이동하며 다양한 정보/문서들을 연결, 제공합니다.
- 웹 브라우저 : 어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것
2) 웹의 구조
- 클라이언트 : 서비스를 이용하는(요청하는)컴퓨터
- 서버 : 서비스를 제공하는 컴퓨터
- 서로 정보를 주고 받을 때에 지켜야 하는 약속(정해진 틀) : 프로토콜 -> HTTP
3) 웹 개발 직무 이해
- 프론트엔드 : 웹서비스(웹사이트)에서 사용자의 측면의 그래픽 사용자 인터페이스로, 사용자와 상호작용(글자 입력, 버튼 쿨릭, 화면 출력 등)을 담당합니다.
- 백엔드 : 웹서비스(웹사이트)에서 사용자의 눈에 보이지 않는 서버 측에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달합니다.
2. 프론트엔드
4) 프론트엔드 3대장
- HTML(웹 페이지 구성 요소들의 구조) + CSS(웹 페이지 구성 요소들을 꾸밈) + Javascript(웹 페이지 구성 요소들에게 생명력)
5) [예제로 배우는] HTML의 이해 - 웹 개발을 할 수 있는 유명한 툴 : IDE
- HTML이란 : 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어
- <> : 태그, 웹 페이지의 구성 요소 하나하나로 역할을 하게 됩니다.
ex) <태그>감싸진 글자가 그 태그의 역할을 맡습니다.</태그> - *여는 태그와 닫는 태그가 한 쌍일 수도 있고, 닫는 태그 없이 여는 태그가 단독으로 쓰이는 경우도 있습니다.*
- 자주 쓰이는 HTML 태그
- <h 숫자> : 제목 크기
-
<a href="옮겨갈 링크">링크 이름</a>
로그인 화면 만들기
- <form> : 사용자 입력을 받는 폼을 만든다.
- <input type = "원하는 타입"> : 다양한 타입(text, email, password, number 등)으로 데이터를 입력받음.
6) [예제로 배우는] CSS의 이해
7) [예제로 배우는] JavaScriptL의 이해