우당탕 개발 블로그

[Front-End] HTML & CSS 3. 본문

FrontEnd

[Front-End] HTML & CSS 3.

예린_dev 2022. 3. 20. 10:36

2. HTML5 기본

2-1. HTML 개요

  • HTML5 웹 문서를 구성하는 3가지 요소(HTML, CSS, JS)
    • HTML: 웹 페이지 문서 담당(구조)
    • CSS: 웹 페이지 디자인 담당(표현)
    • JS: 웹 페이지 이벤트 담당(동작)
  • HTML은 마크업 언어로 웹 문서를 작성하며, tag를 사용하여 문서의 구조 등을 기술하는 언어

2-2. tag와 속성

  • HTML 문서는 'tag'로 만들어진다.
  • HTML문서의 전체 구성은 html, head, body tag로 구성
  • tag는 시작 tag와 종료 tag로 쌍을 이루거나 시작 tag만 존재하는 tag도 있다.
  • 시작 tag(<tagname>)와 종료 tag(</tagname>)는 '/'로 구분하며 중첩되지 않도록 한다.
  • 각각의 tag는 속성과 속성의 값이 존재한다.
  • HTML tag에는 어느 tag에나 넣어서 사용할 수 있는 글로벌속성(global attribute)이 있다. (class, id, dir etc...)

2-3. 주석

  • 주석의 내용은 브라우저에 출력이 되지 않는다.
  • HTML tag의 내용을 설명하기 위한 용도로 사용
  • <!-- 주석 -->

2-4. Root 요소

  • <html>tag는 HTML 문서 전체를 정의
  • Head(<head>...</head>)와 Body(<body>...</body>)로 구성

2-5. Head 요소(1/2) - 문서 머리글(head), 제목(title)

  • <head> tag는 브라우저에게 HTML문서의 머리 부분임을 인식
  • <title>, <meta>, <style>, <script>, <link> tag를 포함 가능
  • <title> tag는 문서의 제목을 의미, 브라우저의 제목 표시줄에 tag 내용이 나타남
  • <title> tag 이외의 다른 tag로 표현한 정보는 화면에 출력 x.

2-5. Head 요소(2/2) - 메타 데이터(meta)

  • 문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 일반 정보를 나타냄.
  • name과 content 속성을 이용하여 다양한 정보를 나타냄
  • http-equiv 속성을 이용하여 인코딩 설정 및 문서 이동, 새로 고침이 가능
  • charset 속성을 이용하여 문서의 인코딩 정보를 설정

2-6. Body 요소(1/2) - body

  • Web Browser에 보여질 문서의 내용을 작성
  • <head>tag 다음에 위치하고 <head> 내부에 위치하는 tag와 <html>을 제외한 모든 tag
  • id 속성을 이용하여 문서 내에서 tag를 유일하게 식별 가능 (id 속성은 중복 x)
  • class 속성을 이용하여 여러 tag에 공통적인 특성(css)을 부여 (class 속성은 중복 o)

2-6. Body 요소(2/2) - heading

  • 문단의 제목을 지정할 때 사용. <h1>부터 <h6>까지 구분. 숫자가 커질수록 글자는 작아 짐.
  • <section> tag를 이용하면 같은 tag를 서로 다르게 표현
  • 문서 구조를 <section> tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성 가능

2-7. 특수문자

  • &nbsp; (공백)
  • &amp; (&)
반응형

'FrontEnd' 카테고리의 다른 글

[Front-End] HTML & CSS 4.  (0) 2022.03.20
[Front-End] HTML & CSS 2.  (0) 2022.03.20
[Front-End] HTML & CSS 1.  (0) 2022.03.20
'FrontEnd' Related Articles more