[week1] 웹 서비스의 이해 : 웹 생태계부터 웹 브라우저, 그리고 데이터베이스까지 (1) - 01/08

Kyulee·2026년 1월 7일

프로그래머스 데브코스

TIL

목록 보기

6/93

웹 서비스의 이해

웹이란?

월드 와이드 웹 (World Wide Web)이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
간단하게 WWW, W3 그리고 월드 와이드 웹을 줄여서 웹(Web)이라고도 불림
특징
- 정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공함
  - 하이퍼텍스트 -> '단순히 글자가 아닌 그 이상의 기능을 가진 텍스트'로 주로 링크, 참조의 역할을 하는 기술을 말함

웹의 구조

클라이언트 (Client)
- 서비스를 이용하는 (요청하는) 컴퓨터
서버 (Server)
- 서비스를 제공하는 컴퓨터

프로토콜
- 서로 정보를 주고 받을 때에 하는 약속이 존재
- 반드시 이 약속을 지켜서 통신해야 하며, 이 약속을 프로토콜이라고 부름
- 인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP (HyperText Transfer Protocol)를 사용하여 데이터를 주고 받음

웹 개발 직무 이해

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

HTML + CSS + JavaScript

웹 개발의 3대장

HTML
- 웹 페이지 구성 요소들의 구조를 설계하고 뼈대를 세움
CSS
- 웹 페이지 구성 요소들을 시각적으로 꾸밈 및 레이아웃 배치
JavaScript
- 웹 페이지 구성 요소에게 생명력을 불어넣어 동적인 상호작용 구현

IDE

소프트웨어 개발에 필요한 모든 도구를 하나의 인터페이스로 통합하여 제공하는 소프트웨어
대표적인 웹 개발 IDE
- Visual Studio Code (VSCode)
  - 가벼움과 확장성
    - 프로그램 자체가 가볍고 빠르며, 수만 개의 익스텐션(Extension)을 통해 나만의 개발환경을 구축할 수 있는 범용 에디터
- WebStorm / IntelliJ
  - 강력한 내장 기능
    - 별도 설정 없이도 강력한 리팩토링(코드 구조 재조정)과 디버깅, 테스트가 완벽하게 내장된 전문가용 통합 개발 환경
실습은 VSCode를 활용하여 이루어질 예정!!

HTML 태그

웹 페이지 제작 시 빈번하게 사용되는 태그들을 카테고리별로 정리

문서 기본 구조 및 메타 정보
웹 페이지의 뼈대와 정보를 정의하는 태그
- <html>: HTML 문서의 최상위 루트 요소
- <head>: 문서의 속성, 제목, 스크립트 등 메타데이터를 포함
- <body>: 브라우저 화면에 실제로 출력되는 콘텐츠 영역
- <title>: 브라우저 탭에 표시되는 페이지 제목
- <meta>: 인코딩, 검색 엔진 최적화(SEO) 등을 위한 문서 정보
- <link>: CSS 파일 등 외부 리소스를 연결
- <style>: 문서 내부에 직접 CSS 스타일을 작성
레이아웃 및 컨테이너
콘텐츠를 그룹화하고 배치할 때 사용
- <div>: 가장 범용적인 블록 레벨 컨테이너
- <span>: 텍스트 흐름 안에서 사용하는 인라인 컨테이너
- <header>: 페이지나 섹션의 상단 영역 (로고, 메뉴 등)
- <nav>: 주요 네비게이션 링크 모음
- <footer>: 페이지 하단 정보 (저작권, 연락처 등)
- <iframe>: 외부 웹 페이지나 영상을 현재 문서에 삽입
텍스트 및 콘텐츠 표현
텍스트를 구조화하고 의미를 부여
- <h1>, <h2>, <h3>: 중요도에 따른 제목 표시
- <p>: 하나의 단락(Paragraph) 정의
- <br>: 강제 줄바꿈
- <ul> / <li>: 순서 없는 목록과 항목
- <a>: 다른 페이지로 연결되는 하이퍼링크
- <strong>: 중요한 내용을 굵게 강조
- <i>: 이탤릭체나 아이콘 표시
미디어 및 사용자 입력
이미지를 삽입하거나 사용자와 상호작용
- <img>: 이미지 출력
- <script>: 자바스크립트 등 실행 가능한 코드 삽입
- <form>: 사용자 입력을 서버로 보내기 위한 양식 구역
- <input>: 텍스트 입력, 체크박스 등 다양한 입력 필드
- <button>: 클릭 가능한 버튼
사용 시 주의 사항

태그 닫기
- 대부분의 태그는 쌍으로 존재하며 반드시 닫아줘야 레이아웃이 깨지지 않음 (예 : <html></html>)
교차 금지
- 먼저 연 태그를 가장 나중에 닫아야 함 (예: <a><b>...</b></a>)
의미 강조
- 무분별한 <div> 사용보다는 의미에 맞는 시맨틱 태그를 권장
소문자 사용
- 모든 태그명은 소문자로 쓰는 것이 웹 표준 관례

HTML 실습

로그인 화면 만들기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Login_Screen</title>
    </head>
    <body>
        <h2>Login</h2>
        <form>
            ID : <input type = "text"> <br>
            PW : <input type = "password"> <br>
            <input type = "button" value = "Login">
        </form>
    </body>
</html>