HTML(HyperText Markup Language)
웹 상에서 하이퍼텍스트를 보내기 위해서 개발된 언어
하이퍼 텍스트란 문서 시스템의 하나로서, 문서 중에 임의의 장소의 정보가 다른 정보(문서나 이미지)에 관련된 즉 링크되어 있는 문서
일반적으로 HTML로 쓰여진 문서를 브라우저가 해석해서 렌더링 처리를 한 결과가 웹 페이지에 표시됨
다이나믹 HTML
정적인 HTML 내용을 클라이언트 사이드 스크립트를 사용해서 동적으로 변경하는 기술
사용 예시 : 클릭하면 펼쳐지는 메뉴, 구글 맵스와 같이 스크롤하는 지도
HTML등으로 만들어 놓은 웹 페이지를 javascript 등의 사이드 스크립트로 조작하여 동적으로 변화시킴
-> 동적으로 바꾸고 싶은 HTML 요소를 지정하기 위해 DOM이라는 구조 사용
CSS(Cascading Style Sheets)
HTML 각 요소를 어떻게 표시할지를 지시하는 것
-> 같은 HTML 문서라도 적용시킬 CSS를 바꾸면 브라우저에서 보이는 외관을 변경할 수 있음
DOM(Document Object Model)
HTML 문서와 XML 문서를 위한 API
-> DOM을 사용하면 HTML 내의 요소를 오브젝트로 다룰 수 있기 때문에 요소 내의 문자열을 추출하거나 CSS 프로퍼티로서 변경해 디자인을 변경 가능
-> DOM 사용시 javascript 등의 스크립트를 사용하여 HTML을 쉽게 조작 가능
코드 예시
<script type = "text/javascript">
var content = document.getElementsByTagName('P');
content[2].style.color = '#FF0000';
</script>HTML 문서 전체(document 오브젝트)에서 getElementsByTagName이라는 메서드를 통해 p요소를 가져온다는 뜻
-> 이후 content의 인덱스 번호가 2의 요소의 스타일을 지정하고 색을 빨간색으로
DOM의 여러 메서드를 통해 HTML의 각 요소를 참고할 수 있다!
웹 애플리케이션
웹 기능을 사용해서 제공되는 프로그램 지칭
-> ex) 쇼핑 사이트나 인터넷 뱅킹, SNS나 게시판, 검색 엔진, e-러닝 등
원래 HTTP를 사용한 웹 구조는 사전에 준비된 콘텐츠를 클라이언트의 리퀘스트에 맞게 반환하는 것
-> 그러나 웹이 보급됨에 따라 이것만으로는 부족해서 프로그램이 HTML 등의 콘텐츠를 생성할 필요가 생기게 됨
-> 프로그램에 의해서 생성된 콘텐츠를 동적 콘텐츠라 부르고, 사전에 준비된 콘텐츠는 정적 콘텐츠라고 부름
웹 애플리케이션은 동적 컨텐츠에 해당
CGI(Common Gateway Interface)
CGI란 웹 서버가 클라이언트에서 받은 리퀘스트를 프로그램에 전달하기 위한 구조
-> 이에 의해 프로그램은 리퀘스트 내용에 맞게 HTML을 생성하는 등으로 동적으로 콘텐츠를 생성할 수 있음
CGI 프로그램에는 Perl,PHP,Ruby,C언어등이 사용되고 있음
Java에서 보급된 서블릿(Servlet)
서블릿이란 서버 상에 HTML 등의 동적 콘텐츠를 생성하기 위한 프로그램을 가리킴
엔터프라이즈 환경을 위한 java인 JavaEE의 일부로서 제공되고 있음
앞서 설명한 CGI는 리퀘스트 마다 프로그램을 기동하기 때문에 대량으로 엑세스가 있을 때 웹 서버에 부하가 걸리게 되지만, 서블릿에서는 웹 서버와 같은 프로세스 속에서 동작하기 떄문에 비교적 부하를 적게 하여 동작시킬 수 있음
서블릿 실행 환경을 컨테이너 혹은 서블릿 컨테이너라고 부름
리퀘스트 마다 CGI 프로그램을 기동하는 CGI의 구조가 병목 현상을 발생시켜 그 후에 웹 서버에서 직접 프로그램을 실행하는 서블릿이나 mod_perl과 같은 구조가 개발되어 보급
XML(eXtensible Markup Language)
목적에 맞게 확장 가능한 범용적으로 사용할 수 있는 마크업 언어
-> 인터넷을 통해 데이터 공유를 용이하게 하는 것을 목적으로 함
XML은 HTML과 같은 문서 기술 언어(SGML , Standard Generalized Markup Language)에서 파생된 것이지만 HTML에 비해 데이터를 기술하는 것에 특화
html 코드 예시
<html>
<head>
<title>HTML 예제</title>
</head>
<body>
<h1>HTML은 웹 페이지를 만들기 위한 마크업 언어입니다.</h1>
<p>HTML은 Hypertext Markup Language의 약자입니다.</p>
</body>
</html>xml 코드 예시
<과일목록>
<과일>
<이름>사과</이름>
<가격>1000원</가격>
</과일>
<과일>
<이름>바나나</이름>
<가격>800원</가격>
</과일>
</과일목록>HTML은 웹 페이지의 레이아웃과 콘텐츠를 정의하는 마크업 언어이고, XML은 데이터를 구조화하기 위한 마크업 언어
HTML은 고정된 태그 집합이 정의되어 있지만, XML에서는 사용자 정의 태그 사용 가능
-> HTML처럼 태그를 사용한 트리 구조로 되어 있음
html의 경우 < ul > < li > 와 같은 태그의 내용들이 리스트로 표시되지만, 이 데이터를 다른 프로그램에서 불러오고 싶다면?
-> 프로그램을 사용해서 레이아웃의 특징을 찾아 텍스트를 추출할 수도 있지만, HTML의 디지인이 바뀐다면 불러오기 힘들어 짐
반면 XML 문서에서는 HTML 문서에 비해 데이터를 뺴내는 것이 간단
-> 파서 기능에 의해 쉽게 추출이 가능하고 데이터를 재사용하기 쉬움
갱신 정보를 송신하는 RSS/Atom
RSS와 Atom은 뉴스나 블로그의 기사 등의 갱신 정보를 송신하기 위한 문서 포맷의 총칭으로 둘다 XML 이용
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>Example RSS Feed</title>
<link>https://www.example.com</link>
<description>This is an example RSS feed</description>
<item>
<title>First Post</title>
<link>https://www.example.com/first-post</link>
<description>This is the description of the first post</description>
<pubDate>Mon, 12 Feb 2023 12:00:00 GMT</pubDate>
</item>
<item>
<title>Second Post</title>
<link>https://www.example.com/second-post</link>
<description>This is the description of the second post</description>
<pubDate>Tue, 13 Feb 2023 12:00:00 GMT</pubDate>
</item>
</channel>
</rss>JSON(JavaScript Object Notation)
json이란 경량 데이터 기술 언어로서 javascript에 있어서 오브젝트 표기법을 바탕으로 둠
다룰수 있는 데이터 형은 false/null/true/object/배열/수치/문자열 등 7가지 종류
키-값 쌍을 사용하여 개체, 배열 및 값과 같은 데이터 구조를 나타내는 데 사용되는 경량 데이터 기술 언어
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com",
"address": {
"street": "123 Main St",
"city": "San Francisco",
"state": "CA",
"zip": "94107"
},
"phoneNumbers": [
{
"type": "home",
"number": "555-555-1234"
},
{
"type": "work",
"number": "555-555-5678"
}
]
}
