HTML Living Standard, URL, IP, PORT, Grouping Content

<SeongHun />·2022년 3월 29일

TIL 멋쟁이 사자처럼

HTML

목록 보기

2/3

오늘의 키워드📌

URL, IP, PORT
HTML Living Standard
Grouping Content

확실히 혼자 공부할 때 보다 많은 정보들을 접하게 되고, 새로운 사실들을 많이 알게 되는 것 같다! (강사님의 경험담 이야기를 듣는것도 재미가 쏠쏠하다!)

1. URL / IP / PORT

IP

인터넷에 연결된 장치(컴퓨터, 스마트폰, 서버 등)들은 각각 식별할 수 있는 주소들을 가지고 있고, 서로 간의 통신을 위해서는 IP(주소)를 이용해 접속해야 된다.
만약 네이버에 접속하고 싶다면? 네이버 컴퓨터가 가지고 있는 IP(주소)로 접속해야 된다.

먼저 $nslookup 명령을 통해 네이버의 ip 주소를 알아보자.

223.130.200.107 이라는 주소를 얻었고, 훌륭한 프로그램인 브라우저 주소창에 입력해주면?!

우리가 알고있는 NAVER에 정상적으로 접속이 되었다.
근데 이와 같은 방식은 매우 매우 불편하다. 접속하고자 하는 컴퓨터의 IP주소를 알아야 될뿐더러 기억하기 어려운 숫자로 되어있다.

중요한 것은 숫자로 이루어진 IP주소는 기억하기 어렵다.
수많은 사이트들의 IP주소를 기억해야 된다면 정말 끔찍할 것이다. 그래서 우리가 흔히 알고 있는 이름으로 된 도메인, URL이 있는 것이다.

URL

IP(주소)는 사람이 기억하기 어렵기 때문에 IP(주소)에 이름을 부여하게 되었는데, 부여한 이름을 도메인이라고 한다.
www.naver.com URL 도메인을 브라우저 주소창에 입력하면 해당 페이지로 이동하게 되는데
이때 URL 도메인은 네이버를 가리키는 IP(주소)를 가리킨다.

즉, 위에서 살펴봤던 223.130.200.107 와 www.naver.com 은 동일하다는 것이다.

Port

그렇다면 Port(포트)는 무엇일까?
포트는 간단하게 설명하자면 "문" 이다. 우리가 어떠한 컴퓨터에 접속할 때는 어떤 서버에 접속하려는지 구분이 필요한데, 이때 포트라는 서버의 문을 사용한다.

22번 port(문)으로 가고싶어요~
저는 23번 port(문)으로 갈래요~
443번 port(문)로 갈게요~

정리

도메인, URL : 이름 (www.naver.com)
IP : 주소 (223.130.200.107)
Port : 문 (22, 23, 80, 443 ...)

2. HTML Living Standard

HTML Living Standard 를 직역하면 "살아있는 표준" 인데 HTML 을 규정한 표준이라는 의미를 가지고 있다. 중요한 것은 HTML 의 스펙은 2011년부터 버전 넘버 없이 HTML Living Standard 이다.

그 전에 이를 알기 위해서 HTML 을 개발하던 W3C 와 WHATWG 를 먼저 살펴보자.

가슴이 웅장한 W3C , WHATWG 그리고 웹 표준 통합

W3C 는 HTML 4.01 이후 XML 기반의 XHTML 로 웹 표준의 방향을 변경했다. 하지만 XML 문법이 까다로워 웹 개발자들은 반기지 않았다.
WHATWG 는 W3C 와 개발을 협업 하면서도 독자적인 HTML 표준의 작업을 했는데, 이를 HTML Living Standard 라고 불렀다. HTML Living Standard 는 W3C 의 HTML5 와는 달리 버전 넘버가 없고 바로 업데이트 된다.
W3C 는 계속 HTML5.1 ~ 5.2 를 발표하며 완결된 HTML5 버전을 만들고 싶었지만, WHATWG는 지속적으로 살아있는 표준 형식으로 개발하는 Living Standard로 개선, 발전되기를 바라면서 결국 두 단체는 각자의 길을 걷게 되었다.
2019년 W3C 는 HTML5.3 권고안을 내세우지만 WHATWG 가 거부의사를 보이면서, 표준화 이슈가 다시 시작되었지만 결국 W3C 는 HTML5 이후 버전의 표준발행을 포기하고 WHATWG 의 방식을 수용하기로 합의 하였다.
2019년 부터 HTML5 대신 HTML Living Standard 로 불리며 WHATWG 가 주관하게 되었다.

3. Grouping Content

`<ol>, <ul>, <li>`

<ol> : ordered list의 약자로써 순서가 있는 목록을 뜻한다.
<ul> : unordered list의 약자로써 순서가 없는 목록을 뜻한다.
<li> : 각 항목들을 나열하는 태그로써 list item을 뜻한다.

`<dl>, <dt>, <dd>`

<dl>, <dt>, <dd> 역시 목록을 정의할 때 쓰인다.
차이점이 있다면 <dl>, <dt>, <dd> 는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록이다.

<dl> : 정의 목록(definition list) 이다.
<dt> : 정의할 용어(definition term) 이다.
<dd> : 용어를 설명(definition description) 할 때 쓰인다.

`<div>`

<div> : 레이아웃을 나눌 때 사용하는 태그. 이 태그는 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있다.
<article>, <section>, <header>, <nav> 는 기본적으로 <div>와 같은 역할을 한다. 차이점이 있다면 태그에 의미를 부여한 것이다. 대용할 태그가 없을 경우 <div> 태그를 사용하자!