2. HTML

김관주·2023년 10월 11일

웹시스템

목록 보기

2/22

HTML 개요

기본 구조

<!DOCTYPE> 선언
- <!DOCTYPE html> or <!doctype html>
- HTML5 문서임을 선언하며, 문서의 첫 줄에 와야 함
최상위 요소 <html>
- 최상위 HTML 문서의 최상위요소
- Head와 body를 포함
- <html lang=“ko”> <- 검색엔진을 위한 meta
문서자체의 정보(meta)를 담는 <head>
- 문서제목, JavaScript, Style Sheet 등을 가지고 있음
- title: 브라우저 제목표시줄에 표시되는 정보
문서의 내용을 담는 <body>

<!DOCTYPE html>
<html>
<head>
<title> HTML5 Page </title>
</head>
<body>
<!–- HTML Body -->
<h1> Hello World </h1>
</body>
</html>

HTML Head

Containing document wide declarations
문서의 제목(<title>), 스타일(<style>), 본문 내용의 메타 정보를 포함

<HTML>
<HEAD>
<TITLE>Sample HTML Document</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Meta-information
- <script>, <style>, <meta>, <base>

<META name=“Author” content=“instructor”>
<STYLE TYPE=“text/css”>
h1 {color: blue; text-align: center}
</STYLE>

base 태그는 기준이 되는 base url의 값을 설정할수 있는 태그이다.

HTML body

Contents of the document이며, 구조화를 위한 다양한 tag들과 함께 존재한다.
- <TABLE>, <ul>, <ol>, <li>
- <img src= >
- <a href=“http://..............”>
- <h1>, <h2>
- <p>, <br>,

Attribute (속성) & Comments

Attribute
- Tag 에 추가 정보를 부여

<h1 title=“header”> Hello World </h1>
<img src=“image.png”/>

Comments

<body>
<!–- HTML Body -->
<h1> Hello World </h1>
</body>

HTML Tags

<html>, <head>, <body>, <title>, <img>, <footer>, <div> 등 HTML 문서를 구성하는 element들
Tag의 name과 attribute들은 not case-sensitive, 즉 대소문자 구별을 하지 않음

<img src=“log.jpg”>

img: tag name
src: attribute name
logo.jpg: attribute value

Heading (header)

제목의 기능을 하며 Presentation 목적 + Semantic한 구조화
<h1> 부터 <h6>까지
Tooltip
- <h1 title="김관주">오만과 편견</h1>
- Mouse-over에 alt 형태로 나타남

Paragraph, break, pre

유사한 주제의 문자열 모음 <p>
Paragraph 다음에 new line
줄 바꿈 <br> or <br/>
수평 줄 <hr> or <hr/>
문자열 그대로 <pre>

<p>사느냐 죽느냐, 이것이 문제로다.<br/>
가혹한 운명의 화살이 꽂힌 고통을 <br/>
</p>
<hr/>
<pre>사느냐 죽느냐, 이것이 문제로다.
가혹한 운명의 화살이 꽂힌 고통을
</pre>

<p> 태그는 줄바꿈을 직접 넣어 줘야 하지만 <pre>는 우리가 엔터를 하면 자동으로 줄바꿈이 반영된다.

`<div>` and `<span>` (공간분할)

<div> (the container)
- 전체 페이지를 논리적 block 으로 나눌 수 있다.
- Identifying -> <div id=“some unique name”>
- Class와 id를 더하여 style을 줄 수 있다.
- 논리적으로 중첩하여 쓸 수 있다.
  - 예) volume Class와 volume2 id
    <div class=“volume” id=“volume2”>
<span>
- Logically separates inline contents
  <span class=“book”>The Two Towers</span>
Block tag: <p>,<h1>, <div>, <ul>, etc.
inline tag: <a>, <img>, <span>, etc.

Divitus: Then once they see that you can control all kinds of things by giving divs classes and ids, they just start using divs for everything:
https://css-tricks.com/css-beginner-mistakes-1/

"Divitius"는 웹 디자인에서 div 요소의 과도한 사용을 나타내는 용어입니다. 웹 개발에서 "div"는 주로 웹 페이지의 구조를 만들 때 사용되는 HTML 요소로, 페이지 콘텐츠를 의미 있는 섹션으로 나누는 데 사용됩니다. CSS는 이러한 div 요소를 다양하게 스타일링하는 데 사용되며, 이는 초보자들에게 많은 인상을 남기고, 그들은 div를 클래스와 ID를 지정하여 모든 종류의 것들을 제어하는 데 사용할 수 있다는 것을 깨닫게 됩니다. 결과적으로 초보자들은 모든 것을 div로 감싸거나 감싸려고 시도하게 됩니다.

Block vs. Inline Element

