Skip to content

Step02

Jump to bottom
박은영 edited this page Aug 22, 2020 · 27 revisions
  • html5, 와 html 의 역사
  • 바닐라스크립트에서 모듈을 로드해 오는 방법 🔗
  • head 태그에 쓰인 meta 태그의 프로퍼티name, content ...의 의미
  • html 에서 <script> 를 어디에다 두면 좋은지 그리고 그 이유
    • defer, async, 코드내의 script 태그 위치 등
  • script 태그로 여러 js 파일들을 로드해올 것이다. script 파일들의 순서가 영향이 있는지 정리하기
  • javascript 의 모듈시스템
  • SPA
  • body 태그 안에 왜 div 태그를 하나만 생성하였는지 정리하기

Reference

HTML (HyperText Markup Language)

  • 웹페이지 기술을 위한 마크업 언어
  • HTML 태그를 통해 정보 구조화
  • 인터넷에서 볼수있는 문서를 만들때 사용하는 프로그래밍 언어

HTML5

차세대 웹표준으로, 기존 텍스트/하이퍼링크표시에서 다양한 어플리케이션 까지 표현, 제공하도록 진화한 언어
모든브라우저에서 지원. (explorer 8이하 x)

doctype : 문서 내에 그 문서가 특정 문서형식 정의를 따름을 지정 선언된 페이지의 html버전이 무엇인지를 웹브라우저에 알려주는 역할을 선언 ex) 은 html5를 나타낸다.

HTML5 에서 추가된 기능들

  1. 멀티미디어
    • 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적 지원
  2. 그래픽
    • SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL 을 사용한 3차원 그래픽 지원
  3. 통신
    • 이전 HTML 은 단방향 통신 (예시) 만 지원
    • HTML 는 서버와의 소켓 통신 지원
  4. 디바이스 접근
    • 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어 가능
  5. 오프라인 및 저장소
    • 오프라인 상태에서도 어플리케이션을 동작 가능
  6. 시맨틱 태그
    • HTML 요소의 의미를 명확히 설명하는 시맨틱 태그 도입
    • 검색엔진, 브라우저, 개발자 모두에게 콘텐츠의 의미를 설명 할 수 있다.
  7. CSS3

HTML5 형식

  1. 반드시 <!DOCTYPE html> 로 시작하여 문서형식을 HTML5 로 지정한다.
  2. 태그는 대소문자를 구분하지 않으나 W3C 에서는 HTML4 의 경우 소문자를 추천하고 있다.
  3. 컨텐츠를 가질 수 없는 빈 요소. attribute 만 가질 수 있다. <meta charset="utf-8">
    • br, hr, img, input, link, meta
  4. 글로벌 attribute
    • 모든 HTML 요소가 대체로 공통으로 사용할 수 있는 attribute
    • id, class
    • hidden : css 의 hidden 과는 다르게 의미상으로 브라우저에 노출되지 않게 한다.
    • lang : 지정된 요소의 언어를 지정. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
    • style : 인라인 스타일 지정
    • tabindex : 사용자가 키보드로 네비게이션 시 이동 순서 지정
    • title : 요소에 관한 제목 지정
  5. 주석 <-- -->

HTML 의 역사

2. 바닐라스크립트에서 모듈을 로드해 오는 방법 🔗

import export 사용방법

<script type = "module" src="app.js"></script>의 type="module"을 사용한다.
<br>
<script type = "module" src="app1.js"></script>

app.js export 변수1 export 함수1

app1.js import {변수1,함수1} from "./app.js"

3. head 태그에 쓰인 meta 태그의 프로퍼티name, content ...의 의미

meta 태그

  • metadata (정보에 대한 정보) 를 제공하는 역할

  • 웹서버와 웹 브라우저간 상호 교환되는 정보를 정의

  • 디자인 영향x

  • 문서에 대한 정보를 기술하는 태그(기계들이 읽는것)

  • 검색 엔진, 브라우저에 읽힌다.

Metadata

  • 사이트자체에 대한 정보
  • 저작자, 문서의 언어

예시

  • 검색 엔진을 위한 키워드 <meta name="keywords' content="HTML, CSS, JavaScript">
  • 사이트에 대한 설명 <meta name="description" content="html css 자바스크립트 강좌">
  • 사이트 저작자 표시 <meta name="author" content="지구별에">

meta 태그의 속성

