웹 개발자가 되기 위한 첫 발걸음 - 웹과 HTML

 웹 개발자란 정체성을 가지고 드디어 첫 발걸음을 내딛었다. 먼 미래에 내가 어떤 길을 걷고 있을지는 아직은 상상이 잘 안된다.

그렇지만 시작과 기초가 탄탄하다면 이후에 무엇을 하든 좋은 기반으로서 작용할 것이다.

 

웹 개발 공부에 시작하기에 앞서서 가장 근본이 되는 개념은 무엇일까? 

html? css? javascript? 프론트엔드, 백엔드?  아니다. 바로 '웹' 이다. 그렇다면 웹은 무엇일까?

 

웹에 대한 이해에 앞서 인터넷이 무엇인지 알아야한다.

 

인터넷은 전세계의 컴퓨터들을 이어주는 통신망이다. 인터넷이 발전하면서 전세계 사람들은 서로 소통이 가능해졌다. 

'웹'은 이 연결된 통신망을 통해 컴퓨터간에 정보를 교환하는 시스템이다.

 

웹은 결국 정보 교환의 목적으로 탄생한 기술이며 이것이 본질이다. 

 

때문에 웹 기술은 컴퓨터간에 정보교환을 더욱 빠르고 쉽게 할 수 있는 방향으로 발전해왔고, 컴퓨터간의 정보 교환뿐만아니라 그 정보를 받는 사람도 더욱 쉽게 이해할 수 있게 발전했다. 글이나 음성, 영상 등 다양한 전달 방식이 있지만 현대 사회에서는 더욱 다양하고 효과적으로 정보를 전달할 수 있는 웹사이트를 사용한다. 그래서 웹 개발이란 웹 사이트를 제작하고 공유하는 환경을 구축하는 일을 의미한다.

 

이러한 본질을 근간에 두고 앞으로 하나씩 언어와 기술을 쌓아가보자.

 

html은 웹 사이트의 내용과 구조를 정의하기 위해 사용하는 마크업 언어이다. 그래서 html을 알면 웹 사이트의 정보가 담긴 문서를 작성할 수 있다.

 

개발자는 IDE를 이용해서 문서를 작성할 수 있고, 사용자는 이 문서를 웹 브라우저를 통해서 웹사이트로서 볼 수 있다.

 

개발자의 관점에서 계속해서 정리해보자.

 

html 문서는 요소의 집합이다. 요소란 html문서의 구조를 나타낸다. 크게 문서의 정보가 담긴 head와 내용이 담긴 body 요소로 구성되어있다. 각 요소는 문서를 작성하는데 있어서 다양한 역할을 가지고 있다. 태그 <>를 열고 </>닫으면서 사용한다.

 

head 내에는 meta라는 요소도 존재하는데 meta는 메타데이터 즉 웹사이트를 구축하는 정보에 대한 정보가 담겨있다. 

한국어 or 영어로 작성된 문서를 컴퓨터가 이해할 수 있게 바꿔줘 (인코딩), 이 문서는 크롬 브라우저에 맞춰서 작성되었어, 문서의 a내용은 b란 의미야 등등 내용들이 meta 안에 담겨있는 것이다. 

 

body 내에는 다양한 정보를 표현 가능하게 해주는 여러 태그들이 존재한다.

 사용자에게 정보를 출력하는 관점에서 보면 문단, 이미지, 표, 하이퍼링크, 리스트 등등을 표현하게 해주는 다양한 요소들이 있다.

입력 또한 가능하게 해주는 요소들이 있고, 입력받은 정보를 다루는 '서버'도 존재한다. 태그의 여러 속성 중 name이라는 속성이 서버에 전송되는 데이터를 표현해 주는데 이는 배운 이후에 정리를 해볼 예정이다.

 

또 정보를 쉽게 이해할 수 있도록 구조화를 담당하는 시맨틱 태그 또한 있다. 머릿글 본문 세부사항 등등 문서로서 구조를 명확하게 하여 사람도 이해하기 편하고, 컴퓨터 또한 검색엔진을 통해 쉽게 정보를 찾을 수 있게 해주는 장점이 있다.

 

- 2024/06/20 D+1-