Structuring and mapping contents
- Block Element
  - 컨텐츠를 가지는 독립적인 단위 -> 브라우저 왼쪽에서 오른쪽 끝까지의 공간
  - CONTAINER
  - Element 앞과 뒤에서 line break를 가진다.
  - 다른 블록을 포함할 수 있다 + 인라인도 포함할 수 있다.
  - <h1>, <h2>,…, <p>, <ol>, <ul>, <li>, <div>, <table>
- Inline Element
  - Show “in line” and follows the flow
  - Inline Element는 Inline Element만을 포함
  - <a>, <span>, <img>, etc.

1) block 태그
항상 새로운 줄에 태그가 생성(line break를 가진다는 말과 동일)
좌우 너비가 100%라서 한 줄을 독차지
오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다.

2) Inline 태그
좌우 공간을 필요한 만큼만 차지한다.
이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
다른 태그와 같은 줄에 배치될 수 있다.

사실 inline 태그가 block 태그를 포함해도 컴파일 오류는 없다 하지만 유효성에 어긋난다.

Font/typeface in HTML tags

위의 태그들은 인라인 태그입니다!!

`<img>`

HTML 문서에 image 삽입
- src: path of the image
- alt: 이미지가 없을 때 나오는 text (alternative)

<img src=“img file url”
alt=“description”
width=“width of image”
height=“height of image”>

List (목록)

<ul>: unordered list (Bullet)
<ol>: ordered list (numbering)
<li>: list item (with marker)

<ol>
<li>The fellowship of the ring</li>
<li>The two towers</li>
<li>The return of the king</li>
</ol>

Table

<table>: Table 생성
<thead>: Table Head
<tbody>: Table Body
<tfoot>: Table Footer
<tr>: Table Row
<th>: Table Header
<td>: Table Data
<caption>: Table 이름

<table border=1>
<caption>WebSys</caption>
<thead>
<tr>
<th>월</th> <th>화</th> <th>수</th>
<th>목</th> <th>금</th> <th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mon.</td> <td>Tue.</td><td>Wed.</td>
<td>Thur.</td> <td>Fri.</td><td>Sat.</td>
</tr>
</tbody>
</table>

Hyperlink

Hypertext: 사용자가 선택함으로 관련된 특정 정보로 이동하는 것이 가능한 문서
<a> tag을 사용해서 현재의 페이지에 다른 페이지로 가는 경로(link)를 심는다.
＇href＇ attribute is to point the destination
A image or a text can be a label
The path to the resource follows the regular rules
- ‘..’ : one directory up, parent folder
- ‘/’ : to separate path parts
- id: the property of the other element in the document

<a href="https://wise.ajou.ac.kr">WISE 연구실</a>

<p> Image Link: <a href="https://wise.ajou.ac.kr">
<img border="0" src="wise_logo.gif" width="100" height="100"></a></p>

Anchor with id attribute

한 페이지 내에 링크를 만드는 기능을 anchor라고 한다.

<h2 id=“two”>Part Two</h2>

<a href=“#two”>The Two Towers</a>

download attribute (new to HTML5)

<a href=“media/sauron.jpg” download>The Dark Load Sauron Image Download</a>

Using <base meta>

<head><base href=“https://wise.ajou.ac.kr”></head>

<a href="members.html">Members</a>
<a href="publications.html">Publications</a>

Topics that will be covered later

The following HTML issues will be visited later
- Form: 사용자 입력을 받기 위한 HTML tag
- Audio/Video: 별도 플러그인 없이 재생이 가능하며, JavaScript로 제어
  - Netflix 서비스는 HTML5로 제공됨
Other issues that will be covered later briefly
- Web Socket
- Web Worker
And, we will talk about DOM later too.

Persistent Connection & Pipelining

HTTP는 클라이언트와 서버 간의 연결을 제공하는 전송 프로토콜을 대부분 TCP에 의존합니다.

Short-lived connection

초기에 HTTP는 그러한 연결을 처리하기 위해 단일 모델을 사용했습니다. 이러한 연결은 짧은 수명을 가졌는데, 매번 요청을 보낼 필요가 있을 때마다 새로 만들어졌고, 응답이 수신되면 종료되었습니다.

이 단순한 모델은 성능에 선천적인 한계를 가지고 있었습니다. 각 TCP 연결을 여는 것은 자원 소모가 큰 작업입니다. 클라이언트와 서버 간에 여러 개의 메시지를 교환해야 합니다. 네트워크 지연 시간과 대역폭은 요청 전송이 필요할 때 성능에 영향을 미칩니다. 현대의 웹 페이지는 필요한 정보의 양을 제공하기 위해 많은 요청(12개 이상)이 필요하며, 이는 이 이전 모델이 비효율적이라는 것을 증명합니다.

HTTP의 원래 모델이자 HTTP/1.0의 기본 모델은 short-lived connection 입니다. 각 HTTP 요청은 자체 연결에서 완료됩니다. 즉, TCP 핸드셰이크는 각 HTTP 요청 전에 발생하며, 이는 직렬화됩니다.

