HTML & CSS & JS 의 차이

HTML(Hyper Text Markup Language)

  • 웹의 구조를 담당하는 언어입니다.
  • 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류입니다.
  • 웹의 틀과 구조의 골격을 만들어 주는 역활입니다.

CSS(Cascading Style Sheets)

  • 웹의 시각적인 표현을 담당하는 언어입니다.
  • 마크업 언어(HTML, XML, XHML 등)가 실제 표시되는 방법(색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어 입니다.

JS(JavaScript)

  • 동적 처리를 담당합니다.
  • 브라우저 자체에서 내장된 해석기능을 이용한 클라이언트 기반의 일종의 스크립트 언어입니다.

1줄 요약

  • HTML로 구조의 골격을 만들고 CSS로 웹 페이지의 옷을 입히고, JS로 기능을 추가합니다.HTML(Hyper Text Markup Language)

HTML 요소는 아래의 그림과 같이 시작태그로 시작해서 종료 태그로 구성되어 있습니다.

사진 출처 : http://tcpschool.com/html/html_intro_elementStructure

  • 요소 : 시작 태그부터 종료 태그까지 모두 포함한 구성입니다.
  • 태그 : 해당 부분이 어떤 요소인지를 '태그'라는 표시를 붙여 나타냅니다.
    • 태그 이름 : 태그의 이름입니다. ex) "p" , "span" , "div"
    • 속성명 : 요소의 속성을 정의합니다. ex) "class" , "href"
    • 속성값 : 속성명의 속성값을 정의합니다.

자주사용하는 HTML 요소

W3C 혹은 MDN 을 참조 하시거나 한눈에 보는 HTML요소(Elements & Attribues) 총정리 사이트를 참조 해주세요.

DOM(Document Object Model)이란 ?

DOM은 W3C의 표준 객체 모델이며, MDN에서는 다음과 같이 정의 합니다.

문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다. 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM 트리 구조 (Tree)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>hello title</title>
    </head>
    <body>
        <h1 name="title">hello world-h1</h1>
        <a href="www.google.com">Google</a>
        <div>
            <span>hello world-span</span>   
        </div>
    **</body>
</html>

위의 그림의 구조를 코드로 나타냈을때는 그림 밑에 있는 코드와 같이 작성이 됩니다.

DOM과 Javascript의 연관성

초창기에는 Javascript와 DOM이 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔습니다. DOM 은 프로그래밍 언어와 독립적으로 디자인이 되어있습니다. 문서의 구조적인 표현은 단일 API를 통해 이용가능합니다.

문서(document)와 문서의 요소(element)에 접근하기 위해 DOM이 사용 되었습니다. DOM은 Javascript 이외 어떠한 언어로도 사용이 가능합니다. 아래의 예시는 Javascript로 작성을 했습니다.

var paragraphs = document.getElementsByTagName("title");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName); // return H1

페이지 콘텐츠는 DOM에 저장되고 스크립트 언어를 통해 접근하거나 조작할 수 있습니다.
방정식으로 표현하면 다음과 같습니다.

API (web or XML page) = DOM + JS (scripting language)

Sematic Elements

<body>
  <div class="header"></div>
  <div class="nav"></div>
  <div class="section">
      <div class="article"></div>
      <div class="article"></div>
  </div>
  <div class="aside"></div>
  <div class="footer"></div>
</body>
<body>
    <header></header>
    <nav></nav>
    <section>
            <article></article>
            <article></article>
        </section>
    <aside></aside>
    <footer></footer>
</body>

위의 사진을 HTML 코드만 작성하면 다음과 같이 작성 할 수 있습니다.

HTML4 시절에는 웹의 구조를 div 태그와 span에 id 와 class 붙여 구역을 나누었습니다. ex)ex)<div class = "header">

HTML5로 넘어 오면서 구조를 기술할 수 있는 Sematic Tag 들이 추가가 되며 가독성을 높이고 명확하게 사용하기 시작했습니다. 형식이 아닌 <header>와 같이 뜻이 명확한 태그가 Sematic 태그들이 제공 되었습니다.

'SEB' 카테고리의 다른 글

Chater_01_JS  (0) 2021.08.27

+ Recent posts

티스토리툴바