Nevertheless

웹(Web) 본문

데브코스

웹(Web)

hxx_1 2024. 8. 20. 20:10

웹의 이해 

  • 인터넷: 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network 의 약자, "우리는 모두 연결되어 있다."
  • 웹: 월드 와이드 웹(World Wide Web) 이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말한다. 간단하게 WWW, W3, 그리고 월드 와이드 웹을 줄여서 웹이라고 불린다. ( 인터넷 != 웹 )

웹의 특징

: 정보를 하이퍼텍스트 형식으로 표현하여 하이퍼텍스트(링크) 를 따라 이동하며 다양한 정보/ 문서들을 연결, 제공한다. 

* 하이퍼텍스트: '단순히 글자가 아닌 그 이상의 기능을 가진 텍스트' 로 주로 링크, 참조의 역할을 하는 기술을 말함 

: 웹 페이지=> 페이지 하나 하나를 뜻함, 페이지 한 장 한 장을 엮어서 만든 것이 웹 사이트

 

웹 브라우저란?

어떤 것( = 웹 페이지 또는 웹 상의 데이터) 을 찾거나 읽을 때 사용하는 것을 웹 브라우저라고 부른다. 

ex) safari, Internet Explorer,.. 

웹의 구조 

  • 클라이언트(Client) : 서비스를 이용하는(요청하는) 컴퓨터
  • 서버(Server): 서비스를 제공하는 컴퓨터 
  • 프로토콜: 클라이언트와 서버 간 서로 정보를 주고 받을 때 지켜야 하는 약속 

➡️ 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP(HyperText Transfer Protocol) 를 사용해 데이터를 주고 받는다. 

 

웹 개발 직무 이해

  • 프론트엔드: 웹 서비스에서 사용자의 측면(Client-side) 의 그래픽 사용자 인터페이스로, 사용자와 상호작용(글자 입력,버튼 클릭, 화면 출력 등)을 담당한다. 
  • 백엔드: 웹 서비스에서 사용자의 눈에 보이지 않는 서버 측(Server-side)에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달한다. 

프론트엔드 3대장

HTML (HyperText Markup Language)

: 웹 페이지 구성 요소들의 구조

: 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자, 웹 페이지의 구조를 명시하는 언어 

: < > 괄호를 사용, 태그라고 부름 => 태그는 웹 페이지의 구성 요소 하나 하나로 역할을 하게 된다.

 <태그> 감싸진 글자가 그 태그의 역할을 맡습니다. </태그>

 

CSS

: 웹 페이지 구성 요소들을 꾸밈

 

Javascript

: 웹 페이지 구성 요소들에게 생명력을! 

HTML 태그

  • <h1~6> : 제목 태그, 숫자가 작을수록 크기가 커진다. 
  • <a> : anchor(닻) 의 약자, 페이지를 연결하는 태그
<a href="https://programmers.co.kr">Programmers</a>
  • <br> : 줄 바꿈 태그 
  • <input> : 입력을 받는 태그 , type을 지정할 수 있음 ( text, password, button, .. 등등)

<input type="password">
<input type="text">

👩🏻‍💻 실습해보기 ( 로그인 페이지 만들기 )

<!DOCTYPE html>
<head>
  <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>

🌟 배운 점

오늘은 드디어 웹에 대해 배웠다. 그동안은 인터넷과 웹을 똑같은 것이라고 생각했던 것 같은데, 오늘 배우면서 둘이 엄연히 다르다는 걸 알게 되었다. 웹의 역사를 보면서 느낀건데, 모든 것의 시작은 사소한 불편함을 해결하기 위한 것으로부터 시작되는 것 같다. 나도 항상 어떤 것을 더 편리하게 바꿀 수 있을지, 현재 상황에 안주하지 않고 끝없이 발전시키기 위해 노력하는 개발자가 되어야겠다. 이제 프론트엔드, 백엔드를 차차 배우게 될텐데 앞으로가 기대된다! 

'데브코스' 카테고리의 다른 글

백엔드(back-end)  (0) 2024.08.22
CSS 와 Javascript  (1) 2024.08.21
협업 Tool  (0) 2024.08.19
깃 브랜치(branch)  (0) 2024.08.16
깃(git)에 대하여(2)  (1) 2024.08.14
'데브코스' Related Articles more