HTML5, CSS 강의 10강 ~ 15강 학습 중 메모
10강 실습환경 준비하기
- Visual Studio Code 라는 툴 설치.
- JavaScript 강의 3/4강을 통해 라이브 서버까지 설치하여 웹 개발 환경 만들기.
- 웹 문서
- 스크립트 코드
- 위 개발을 위해 편집기능이 극대화된 툴이 필요하다!
- Visual Studio Code (모든 OS 편집 및 디버깅). 편집기가 우선시 된 VSCode.
- 모듈 중 Live Server 설치.
11강 PC웹과 모바일 웹의 실습순서 안내
- 어떤 웹을 먼저 만들어야 할까? PC웹 vs 모바일웹
- 모바일용 웹과 PC용 웹의 양분화...
- 태블릿 등 여러 디바이스가 더 생겨남...
- 트래픽이 많은 모바일 웹, 태블릿, ... PC 웹까지. 트래픽에 반응할 수 있게끔 큰 것부터 작은 순으로.
(Mobile First와 반응형 웹) - 어느 쪽에 치중해야 하는지 상황에 따라 다르겠지만,
작업환경으로써 좋은 환경은 PC 웹이고, 소비형으로는 모바일 웹이 유용한 경향이 있음!
12강 실습을 위한 파일 구조 생성하기
- 하나의 웹 페이지가 있을 때, 수 많은 페이지가 있습니다.
- 이 페이지는 결국 root 진입점이 있을 것이고, 이것에 따른 다른 화면 파일들이 있을 것이고, 관리하기 편한 파일 구조가 있기 때문에 파일 구조 개념을 알아봅니다.
- 하나의 디렉토리에 모든 문서 파일을 넣을 수 없으므로, 구조화 된 문서(grouping) 또는 특정 구조로 만드는 것이 중요합니다.
13강 상대 경로와 절대 경로
- 경로의 종류
- "/" : root . 어디에 있던 root를 의미
- "./" : 현재 있는 경로. 생략 가능.
- "../" : 현재 경로의 상위 폴더 경로
14강 SGML 그리고 HTML과의 관계
- 태그 사용방법에 규칙이 없다?
- <meta charset="UTF-8"> 와 같이 단일태그로, 그 자체로써 사용되는 녀석이 있다. 왜 이녀석은 /> 이 아닐까?
- 페이지 간의 이동을 위한 하이퍼링크 작성
- 1. 순수하게 HTML 문서를 따르는 문법 구조
- 2. XHTML 문법 구조
- 3. Polyglot 문법 구조. (HTML 문법 구조 + XHTML 문법 구조)
- 그렇다면 XHTML 은 무엇일까?
- XHTML의 이전.
- SGML 이라는 언어가 있었습니다. 이 전시엔 GML 이라는 녀석에서,
IBM에서 데이터를 구분할 수 있는, 범용적으로 사용할 수 있는 마크업 언어를 만들게 됨 - 처음에 [ 1 안녕하세요 23 저는 45 ] 를 표현하기 위해서 데이터를 구분하는 구분자를 어떻게 만들까 하다가, [ '1', '안녕하세요', '23', '저는', '45' ] 를 해도 복잡하고 점점 구분하는 데이터가 복잡해서 태그가 나오게 됨. <h1>안녕하세요</h1> ... 이러한 마크업 언어가 등장.
- 꺾음새는 무조건 태그가 되는 것이고, 그 외엔 컨텐트가 되는 것이므로 충돌할 여지가 없음!!!
- 이렇게 태그로 멋드러지게 표현하다보니까, 태그를 활용하는 문자가 많아짐.
- 그 중 하나가 웹!!!
- 웹에서는 꺾음새를 HTML 이라는 이름으로 사용하고 있음.
- 이 HTML 은 <html>이 루트가 되어있고, 그 안에 헤드, 바디 순서로 들어가야 하는 것 등 여러가지가 정의되어 있습니다.
- 위와 같이 미리 정의된 것들이 SGML 이라는 것들에 의해서 html.dtd 에 정의되어 있습니다.
- dtd : document type definition . 여기에 정의되어 있어서 html 이 루트고 헤드 바디 순으로만 써야됨 !!
- 그렇기 때문에 html.dtd 에 정해진, 순서, 횟수까지 정해진 타입대로 써야 함.
- 이러한 형식을 정의하는 데 쓰여진 언어가 SGML 이다 보니까, 태그를, 언어를 만드는데 사용된 언어. 메타 언어라고 합니다.
- 어쨌든 SGML 이라는 메타언어를 통해 HTML 을 만들었고, 그 구조에 따라 우린 웹을 개발!
- (HDML 이라는 태그가 좀 더 적은 언어가 또 있음)
- SGML 이라는 언어가 있었습니다. 이 전시엔 GML 이라는 녀석에서,
- XHTML의 이전.
15강 시멘틱 웹과 XML 그리고 HTML과의 관계
- 90년대부터 많이 변해온 웹.
- 2000년대부터 더 빠르게 변한 웹.. 그 중심에 W3C
- W3C는 문서로써의 변화가 점점 미래지향적으로 바뀌는 것을 고려합니다. 시멘틱 웹!!!
- 미래를 고려했을 때, Agent(기계 등)이 알아서 처리하는 시대를 고려했을 때!!!
- HTML 은 유용하지 않다고 보여짐.
- 왜냐면 태그가 꾸며지는 용도가 쓰이는 경향도 있기 때문에!!
- 그래서 Agent가 알아볼 수 있고, 키워드같은 태그를 사용하는 것이 더 유용할 것이라고 생각.
- <워크샾>이든, <장소> 든 마음 껏 쓰세요. (XML 에서 X는 eXtential)
- 위와 같이 쓰면 데이터를 해석하는 입장에서 HTML 보다 훨씬 더 바람직하다!
- 이를 리딩하고 있었던 사람은 W3C의 팀 버너스리. 웹의 아버지입니다.
- 이 분은 웹 문서라고 하는 것이 데이터를 설명할 수 있는, 의미를 갖고 있는 웹, 시멘틱 웹으로 바꾸고 싶었음!
- 그렇게 하기 위해서 빠르게 해석기를 교체해야 했습니다.
- [[[ SGML -> html.dtd -> html ]]]
- ==> [[[ XML -> Welformed(형식만 잘 맞춰 쓰세요) -> XHTML ]]]
- 위와 같이 <meta> 같은 녀석은 잘못된 것임!!!
해석기에 의한 결과가 유효하지 않게 나올 수 있음.
!!!!!!!!!!!! 그래서. XHTML 에선 태그를 꼭 닫아주어야 함.
!!!!!!!!!!! HTML 에선 <meta > 이걸 쓸수가 있는 건 html.dtd 에 정의되어 있기 때문입니다!!!!
!!!!!!!!!!!! 그렇다면 현재는 둘 중 어떤것을 써야하나요 ?? 어떤 HTML 을 사용하는 것인가요 ??
==> 둘 다 가능. 이유는 다음 강의에..
'Room 103. Front-end > HTML5 & CSS3' 카테고리의 다른 글
| 뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (4) (0) | 2020.06.02 |
|---|---|
| 뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (3) (0) | 2020.06.01 |
| 뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (1) (0) | 2020.05.14 |
| "[HTML5] SVG vs Canvas?" (0) | 2020.05.05 |
| "HTML 메타데이터와 태그에 대해 알아보자" (0) | 2020.05.05 |