name

메타정보에 대한 이름, content 속성의 값에 대한 이름

http-equiv 속성을 설정하면, name 속성은 사용하지 않음.

속성 값

  1. keywords
    • 문서에 대한 핵심어(keywords) 를 쉼표로 분리하여 표시
    • 문서에 대한 정보를 검색 엔진에 제공
  2. description
    • 문서에 대한 설명
    • 검색엔진이 검색 결과와 함께 가져간다.
  3. author
    • 저자이름
  4. generator
    • 그 문서를 생성하기 위해 사용된 소프트웨어
  5. application-name
    • 문서를 표시하는 웹 어플리케이션 이름

content

name 속성과 http-equiv 와 연관된 값을 준다.

속성값

  • 메타정보에 대한 내용

예시 <meta name="keywords" content="HTML, CSS"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

http-equiv

  • content 속성의 정보/값을 위한 HTTP header 를 제공

  • http 응답 헤더를 모방하기 위해 사용될 수 있음 (?)

  • 문자 설정을 위한 meta 태그 변화

    • HTML 4.01 : `
    • HTML5 : <meta charset="UTF-8>
  1. charset : 해당 html 문서의 문자 인코딩방식 (html5에서 새롭게 추가)
  2. content : name속성이나 http-equiv 속성과 관련된 값 명시
  3. http-equiv : http헤더를 제공
  4. name : 웹 페이지가 나타내는 웹 애플리케이션의 이름을 정의

ex)구글 상위권 노출을 위한 방법

4 .html 에서 <script> 를 어디에다 두면 좋은지 그리고 그 이유

defer, async, 코드내의 script 태그 위치 등 브라우저의 동작 방식

  1. html 읽기
  2. html 파싱 2.1 css 읽기 2.2 css 파싱
  3. dom 트리 생성 (각 요소를 객체로 만들어서 연결) 3.1 cssom 트리 생성
  4. render 트리 생성 (dom트리와 cssom 트리를 결합하여 생성)
  5. display 표시

렌더링 엔진 : 브라우저 화면에 요청된 페이지를 표시하는 것 (html css 파싱) 브라우저는 서로다른 렌더링 엔진을 사용한다.

자바스크립트 엔진 : js 코드 또는 script 태그에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다.

브라우저는 기본적으로 동기적으로 처리

script 태그를 중간에 놓을경우

  1. HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아서 페이지 로딩 시간이 단축된다.
  2. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다. (querySelector, getelementbyId)

브라우저를 비동기로 표시하는 방법 ( 스크립트 로드에는 같이 html파싱과 같이 진행하나 실행시에는 html파싱 정지)

  1. async : 스크립트가 준비 될 때마다 즉시 실행
  2. defer : HTML 구문 분석이 완료되기 전에 스크립트 다운로드가 완료 되더라도 구문 분석이 완료 될 때까지 스크립트는 실행되지 않는다.

5. script 태그로 여러 js 파일들을 로드해올 것이다. script 파일들의 순서가 영향이 있는지 정리하기

app.js에 영향을 받는 app1.js를 app.js보다 위쪽 코드에 놓아도 정상적으로 작동하는거보면 영향이 없다고생각한다.

6. javascript 의 모듈시스템

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

모듈은 "엄격 모드"로 실행됨

모듈은 독자적인 모듈 스코프를 갖기 때문에 모듈 안에 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조할 수 있다. 만약 모듈 안에 선언한 식별자를 외부에 공개하여 다른 모듈들이 참조할 수 있게 하고 싶다면 export 키워드를 사용한다. 선언된 변수, 함수, 클래스 모두 export할 수 있다.

모듈이 export한 식별자를 각각 지정하지 않고 하나의 이름으로 한꺼번에 import할 수도 있다. 이때 import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당된다. ex) import * as lib from './lib.mjs'; 사용방법 : console.log(pi); => console.log(lib.pi);

//출처 : https://ko.javascript.info/modules-intro

7. SPA

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 초기 구동이 늦긴하나 그 후로 서버에 요청이 적어서 빠른 반응성을 보인다.

8. body 태그 안에 왜 div 태그를 하나만 생성하였는지 정리하기

솔직히 정확히는 이유를 모르겠다. 코드를 해석하기 위해 보기 편하게 하려고 태그를 하나만 쓰는 것 아닐까 생각한다.

Clone this wiki locally