[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 01장 웹은 어떻게 움직일까?

2026. 1. 10. 21:20·Do it 스터디!
반응형

DAY 1

🔖 오늘 읽은 범위 :

🔥01/05(월) 진도표 알림
👉🏻공부 내용: 01장 웹은 어떻게 움직일까?
👉🏻쪽수: 17~29쪽


😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**
  • 학습 목표
    • 인터넷 연결 방식.
    • 클라이언트와 서버 동작 구조.
    • 웹 개발에서 자주 사용하는 용어.
  • 학습 결과
    • 웹 표준의 중요성.
    • 웹의 동작 방법.
    • 웹 개발을 위한 기본 용어.

웹의 형태

  • 웹 사이트SNS, 커머스 같은 사이트는 제공하는 서비스에 맞는 장치와 기능이 함께 제공되는 복잡한 사이트.
  • 이런 웹 사이트의 여러 장치와 기능을 만드는 것 = 웹 개발.
  • 방문자에게 일방적으로 정보를 전달하는 웹 사이트는 단순함.
  • 플랫폼으로서의 웹
  • 웹 개발과 표준
    • 웹사이트 개발 + 애플리케이션으로서의 웹 + 플랫폼으로서의 웹
    • 웹 개발의 표준 ⇒ HTML, CSS, 자바스크립트

네트워크 이해하기

  • 여러 컴퓨터를 연결해 놓은 체계
  • 라우터: 네트워크 연결 중계 역할하는 기기.
    • 라우터를 이용해 네트워크와 네트워크를 연결.
  • 서버와 클라이언트
    • 서버: 네트워크에 연결된 컴퓨터가 인터넷에 공개할 정보를 저장하는 역할.
    • 라우터 기능도 포함.
    • 클라이언트: 서버에 연결해서 정보를 요청하는 컴퓨터.
  • 인터넷을 통해서 서버와 클라이언트가 정보를 주고 받는 과정 = 웹 작동.
  • 프런트 엔드 개발? 백엔드 개발?
    • 프런트엔드 = 사용자 앞에 보이는 영역. 다양한 웹 브라우저와 버전에 따라 작동하도록 만드는 것. HTML, CSS, 자바스크립트 사용.
    • 백엔드 = 사용자 뒤에서 보이지 않는 영역. 데이터베이스 설계 및 데이터 처리. 자바, 파이썬, PHP, 자바스크립트 등등 다양한 프로그래밍 언어로 사용.

웹의 기본 동작

  • 사이트 주소 = IP 주소
  • IP 주소(숫자 형태) ⇒ 사람이 이해하기 어렵다. ⇒ IP 주소를 바꿔서 사용 ⇒ 도메인; Domain
  • 도메인을 IP 주소로 바꾸는 역할 ⇒ DNS; Domain Name Server
  • HTTP, HTTPS
    • 웹에서 공통으로 인식하는 규칙.
    • HTTP 프로토콜에 암호화를 추가해 보안을 강화 한 것 = HTTPS 프로토콜
    • HTTPS 프로토콜을 통해 접속하도록 만들어야 함.

웹 접근성

  • 모든 사용자가 접근 가능해야 함. 장애와 나이에 상관없이.
  • 웹 접근성 인증.
    • 시각 장애 / 이동 장애 / 청각 장애 / 인지 장애
  • 웹 접근성 지침 및 교육 세미나 제공
    • https://nuli.navercorp.com/
    • https://www.youtube.com/@AOA11Y
    • 정보 접근성 : https://kioskui.or.kr/
🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**
  • 웹 접근성 확보할 시간이 주어지는 게 가능한지 궁금함.
  • 실제 현업에서 인증까지 확보하는 것이 중요한지 궁금함.
🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**
  • -

🤟소감 3줄 요약

  • 다른 것보다 웹 접근성 처리가 까다로울지 모르겠으니 참고해야겠음.
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(1)  (0) 2026.01.13
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 03 HTML 기본 문서 만들기  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 02장 웹 개발 시작하기  (0) 2026.01.10
'Do it 스터디!' 카테고리의 다른 글
  • [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)
  • [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기
  • [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 03 HTML 기본 문서 만들기
  • [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 02장 웹 개발 시작하기
fogthegreat
fogthegreat
아주 오랫동안 이것 저것 개발하면서 배우고 찾아 본 것들을 적거나 모았습니다. 불편한 점이 있다면 알려주세요. (과거에 불펌한 글들을 모두 제거하고 있는 중이에요. 🙏)
  • fogthegreat
    꿈소년의 개발 이야기
    fogthegreat
  • 전체
    오늘
    어제
    • 전체보기 (242)
      • Software Engineering (56)
      • Android Development (78)
      • 일상다반사 (63)
      • 책에 대한 거의 모든 것 (11)
      • 영어공부 (1)
      • ETC (0)
      • 챌린지 (1)
      • Do it 스터디! (32)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 향로
    • 청하가 제안하는 소프트웨어 엔지니어로써 재미있게 사는 …
    • WhoRU? Story...♡
    • Snapshot
    • 두잇! - 이지스퍼블리싱
    • 제이펍의 참 똑똑한 2비트 책 이야기
    • Inpa Dev
  • 공지사항

  • 인기 글

  • 태그

    html
    JavaScript
    안철수
    build.gradle
    보안
    안드로이드
    코틀린
    하버드
    hcj
    구글
    css
    탐지기법
    리눅스
    js
    linux
    노개북
    개발
    git
    kotlin
    C++
    Eclipse
    gradle
    java
    google
    ActiveX
    자바
    Android
    안드로이드 개발
    Android 4.1
    OOM
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
fogthegreat
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 01장 웹은 어떻게 움직일까?
상단으로

티스토리툴바