기본기 다지기 - 유튜브 뉴 렉쳐 채널의 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강좌 (총 38강)
해당 채널은 강의 컨텐츠의 역사부터 현재까지 흐름과 트렌드를 빠짐없이 강의해주는
개인적으로 매우 유익한 내용을 담고 있다고 생각되는 채널입니다.
지난 부스트코스의 HTML 기초에 이어 HTML5, CSS 의 기초를 확실히 다지고자 뉴 렉쳐의 HTML5, CSS 강좌를 학습하기로 결정하였습니다.
이 다음으로 유튜브 NomadCoder 의 바닐라JS 강좌를 학습할 예정이기에
HTML5, CSS 를 꼼꼼히 복습해놓도록 할 것입니다!
기초가 탄탄하지는 않지만 나름 만 2년 8개월 동안 실무를 경험했기에.. HTML 태그 실습과 같은 부분은 정리 없이 빠르게 넘어가고! 나중에 다시 한 번 복습하고 싶은 포인트들을 글에 메모하며 진행할 예정임.
HTML5, CSS 강의 01강 ~ 09강 학습 중 메모
- 02강 中
- 웹과 인터넷의 차이, 관계를 설명할 수 있는가?
- 초창기 각 유저들은 각자의 컴퓨터에 여러 터미널로 구성된 네트워크를 가지고 있었지.
이 네트워크들을 연결하고 싶었기에 그 연결 기술 중 하나인 Inter + Network ! Internet 이 등장한거야.
이것이 바로 인터넷이야.
이렇게 인터넷 기술이 나오고 나서 유저들은 서로 MP4, JPG, HTML 문서 파일 등을 교환하게 되었지.
그런데 무분별하게 규칙 없이 파일들을 교환할 수 없었기에 Protocol이 나타나게 된거야.
파일을 교환할 때 서로 문제 없이 교환할 수 있도록 정한 규약. FTP
그 외에 SMTP, TELNET, www(http) 등이 나타나게 되었습니다.
여기서 월드 와이드 웹(Hyper Text Transfer Protocol)은 html 문서를 교환할 때 지켜야 할 규약이고
이 웹은 바로 인터넷 위에서 문서를 교환하는 규약이라고 보면 됩니다.
- 초창기 각 유저들은 각자의 컴퓨터에 여러 터미널로 구성된 네트워크를 가지고 있었지.
- 웹과 인터넷의 차이, 관계를 설명할 수 있는가?
- 09강 中
- DOCTYPE과 W3C ?
- <html> 상단에 <!DOCTYPE> 을 넣을 수도, 넣지 않을 수도 있습니다. 이들은 어떤 의미를 가질까요?
HTML4.0 때에만 해도 3가지의 DOCTYPE을 지정하던 시절이었습니다.
그 때에도 지금과 같이 다양한 브라우저가 있었죠.
그런데 웹에서 같은 태그로 문서를 만들었는데 브라우저가 다른 이유로 나타나는 뷰가 달라지는 현상이 있었습니다. 그리고 점점 각각의 브라우저들은 그들만의 태그를 만들어내기도 하고, 디바이스들도 더 다양해져 왔습니다.
브라우저별로 페이지를 만들어 줄 수도 없고, 그럼 어떻게 해야할지 고민이 될 수 밖에 없었습니다.
그래서 90년대에 W3C(World Wide Web Consortium) 이라는 기구가 생겨납니다.
이 W3C는 웹의 표준을 정의하기 위해 모였고, 다른 언어들의 ISO, 언어코드, 인터넷 표준 기술을 가져다 참고하여 웹의 표준을 만들게 됩니다.
W3C는 이러한 일을 한다고 보면 됩니다. 멤버들을 모아 어떤 태그를 표준에 넣기 위한 제시 > 테스트 > 권고안 제시(아마 브라우저에게). 이러한 일을 하게됩니다. 쉽게 말해 강제성은 없고 표준을 세우고 브라우저에게 넣도록 권고하며 기준을 만들려고 노력한다는 것 같습니다.
브라우저들은 서로 호환되지 않는 렌더링 방식을 쓰는것은 좋지 않기 때문에 W3C는 3가지의 렌더링 도큐먼트 렌더링 방식을 제안합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
... /loose.dtd">
... /frameset.dtd">
방식이 있었고 위에서부터 표준 규약 많이 종속된다고 볼 수 있습니다.
만약에 DOCTYPE 을 쓰지 않는다면, 기준이 없고 당사의 브라우저 방식으로 렌더링 하게 되는 것으로 내 멋대로 쓰겠다! Quirks(쿼크) 렌더링 방식이라고 합니다. - 과거에 W3C가 제시한 3가지 DOCTYPE 을 제시했지만 이 또한 3가지가 혼동될 수 있는 요지는 있었기에 좋은 방법은 아니었습니다. 고로 HTML5 부터는 사라졌습니다.
그래서 HTML5부턴 한 가지 방식의 렌더링 방식을 진행하기 위해 <!DOCTYPE html> 만 모두 사용하도록 권고 되었습니다.
- <html> 상단에 <!DOCTYPE> 을 넣을 수도, 넣지 않을 수도 있습니다. 이들은 어떤 의미를 가질까요?
- DOCTYPE과 W3C ?
감사합니다.
'Room 103. Front-end > HTML5 & CSS3' 카테고리의 다른 글
| 뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (3) (0) | 2020.06.01 |
|---|---|
| 뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (2) (0) | 2020.06.01 |
| "[HTML5] SVG vs Canvas?" (0) | 2020.05.05 |
| "HTML 메타데이터와 태그에 대해 알아보자" (0) | 2020.05.05 |
| 부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 - (2) (0) | 2020.05.04 |
