on
[1일차] 10/6
[1일차] 10/6
✓ DT스쿨 - 웹 퍼블리싱 [1일차] 10/6
을 읽고 좀 더 심화과정을 이용해 복습하고 싶었다.
그래서 DT스쿨 웹 퍼블리싱 과정에 지원했고, 얼결에 붙었다.
실무에 적용이 필요할 재직자들을 주로 모집하는 듯해서
취준생인 나는 그다지 큰 기대를 걸지 않았었는데 합격이었다.
아마 수강의지를 어필하는 지원서와 면접 영상 덕분이지 않을까 예상해본다.
아무튼! 뒤늦게 알고 보니 Do it 저자이신 고경희 선생님의 강의.
그래서인지 책의 커리큘럼과 수업이 똑같이 진행되었다.
실습용 파일도 동일해 한 번 배웠던 것을 고스란히 반복하는 셈이 되었지만,
'반복하며 익히기'에 의의를 두고 열심히 수강했다.
생활코딩을 처음 들었을 때 느꼈던 웹의 신비함,
(그래봤자 나는 개발을 각오한지 채 한 달도 되지 않았지만)
내가 입력한 태그가 실시간으로 반영되어 보여지는 웹 문서들은
한 번 더 반복해도 역시나 경이롭고 감동적이다.
다만 듀얼모니터가 아닌 데다 오래된 맥북 탓에 줌 수업을 따라가는 데 애로사항이 조금 있었다는 것.
그래도 상냥하고 친절하신 선생님과 매니저님 덕분에 즐거운 수업이었다.
8주 과정이 진행되는 동안 웹 페이지를 만들어볼 계획이다.
수업을 병행하며 자바스크립트(책에서 절망감을 안겨줬던)의 다른 강의도 찾아 들어야겠다.
✓ 강의 메모
* 웹(Web)은 팬데믹 이후 사용량이 급격하게 증가
=> 오프라인에서 온라인으로 디지털 트랜스포메이션 빠르게 진행 중
* 현재 몇 개의 웹 사이트가 있을까? 1억 9천개
www.internetlivestars.com
* 웹은 이제 단순한 사이트가 아니라 플랫폼이며, 웹 사이트도 표준이 필요하다.
* 월드 와이드 웹(www)의 등장
팀 버너스리에 의해 1991년에 제안됨
하이퍼링크를 지원하는 http 프로토콜, 세계 최초의 웹 사이트
* 웹 브라우저 출시
모자익 브라우저(1993)
넷스케이프 내비게이터(1994) - 유료였음
* W3C
웹 관련 기술의 표준화를 추진하는 단계
HTML4까지는 w3c의 표준안을 브라우저 업체에서 잘 따르지 않음(특히 IE)
인터넷 속도가 빨라지고 모바일 기기가 등장
W3C에서는 새로운 표준 XTHML 추진 => 브라우저 업체들의 경쟁이 시작됨
* WHATWG
기본 기능인 HTML을 확장
오픈 소스를 통한 스펙 개발
웹 애플리케이션을 위한 실제적인 기능 추가
* 현재 진행 상황
HTML5는 웹 표준 기술
현재 HTML 5.2까지 표준안 발표
spec.whatwg.org
* 예전의 웹 사이트 모습
web.archive.org/
* 웹 스토리지, 캔버스, 웹 소켓, 지오로케이션은 이번 강의에서 다루지 않는다.
=> 마크업(시맨틱 태그), 비디오/오디오, 웹 폼
* 정의
HTML = 문서의 뼈대
CSS = 문서의 스타일 (디자인)
Javascript = 문서의 동작 (효과)
(자바스크립트는 제품 이름, 실제 웹 표준의 이름은 ES6)
* HTML은 웹 문서를 작성하는 프로그램과 웹 문서를 보는 프로그램이 다르다.
* 웹 퍼블리싱이라는 용어는 외국에 없다.
디자이너(포토샵 등의 프로그램으로 전체적인 디자인) -> 퍼블리셔(디자인 기반으로 HTML, CSS 작성)
-> 개발자(사이트 동작에 필요한 자바스크립트 작성)
* 에밋 기능(VS CODE 단축어)
* HTML = 마크업 언어
Hyper Text Markup Language
* Semantic = 의미론적인, 의미가 통하는
시맨틱 태그 = 이름만 봐도 의미를 알 수 있는 HTML 태그
화면 낭독기 같은 보조기기에서 사이트의 구조를 이해할 수 있다.
문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기 쉽다.
웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
* 주요 태그
- 헤더 영역
: 검색 창이나 사이트 메뉴 삽입
- 내비게이션 영역
: 문서 안에 여러 개 만들 수 있음
- 핵심 콘텐츠를 담는
: 한 번만 사용 가능
- 독립적인 콘텐츠를 담는
: 섹션 태그도 포함
- 콘텐츠 영역을 나타내는
: 몇 개의 콘텐츠를 묶는 용도
단, css 적용을 위해 묶는 용도로 쓰지 말 것
- 사이드 바 영역
: 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
- 푸터 영역
: 사이트 제작 정보나 저작권 정보, 연락처 등
다른 시맨틱 태그 사용해 다양한 정보 포함
- 여러 소스를 묶는
: 소스를 묶는 용도
영역을 구별하거나 스타일 적용하기 위해
* 널리 사이트의 요소 점검을 통해 구조를 살펴볼 것
nuli.navercorp.com
from http://hyunsil-k.tistory.com/3 by ccl(A) rewrite - 2021-10-08 09:27:39