티스토리 뷰

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 - 택스트 설명
    • 시각장애인을 위해서.
    • 오류로 인해 이미지가 표시 안될 결우를 위해서
반응형

'Web > HTML' 카테고리의 다른 글

[html] 비디오(mp4) 영상 태크  (0) 2021.12.19
[html] 이미지 태그 기초  (0) 2021.12.16
HTML 기초 알아보기  (0) 2021.12.07
HTML5 섹션 요소+ text 요소  (0) 2020.06.29
Marking up text(텍스트 마크업)  (0) 2020.06.29
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함