✍ w3schools HTML

 

웹 개발과 관련된 다양한 웹 기술 및 프로그래밍 언어에 대한 교육 자료를 제공하는 온라인 교육 웹사이트 w3school.com에서 제공하는 HTML 내용을 정리하도록 한다. 개발보다는 학습을 중점으로 정리하도록 하겠다.

 

📚 HTML 소개

HTML이란?

HTML은 웹 페이지를 만들기 위한 표준 마크업 언어다.

  • HTML은 Hyper Text Markup Language의 약자
  • HTML은 웹 페이지를 만들기 위한 표준 마크업 언어.
  • HTML은 웹 페이지의 구조를 설명.
  • HTML은 여러 요소(element)들의 연속으로 구성되어 있다.
  • HTML 요소는 브라우저에게 콘텐츠를 어떻게 표시할지 알려준다.
  • HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠 조각에 레이블을 지정한다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>​

 

<!DOCTYPE html> 선언은 이 문서가 HTML5 문서임을 정의 한다.
<html> 요소는 HTML 페이지의 루트 요소다.
<head> 요소는 HTML 페이지에 대한 메타 정보를 포함한다.
<title> 요소는 HTML 페이지의 제목을 지정한다 (브라우저의 제목 표시줄이나 페이지의 탭에 표시된다).
<body> 요소는 문서의 본문을 정의하며, 모든 가시적인 내용을 담는 컨테이너 역할을 합니다. 이 내용에는 제목, 단락, 이미지, 하이퍼링크, 테이블, 목록 등이 포함될 수 있다.
<h1> 요소는 큰 제목을 정의한다.
<p> 요소는 단락을 정의 한다.

📚 HTML 요소(Element)란 무엇인가?

HTML이란?

HTML요소는 시작 태그, 콘텐츠, 그리고 종료 태그로 정의된다.

<태그이름> 여기에 콘텐츠가 들어간다 </태그이름>

 

HTML 요소는 시작 태그부터 종료 태그까지의 전체를 포함한다.


ECMAScript 2015, 일반적으로 ES6라고 불리는 JavaScript의 버전,은 많은 중요한 업데이트와 새로운 기능들을 도입했다. 이러한 변경사항은 JavaScript 개발의 편의성을 크게 향상시켰으며, 현대 웹 개발에 광범위하게 적용되고 있다. 주요 특징들을 정리하면 다음과 같다:

[1] let, const 키워드

  • let : 블록 스코프(block scope)를 가진 변수 선언 키워드
    (1) 재선언 불가, 재할당 가능
    (2)  `var`와 달리 블록 내부에서만 유효한 변수를 선언할 수 있다.

  • const : 상수 선언 키워드
    (1) 기존 var 키워드만 있었을 때보다 예측 가능한 코드를 작성할 수 있게 됐다.
    (2) 불변의 상수를 선언하는 키워드로, 한 번 할당된 후에는 그 값을 변경할 수 없다.

 

[2] 템플릿 리터럴

  • 사용법은 ``` (back tick)으로 가능하다.
  • ${...} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
// ES5
var str1 = ', ';
var str2 = 'World';
var str3 = 'Hello' + str1 + str2;

// ES6
let str4 = ', ';
let str5 = 'World';
let str6 = `Hello ${str4} ${str5}`;

 

 

[3] 화살표 함수 

  • function 키워드 대신 =>를 사용하여 더 간결하게 함수를 선언할 수 있다.
  • 화살표 함수는 자신만의 this를 생성하지 않고, 외부의 this를 사용한다.
let name = '유재석';

// ES5 함수
function myName(name){
	return `이름 : ${name}`;
}

// ES6 화살표 함수
const myName1 = (name) => {
	return `이름 : ${name}`;
}

// return 키워드 생략가능
const myName2 = (name) => `이름 : ${name}`;

console.log(myName(name));      // 이름 : 유재석
console.log(myName1(name));     // 이름 : 유재석
console.log(myName2(name));     // 이름 : 유재석

 

[4] 구조 분해 할당

  • '펼치다' 란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정
const student = {
	name : "유재석",
    age : 50
}
// console.log(`name : ${name}, age : ${age});
// 에러발생 : Uncaught ReferenceError: Cannot access 'name' before initialization

const { name, age } = student;
console.log(`name : ${name}, age : ${age});
// 출력결과 : name : 유재석, age : 50

const student1 = {
	name1 : "아이유",
    age1 : 30,
    addr1 : "인천"
}

const { name1, age1, addr1 } = student1;
console.log(`name1 : ${name1}, age1 : ${age1}, addr1 : ${addr1}`);
// 출력결과 : name1 : 아이유, age1 : 30, addr1 : 인천

 

[5] Multi-line String

  • 문자열이 라인을 넘어가게 되면 '\n'과 덧셈연산자를 사용했어야 했다.
  • 백틱(```)을 사용하게 되면서 여러줄의 문자열 관리도 편해졌다.

//ES5
var es5str = '안녕하세요\n' + 
'만나서 반갑습니다.';

//ES6
let es6str = `안녕하세요.
만나서 반갑습니다.`;

+ Recent posts

티스토리툴바