웹의 이해
인터넷 Internet : 전세계가 하나의 통신망 안에 있다. International Network
웹 Web : World Wide Web. WWW, W3 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 공간
웹은 연구원들 간 신속한 정보교환을 위해 고안되었다. 페이스북의 탄생 배경과 유사하다.
http://info.cern.ch
info.cern.ch
최초의 웹사이트!
정보를 하이퍼텍스트 형식으로 표현하여, 링크를 따라 이동하며 정보를 연결하고 제공한다는 목적!
*하이퍼텍스트 : 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트(링크, 참조)
웹 페이지 VS 웹 사이트
웹 페이지를 모은게 웹 사이트
웹 페이지 링크를 타고 다른 웹 페이지로 이동하는것을 `웹서핑` `웹 브라우징`을 한다고 말한다
웹 브라우저 Web brower : 웹 서핑하기 위해서 사용하는 sw 웹브라우저 `safari` `chrome` `firefox` `internet explorer`
웹의 구조
클라이언트 Client : 고객. 서비스를 요청하는 PC
서버 Sever : 제공자. 서비스를 제공하는 PC
한층, 한줄이 하나의 서버 pc 라고 생각하면 된다.
통신 HTTP
클리이언트와 서버간의 약속 `프로토콜`을 지켜서 통신해야한다. 기준, 틀
인터넷으로 연결된 서버는, 웹 프로토콜 HTTP(Hyper Text Transfer Protocol)을 사용해 데이터를 주고받는다.
웹 개발 직무 이해
웹 개발자는 `인터넷` 통신망 부분 빼고! 클라이언트와 서버, 통신과 요청을 작업한다.
프론트엔드 : 개인의 `클라이언트`부분을 개발한다. 사용자의 측면 Client-side의 GUI 그래픽 사용자 인터페이스, 화면을 개발함으로 사용자와 상호작용을 담당한다.
화면구현
백엔드 : 사용자 눈에 보이지 않는 `서버`에서 인터넷, 프론트엔드에게 전달받은 데이터와 요청을 내부에서 처리하고, 프론트엔드에 결과를 전달한다.
로직
프론트엔드
HTML + CSS + JavaScript
하나처럼 굴러갈 것이다~
HTML : 웹 페이지 구성 요소들의 구조, 하이퍼텍스트 즉 웹 페이지를 연결하는 기능을 가진 텍스트. Hyper Text Markup Language
CSS : 웹 페이지 구성 요소들의 꾸밈
JavaScript : 웹 페이지 구성 요소들에게 생명력을! 기능을 동작하게 한다.
같은 페이지 안에서도 변화가 일어날 수 있고, 버튼을 누르면 데이터를 서버에 전달하고, 로그인을 요청할 수 있다.
IDE 개요
웹개발 IDE : Integrate Develpment Environment, 통합 개발 환경
VSCode, eclipse, IntelliJ
HTML 태그 <>
웹 페이티 구성요소 하나하나로 역할을 한다.
`<태그> 어쩌구저쩌구 </태그>`
여는태그와 닫는태그 한쌍 or 여는 태그가 단독으로 쓰이는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
</head>
<body>
<h1>Login</h1>
<form>
ID : <input type="text" placeholder="아이디"/>
<br>
PW : <input type="password" placeholder="비밀번호"/>
<br>
<input type="button" value="login">
</form>
</body>
</html>
☑️ 배운 점
로그인 버튼을 `<button>` 태그를 사용해서 미리 작성해보았는데, 수업에서는 `<input type="button">으로 작성을 했다.
차이점?
- <button> 태그 : 텍스트, 이미지 및 다른 요소를 포함해 디자인적인 유연성이 있고, 스타일링하기 쉽다. 그러나 IE8 및 그 이전 버전에 레이아웃 문제가 있을 수 있다.
- <input> 태그 : 간단하고 직관적이며, form 유효성 검사에 유용하고, 일관된 모습을 보여준다. 그러나 디자인 커스터마이징이 제한되고, 텍스트 이외의 요소를 직접 포함할 수 없다.
* form 유효성 검사 : 웹페이지가 자동으로 데이터 형식을 검사하는 기능
보통 더 많은 디자인적 유연성을 원한다면 <button> 태그를 사용하고, 단순한 폼 제출 기능을 위해서라면 <input> 태그를 사용한다. 그러나 최근 웹 개발에서는 CSS를 사용하여 디자인을 많이 처리하므로 <button> 태그가 더 선호되는 경향이 있다고 한다. 프로젝트의 상황이나 개발자의 취향에 따라 갈린다고 하니 참고하자!
나는 디자이너가 구성해준 버튼을 svg로 그대로 사용하는걸 선호하기에 button 태그를 더 좋아하는 것 같다ㅎㅎ