반응형

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

     

    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"
}

     

    반응형

    'Study Platform📚 > 그림으로 배우는 Http&Network Basic' 카테고리의 다른 글

    그림으로 배우는 Http&Network Basic 정리 - 9장. HTTP에 기능을 추가한 프로토콜  (0) 2025.03.06
    그림으로 배우는 Http&Network Basic 정리 - 7장. 웹을 안전하게 지켜주는 HTTPS  (0) 2025.03.02
    그림으로 배우는 Http&Network Basic 정리 - 6장. HTTP 헤더(6.6~6.8)  (0) 2025.03.02
    그림으로 배우는 Http&Network Basic 정리 - 5장. HTTP와 연계하는 웹 서버  (0) 2025.02.18
    그림으로 배우는 Http&Network Basic 정리 - 4장. 결과를 전달하는 HTTP 상태 코드  (0) 2025.02.16

    티스토리툴바