Knowre Web Development Curriculum에서 영감을 받아 이를 이용하여 프론트엔드에 대해 학습한것들을 제 방식대로 정리한 글입니다. 순번은 webdevcurriculum과 무관합니다.

목적

HTML의 기초적인 사항들에 대해 학습하자.

HTML

HTML이란 Hypertext Markup Langauage의 약어로 웹을 이루는 가장 기초적인 구성요소로 웹 컨텐츠의 의미와 구조를 정의할 때 사용되며 일반적으로 CSS, Javascript와 함께 사용하여 웹 페이지를 표현한다.

Hypertext: 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

Markup: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지 (출처. 위키피디아)

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용한다. HTML 마크업은 다양한 "요소"를 사용하는데 요소에는 head, title, body... 등 많은 종류가 존재하지만 그렇다고해서 모든 요소를 외울필요는 없다.

웹의 표준

웹에도 표준이 있는 이유는 산업표준이 있는 이유와 비슷하다. 업체마다 다른 부품을 생산하게되면 현장에서 매번 확인해야하고 호환이 되지 않는 것처럼 서로 다른 브라우저들이 웹사이트를 똑같이 표현할 수 있도록 웹의 표준또한 존재한다.

웹의 표준에는 표준화 단체인 3WC의 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

HTML의 구조

html의 문서는

<html>, <head>, <body>, <div> ...

와 같은 태그와 요소들로 이루어져있다.

<>: 태그
html, head...: 요소

<!DOCTYPE html>	
<html lang="ko">
<head>
  <title>HTML의 구조</title>
</head>
<body>
    <h1>제목</h1>
    <p>HTML의구조는 이런식으로 이루어져있다.
    </p>
  
</body>
</html>

결과

HTML의 요소들

<html>: HTML 문서의 최상단을 나타내며 루트요소라고도한다. 모든 다른요소는 <html>의 후손이어야한다.
ex) <html lang="ko">
<head>: HTML의 정보(메타데이터)를 담는다.
ex)

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>: HTML 문서의 내용을나타냄, 딱1개만 존재가능.
ex) <body>안녕하세요</body>
<link>: 외부 리소스 연결 요소
ex) <link href="main.css" rel="stylesheet">

핵심 요소들을 정리하려고 했으나... 굳이? 라는 생각이 든다. 이외에 다양한 요소들을 확인하고 싶다면 여기를 참고하자

출처
https://github.com/Knowre-Dev/WebDevCurriculum/tree/master/Quest01
http://www.smartebiz.kr/new/subpage02_02.html
https://namu.wiki/w/%EC%9B%B9%20%ED%91%9C%EC%A4%80

Author And Source

이 문제에 관하여(01. HTML과 웹의 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@joseph_wee/frontendstudy01

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

01. HTML과 웹의 기초

목적

HTML

웹의 표준

HTML의 구조

HTML의 요소들

Author And Source

좋은 웹페이지 즐겨찾기