TIL 29일차_ HTML개념&append()

HTML 개념과 append와 appendChild의 차이

---

HTML은 무엇인지 말로 설명할 수 있도록 해보자.

HTML (Hyper Text Markup Language)
하이퍼텍스트는 뭐고, 마크업 언어는 또 뭐야?

1. 하이퍼텍스트

하이퍼텍스트는 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다.
기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다.

이런 하이퍼텍스트의 등장은 검색엔진과 더불어 정보습득의 새로운 장을 인류에게 가져다 주었다.
웹이라는 것은 컨텐츠들이 하이퍼텍스트로 묶인 집합이라고 볼 수 있다.

2. 마크업 언어(markup 言語, markup language)

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.

태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.

일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다.
다만 MXML이나 XAML처럼 특정 프로그래밍 언어와 강하게 연관되어 기능하거나 제한적으로 프로그래밍 언어의 기능을 갖춘 것도 일부 있는데, 이런 경우엔 구별이 명확하지 않다.

요약:
HTML (Hyper Text Markup Language)는
하이퍼링크(참조)를 통해 접근할 수 있는 텍스트들을 태그를 이용하여 구조화한 언어이다.

append()와 appendChild()의 차이

먼저,
append()가 확장성이나 기능성면에서 뛰어나고 최근에 나온 메서드이다.

1. append()가 appendChild()보다 좋은 점

• 여러개의 노드를 추가할 수 있다.

• rest parameter 사용 가능

  let liElements = document.querySelectorAll('li');
  document.querySelector('ul').prepend(...liElements);

• 노드객체뿐만 아니라, 문자열을 추가할 수 도 있다.

  let liElement = document.createTextNode('불라불라');
  li.appendChild(liElement); //아래와 같다.
  li.append('불라불라'); //위와 같다.

• prepend()메서드 지원

2. appendChild()가 좋은 점

• 인터넷 익스플로러 지원. 끝.