이 모델은 HTTP/1.0에서 사용되는 기본 모델입니다(Connection 헤더가 없거나 해당 값이 close로 설정된 경우). HTTP/1.1에서 이 모델은 Connection 헤더가 close 값으로 전송될 때만 사용됩니다.

Persistent connection

HTTP에서 persistent connection이 필요한 이유는 무엇일까? 대표적인 이유로 site locality가 있다. site locality란 웹에서 특정 페이지를 보여주기 위해 서버에 연속적으로 이미지 request를 보내는 것 처럼, 서버에 연속적으로 동일한 클라이언트가 여러 요청을 보낼 가능성이 높은 경우를 의미한다.

이러한 니즈가 계속됨에 따라 HTTP/1.1부터는 HTTP 어플리케이션이 TCP connection을 요청 마다 close하지 않고 재사용할 수 있는 방법을 제공한다. 이렇게 요청이 처리된 후에도 connection을 유지하는 경우를 persistent connection이라고 표현한다.

persistent connection이란 통신의 주체인 서버와 클라이언트 중 하나가 명시적으로 connection을 close하고나 정책적으로 close될 때까지 계속해서 connection을 유지하는 경우를 의미한다.

Persistent connection이 필요한 이유
기본적으로 persistent connection을 사용하게 되면 TCP 연결을 맺기 위해 SYN과 ACK을 주고받는 three-way handshake을 매 요청마다 맺을 필요가 없어진다. 따라서 아래와 같은 장점이 있다.

1) 네트워크 혼잡 감소 : TCP, SSL/TCP connection request 수가 줄어들면서
2) 네트워크 비용 감소 : 여러 개의 connection으로 하나의 client 요청을 serving하는 것보다는 한 개의 connection으로 client 요청을 serving 하는게 더 효율적이다.
3) latency감소 : 3-way handshake을 맺으면서 필요한 round-trip이 줄어들기 때문에 그만큼 latency가 감소한다.

HTTP Pipelining

기본적으로 HTTP 요청은 순차적으로 실행됩니다. 다음 요청은 현재 요청에 대한 응답이 수신된 후에만 발행됩니다. 네트워크 지연 시간 및 대역폭 제한에 영향을 받기 때문에 서버에서 다음 요청을 보기 전에 상당한 지연이 발생할 수 있습니다.

파이프라인은 응답을 기다리지 않고 동일한 영구 연결을 통해 연속적인 요청을 전송하는 프로세스입니다. 이를 통해 연결 지연 시간을 피할 수 있습니다. 이론적으로 두 개의 HTTP 요청을 동일한 TCP 메시지에 패킹해야 한다면 성능도 향상될 수 있습니다.

HTTP/1.1 에서는 다수의 HTTP Request 들이 각각의 서버 소켓에 Write 된 후, Browser 는 각 Request 들에 대한 Response 들을 순차적으로 기다리는 문제를 해결하기 위해 여러 요청들에 대한 응답 처리를 뒤로 미루는 방법을 사용한다.

즉, HTTP/1.1 에서 클라이언트는 각 요청에 대한 응답을 기다리지 않고, 여러개의 HTTP Request 를 하나의 TCP/IP Packet 으로 연속적으로 Packing 해서 요청을 보낸다.

파이프라이닝이 적용되면, 하나의 Connection 으로 다수의 Request 와 Response 를 처리할 수 있게끔 Network Latency 를 줄일 수 있다.

하지만 위의 기법 설명에서 언급하듯이, 결국 완전한 멀티플렉싱이 아닌 응답처리를 미루는 방식이므로 각 응답의 처리는 순차적으로 처리되며, 결국 후순위의 응답은 지연될 수 밖에 없다.

김관주

이전 포스트

1. WWW

다음 포스트

2. HTML

웹시스템

HTML 개요

기본 구조

HTML Head

HTML body

Attribute (속성) & Comments

HTML Tags

Heading (header)

Paragraph, break, pre

`<div>` and `<span>` (공간분할)

Block vs. Inline Element

Font/typeface in HTML tags

`<img>`

List (목록)

Table

Hyperlink

Topics that will be covered later

Persistent Connection & Pipelining

Short-lived connection

Persistent connection

HTTP Pipelining

1. WWW

3. CSS

0개의 댓글

2. HTML

웹시스템

HTML 개요

기본 구조

HTML Head

HTML body

Attribute (속성) & Comments

HTML Tags

Heading (header)

Paragraph, break, pre

<div> and <span> (공간분할)

Block vs. Inline Element

Font/typeface in HTML tags

<img>

List (목록)

Table

Hyperlink

Topics that will be covered later

Persistent Connection & Pipelining

Short-lived connection

Persistent connection

HTTP Pipelining

1. WWW

3. CSS

0개의 댓글

`<div>` and `<span>` (공간분할)

`<img>`