📚요약
지난 시간에는 협업에 사용하기 좋은 도구들을 소개했었습니다. 이번 시간에는 웹에 대한 이해와 구성 요소와 그중 HTML을 활용해 정말 단순한 웹 페이지를 만들어보겠습니다.
📖웹(World Wide Web)
웹이라고 하면 일반적으로 인터넷과 혼용되어 사용하는 경우가 많습니다. 하지만 둘은 다른 것으로 분명히 차이점이 있습니다.
'네트워크의 네트워크'를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결(Internaional Network)하고자 하는 의도에서 이를 줄여 인터넷(Internet)이라고 명명함.
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공유 시스템을 간단하게 웹(Web)이라고 부름.
HTTP 프로토콜(protocol), 하이퍼텍스트(hypertext), HTML 형식 등을 사용해 그림과 문자를 교환하는 전송방식을 의미하기도 함.
정의부터 둘의 차이가 있는 것을 알 수 있습니다. 좀 더 쉽게 이해하면 인터넷은 컴퓨터들의 연결망을 의미하고, 웹은 그 연결망을 이용해 정보를 공유할 수 있는 공간을 의미한다고 볼 수 있습니다.
📄어떻게 정보를 공유할까요?
정보 제공자가 글을 작성하고, 작성된 글은 검색이나 주소를 통해 들어가서 정보를 볼 수 있습니다. 어떻게 이게 가능하느냐? 바로 하이퍼텍스트(hypertext)를 이용하기 때문입니다.
하이퍼텍스트는 참조(하이퍼링크, hyperlink)를 통해 한 문서에서 다른 문서로 접근하게 할 수 있는 텍스트
물론 단순하게 하이퍼텍스트만 이용하는 시대를 지나 다양한 그림과 동영상까지 활용해 정보가 공유되고 있습니다.
🍯tip! 웹 페이지? 웹 사이트? 웹 페이지는 단순한 문서를 의미하고, 웹 사이트는 웹 페이지들이 다양한 방식으로 묶이거나 연결된 모음을 의미합니다.
📄웹의 구조
웹의 구조를 살펴보면 단순합니다. 요청하는 사람과 요청받은 정보를 제공해주는 사람이 있습니다. 바로 클라이언트(Client)와 서버(Server)입니다. 클라이언트는 보통 우리와 같은 사용자를 의미합니다. 예를 들어 검색을 했습니다. 어라? 사용자도 모르게 요청을 보냈습니다. 검색 결과를 보여줘라라는 요청을 말입니다. 누구한테 보냈을까요? 바로 서버입니다. 그렇다면 요청을 받은 서버는 사용자에게 검색 결과에 대한 화면을 보여주게 됩니다.
어떻게 요청을 해야하는가? 사용자는 몰라도 되지만 개발자는 알아야 합니다. 규칙을 나타내는 프로토콜(protocol)을 사용합니다. 어떤 프로토콜을 사용해야 하는지는 추후 알아보겠습니다.
📄웹 개발 직무의 이해
구조를 살펴보면 클라이언트, 서버, 요청 이렇게 세 가지가 있습니다. 요청에 대한 부분은 다른 직무가 있기 때문에 클라이언트와 서버만 살펴보면 됩니다.
사용자가 컴퓨터를 통해 해당 웹과 편하게 소통할 수 있도록 도와주는 프론트엔드(Front-End, FE), 요청이 넘어오면 적절한 응답을 할 수 있게 해주는 백엔드(Back-End, BE)로 나뉩니다. 그리고 이 두가지를 모두 다 할 수 있는 풀스택(Full Stack)이 있습니다.
📖웹 개발 구성요소
웹은 단 세가지로 이루어져 있습니다. 바로 HTML, CSS, JS(JavaScript)입니다. 어렵게 설명할 필요가 없기 때문에 직관적으로 설명하겠습니다.
- HTML : HyperText Markup Language의 약자. 웹의 구조를 맡고 있다. 사람에 비교하면 뼈대를 의미한다.
- CSS : Cascading Style Sheet의 약자. 웹의 디자인을 맡고 있다. 사람에 비교하면 외형 즉, 살, 근육, 눈 등을 의미한다.
- JS : JavaScript를 줄여서 JS라고도 한다. 웹의 동작을 맡고 있다. 사람에 비교하면 움직이게 도와주는 신경과 뇌를 의미한다.
📖개발 어디서 하지?
자 이제 어떤 것을 사용해서 개발해야 하는지 알았다면 개발을 하기 위한 도구를 알아보겠습니다. 개발은 코드도 작성해야 하고, 디버그, 컴파일, 배포 등 여러 작업을 처리해야 합니다. 이를 위해 존재하는 것이 통합개발환경(Integrated Development Environment, IDE)입니다.
통합개발환경은 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어
통합개발환경은 IntelliJ IDEA, Eclipse, Visual Studio, VSCode(Visual Studio Code), Android Studio 등 다양한 종류들이 있습니다. 그중 VSCode라고 불리는 통합개발환경을 사용하겠습니다. Visual Studio와는 다른 통합개발환경이기 때문에 이에 주의하셔야 합니다.
Visual Studio Code 다운로드는 사이트에 들어가셔서 하시면 됩니다.
📖HTML 실습
HTML에 대한 간단한 설명은 제 다른 글을 참고해주시면 감사하겠습니다. 짧은 글이지만 참고하실 때 기본 문법, 태그 순위 사이트, 기본 구조는 꼭 봐주시기 바랍니다.
실습 화면에 대해 보여드리겠습니다.
정말 단순한 HTML 코드입니다. <title> 태그를 통해 탭의 이름이 바뀐 것을 확인할 수 있고 <body> 태그 내부에 작성된 부분이 페이지의 메인이 되는 것을 확인할 수 있습니다.
<h2> 태그로 제목을 적고, 다른 사이트나 페이지로 이동할 수 있는 <a> 태그를 활용한 실습입니다. 제목은 기본 글씨보다 크고 굵어지고, 링크가 생긴것을 확인할 수 있습니다. 링크의 경우 내가 만든 html로 이동하는 것도 가능하고 기존의 사이트로 이동하는 것 또한 가능합니다.
이번에는 로그인 화면을 만들어 봤습니다. <h1> 태그를 사용해 <h2>보다 좀더 굵고 큰 제목을 작성해 봤습니다. <form> 태그를 사용했는데 구글폼, 설문조사폼 할 때 그 폼과 같은 느낌으로 받아들이시면 됩니다. 그 안에 <input> 태그를 통해 입력하는 칸을 만들고, 버튼까지 완성시켰습니다. 하지만 버튼은 아무리 눌러도 동작하지 않습니다.
다음 시간에 계속...
출처 & 참고
김송아 강사님의 강의
HTML 시작하기, MDN, 2024.04.16
CSS란 무엇인가?, MDN, 2024.04.16
JS가 뭔가요?, MDN, 2024.04.16
'개발 > 프로그래머스 데브코스' 카테고리의 다른 글
| 프로그래머스 데브코스 9일차 with. TS 웹 풀스택 (0) | 2024.04.18 |
|---|---|
| 프로그래머스 데브코스 8일차 with. TS 웹 풀스택 (0) | 2024.04.17 |
| 프로그래머스 데브코스 2주차 회고 with. TS 웹 풀스택 (0) | 2024.04.15 |
| 프로그래머스 데브코스 5일차 & 1주차 회고 with. TS 웹 풀스택 (0) | 2024.04.12 |
| 프로그래머스 데브코스 4일차 with. TS 웹 풀스택 (0) | 2024.04.11 |
