Study Platform📚/그림으로 배우는 Http&Network Basic

그림으로 배우는 Http&Network Basic 정리 - 10장. 웹 콘텐츠에서 사용하는 기술

쿄코코 2025. 3. 9. 22:28
반응형

웹 콘텐츠는 사용자가 브라우저를 통해 보는 모든 텍스트, 이미지, 동영상, 애니메이션, 인터랙티브 요소 등을 포함하는 데이터다.
이런 웹 콘텐츠를 구성하고 배포하는 데 사용되는 핵심 기술들은 다음과 같다.

 

10.1. HTML

(HyperText Markup Language)

 

  • 텍스트, 이미지, 링크, 버튼 등의 기본적인 웹 콘텐츠를 배치.
  • HTML5 이후 오디오, 비디오, 그래픽(Canvas, SVG) 같은 멀티미디어 요소도 포함할 수 있음.
  • HTML 버전 : HTML5 이후부터는 버전 번호를 붙이지 않고, 2019년 5월 28일부터 WHATWG(웹 기술 표준화 그룹)와 W3C(월드 와이드 웹 컨소시엄)가 협력하여 "HTML Living Standard"를 HTML의 유일한 공식 버전으로 발표했다.

10.1.3 디자인은 적용하는 CSS

 

 

  • HTML로 만든 콘텐츠의 디자인과 레이아웃을 설정하는 스타일링 언어.
  • 색상, 크기, 여백, 애니메이션 효과 등을 지정 가능.
  • 반응형 웹 디자인(Responsive Web Design, RWD)을 위해 필수.

10.2. 다이나믹 HTML

DOM(Document Object Model, 문서 객체 모델)은 브라우저가 HTML을 해석하여 트리(Tree) 형태로 변환한 구조이다.
즉, HTML 문서의 각 요소를 객체(Object)로 변환하고, JavaScript를 사용해 조작할 수 있도록 만든 것이다.

<!DOCTYPE html>
<html>
<head>
    <title>DOM 예제</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
</body>
</html>

 

document.getElementById("title").innerText = "DOM이 변경됨!";

 

=> JavaScript에서 DOM을 변경

<!DOCTYPE html>
<html>
<head>
    <title>DOM 예제</title>
</head>
<body>
    <h1 id="title">DOM이 변경됨!</h1>
</body>
</html>

 

10.3. 웹 어플리케이션

CGI(Common Gateway Interface)는 웹 서버와 외부 프로그램을 연결하여 동적인 웹 페이지를 생성하는 기술이다.

웹 서버(Apache, Nginx 등)는 정적인 HTML을 제공할 수 있지만, CGI를 사용하면 서버에서 실행되는 프로그램이 HTML을 동적으로 생성하여 응답할 수 있다.

CGI(Common Gateway Interface)의 성능 문제와 확장성 부족을 해결하기 위해 Java 서블릿(Servlet)이 등장했다.

 

참고 . Java 서블릿(Servlet)은 현재도 사용되지만, 직접 사용하는 경우는 줄어들었다.

대부분의 경우, Spring Boot, Jakarta EE(구 Java EE) 같은 프레임워크에서 내부적으로 서블릿을 사용하며,
개발자가 직접 서블릿을 작성하는 경우는 많지 않다.

즉, CGI → 서블릿 → JSP → Spring MVC → 최신 웹 프레임워크로 발전했다.

 

10.4. 데이터 송신에 사용되는 포맷 및 언어

웹 애플리케이션에서 데이터를 송신(전송)할 때 여러 가지 포맷과 기술이 사용된다.

10.4.1. XML (Extensible Markup Language)

<person>
    <name>Alice</name>
    <age>25</age>
    <email>alice@example.com</email>
</person>

 

=> 최근에는 XML보다 YAML을 더 많이 사용한다. 특히 설정 파일(Config), DevOps(Kubernetes, Docker), CI/CD 파이프라인(GitHub Actions) 등에서 YAML이 표준처럼 사용된다.

person:
  name: Alice
  age: 25
  email: alice@example.com

 

10.4.3. JSON (JavaScript Object Notation)

 

  • 가볍고, 사람이 읽기 쉬우며, JavaScript와 자연스럽게 호환됨
  • REST API, 웹 서비스, 비동기 통신(AJAX)에서 많이 사용됨
{
    "name": "Alice",
    "age": 25,
    "email": "alice@example.com"
}

 

반응형