프로그래머스 데브코스TIL

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

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

웹 서비스의 이해

웹이란?

  • 월드 와이드 웹 (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 태그

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

  1. 문서 기본 구조 및 메타 정보 웹 페이지의 뼈대와 정보를 정의하는 태그

    • <html>: HTML 문서의 최상위 루트 요소
    • <head>: 문서의 속성, 제목, 스크립트 등 메타데이터를 포함
    • <body>: 브라우저 화면에 실제로 출력되는 콘텐츠 영역
    • <title>: 브라우저 탭에 표시되는 페이지 제목
    • <meta>: 인코딩, 검색 엔진 최적화(SEO) 등을 위한 문서 정보
    • <link>: CSS 파일 등 외부 리소스를 연결
    • <style>: 문서 내부에 직접 CSS 스타일을 작성

  2. 레이아웃 및 컨테이너 콘텐츠를 그룹화하고 배치할 때 사용

    • <div>: 가장 범용적인 블록 레벨 컨테이너
    • <span>: 텍스트 흐름 안에서 사용하는 인라인 컨테이너
    • <header>: 페이지나 섹션의 상단 영역 (로고, 메뉴 등)
    • <nav>: 주요 네비게이션 링크 모음
    • <footer>: 페이지 하단 정보 (저작권, 연락처 등)
    • <iframe>: 외부 웹 페이지나 영상을 현재 문서에 삽입

  3. 텍스트 및 콘텐츠 표현 텍스트를 구조화하고 의미를 부여

    • <h1>, <h2>, <h3>: 중요도에 따른 제목 표시
    • <p>: 하나의 단락(Paragraph) 정의
    • <br>: 강제 줄바꿈
    • <ul> / <li>: 순서 없는 목록과 항목
    • <a>: 다른 페이지로 연결되는 하이퍼링크
    • <strong>: 중요한 내용을 굵게 강조
    • <i>: 이탤릭체나 아이콘 표시

  4. 미디어 및 사용자 입력 이미지를 삽입하거나 사용자와 상호작용

    • <img>: 이미지 출력
    • <script>: 자바스크립트 등 실행 가능한 코드 삽입
    • <form>: 사용자 입력을 서버로 보내기 위한 양식 구역
    • <input>: 텍스트 입력, 체크박스 등 다양한 입력 필드
    • <button>: 클릭 가능한 버튼

  5. 사용 시 주의 사항

  • 태그 닫기

    • 대부분의 태그는 쌍으로 존재하며 반드시 닫아줘야 레이아웃이 깨지지 않음 (예 : <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>

오늘 배운 점

  • 웹 구조

    • 클라이언트와 서버가 HTTP 프로토콜을 통해 소통하는 원리를 이해

  • 개발 요소

    • **HTML(뼈대), CSS(디자인), JS(동작)**의 역할과 상호작용을 파악

  • HTML 실습

    • 주요 태그별 용도를 익히고, 로그인 화면을 직접 구현하며 작성 규칙을 체득