Web/HTML

HTML basic

HAN_PY 2020. 6. 29. 13:22
반응형

HTML5

developer.mozilla.org/ko/

W3C - World Wide Web Consortium의 약자로 웹 표준을 개발하고 논의 하며 제정하는 조직

DOCTYPE - HTML의 문서형식 선언으로 HTML 및 마크업언어의 DTD 또는 버전을 명시한다.
metadata - 문서 또는 파일에 관한 정보를 제공하는 내부 데이터

HTML basic

<p>My cat is very grumpy</p>

Opening tag _ Content _ Closing tag
전체가 Element

<p class="editor-note">My cat is very grumpy</p>

class="editor-note" 이부부분이 Attribute

Attribute

  • 하나 이상의 속성이 올 경우 공백필요
  • 속성 이름 뒤에 등호온다
  • 따옴표 필요
Nesting elements(중첩요소)

요소안에 다른 요소를 넣음

<p>My cat is <strong>very</strong> grumpy.</p>
Empty elements(빈요소)

내용을 포함하지 않는 요소
img 태그는 닫는 태그(</img>)가 없다

<img src="images/firefox-icon.png" alt="My test image">
Anatomy of an HTML document(HTML 문서 분석)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

  • <!DOCTYPE html> -문서가 올바르게 작동하는지 확인하는데 필요

  • <html> - This element wraps all the content on the entire page and is sometimes known as the root element.

  • <head> - 보여지는 내용이 아니고, 검색 결과에 표시 할 키워드 및 페이지 설명, css 등 선언.

    • head에 들어가는건 타이틀(title), 문자인코딩(UTF-8), 메타데이터, 외부파일 연결

  • <meta charset="utf-8"> - 문자를 UTF-8로 설정

  • <title> - 페이지를 책갈피/즐겨찾기 할 때 페이지를 설명. 브라우저 탭에 표시

  • <body> - 표시하려는 모든 내용이 포함

Images(이미지)
<img src="images/firefox-icon.png" alt="My test image">
  • src - which contains the path to our image file
  • alt - 택스트 설명
    • 시각장애인을 위해서.
    • 오류로 인해 이미지가 표시 안될 결우를 위해서
반응형