-
[데브코스] 9일차 교육 내용정리TIL/교육 내용 정리 2024. 4. 16. 11:55
2주차 1번 째 시간이네요. 한 주 참... 빨라요
Part 1. 웹의 이해
인터넷
International Network 약자 - 우리는 모두 연결되어 있다.
웹
인터넷으로 연결된 공간
웹의 시작
연구원들 간 신속한 정보교환을 위해 고안
웹의 특징
정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결 제공합니다.
하이퍼텍스트(hypertext)란
단순히 글자가 아닌 그 이상의 기능을 가진 텍스트로 주로 링크, 참조의 역할을 하는 기술을 말합니다.
웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것을 ‘웹 서핑을 한다.’ 또는 ‘웹 브라우징을 한다.’고 표현한다.
웹 페이지가 모여 웹 사이트가 된다.
borwse
어떤 것(=웹 페이지 또는 웹 상의 데이터)을 찾거나 읽을 때 사용하는 것을 우리는 웹 브라우저(Web browser)라고 부릅니다.
Part 2. 웹의 구조
클라이언트
서비스를 이용하는(요청하는) 컴퓨터
서버
서비스를 제공하는 컴퓨터
서로 정보를 주고 받을 때, 지켜야 하는 약속이 존재합니다. 반드시 이 약속을 지켜서 통신해야 하며, 우리는 이 약속을 프로토콜이라 부릅니다.
우리는 어떻게 웹을 사용하고 있을까 ❓
인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(Hyper Text Transfer Protocol)를 사용하여 데이터를 주고 받습니다.
Part 3. 웹 개발 직무 이해
프론트엔드
웹 서비스(웹 사이트)에서 사용자의 측면(Client-side)의 그래픽 사용자 인터페이스로(화면), 사용자와 상호작용(글자 입력, 버튼 클릭, 화면 출력 등)을 담당합니다.
백엔드
웹 서비스(웹사이트)에서 사용자의 눈에 보이지 않는 서버 측(Sever-side)에서 프론트엔드에서 전달 받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달 합니다.
Part 4. 프론트엔드
웹은 무엇으로 이루어져 있을까❓
HTML + CSS +JS
HTML : 웹 페이지 구성 요소들의 구조 하이퍼텍스트 즉, 웹페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어입니다.
HTML은 <>괄호를 사용합니다. 이걸 “태그”라고 부릅니다.
태그는 웹 페이지의 구성 요소 하나하나로 역할을 하게 됩니다.
<태그>감싸진 글자가 그 태그의 역할을 맡습니다.</태그>
*여는 태그와 닫는 태그가 한 쌍일 수도 있고, 닫는 태그 없이 여는 태그가 단독으로 쓰이는 경우도 있습니다.
CSS : 웹 페이지 구성 요소들을 꾸밈
Javascript : 웹 페이지 구성 요소들에게 생명을
우리는 웹 개발을 어디서 할까요
웹 개발을 할 수 있는 유명한 툴(vscode,이클립스,...)
IDE(Integrated Development Environment, 통합 개발 환경)이라고도 부릅니다.
HTML 기본 툴
<!DOCTYPE html> <!-- 이 문서는 HTML 문서입니다. --> <html> <head> <!-- 문서의 문자 인코딩을 설정합니다. --> <meta charset="UTF-8"> <!-- 문서의 제목을 설정합니다. --> <title> 첫번째 HTML </title> </head> <body> <!-- 화면에 "Hello, html !"을 출력합니다. --> Hello, html ! </body> </html>자주 쓰이는 태그
- <h1></h1> 태그 제목…
- <a href=”http://naver.com”>네이버</a> : 링크
- <form> <input> </form> : 입력을 받는다.
- <br> : 띄어쓰기
We Can Go
<!DOCTYPE html> <!-- HTML5 문서임을 선언합니다. --> <html> <head> <!-- 문자 인코딩을 UTF-8로 설정합니다. --> <meta charset="UTF-8"> <!-- 문서의 제목을 설정합니다. --> <title> GO </title> </head> <body> <!-- 페이지 제목을 나타냅니다. --> <h2>We Can Go</h2> <!-- Programmers 사이트로 이동하는 링크 --> <a href="http://Programmers.co.kr">Programmers</a> <br> <!-- "first.html"이라는 파일로 이동하는 링크 --> <a href="first.html">My First Page</a> </body> </html>로그인 화면
<!DOCTYPE html> <!-- HTML5 문서임을 선언합니다. --> <html> <head> <!-- 문자 인코딩을 UTF-8로 설정합니다. --> <meta charset="UTF-8"> <!-- 문서의 제목을 설정합니다. --> <title> LOGIN </title> </head> <body> <!-- 로그인 양식 시작 --> <h1>Login</h1> <form> <!-- 사용자명 입력란 --> ID : <input type = "text"> <br> <!-- 비밀번호 입력란 --> PW : <input type = "password"> <br> <!-- 로그인 버튼 --> <input type="button" value="login"> </form> <!-- 로그인 양식 종료 --> </body> </html>'TIL > 교육 내용 정리' 카테고리의 다른 글
[데브코스] 13,14(주말) 15일차 교육내용 정리 (0) 2024.04.22 [데브코스]10,11,12일차 교육내용 정리 (1) 2024.04.19 [데브코스] 6,7일차(주말) 8일차 교육 내용정리 (0) 2024.04.15 [데브코스] 5일차 교육 내용정리 (1) 2024.04.12 [데브코스] 3일차(복습방학) 4일차 교육내용정리 (0) 2024.04.11