WEB/HTML

#01 HTML

XZXXZX 2020. 12. 25. 16:45
728x90
반응형
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <h1>Heading</h1>
    <h2>heading2</h2>
    <button>click me</button>
  </body>
</html>

 

<html> 가장 상위 태그
  <head> 사용자에게 보여지는 UI적 요소는 없음 타이틀이나 부가설명 북마크나 아이콘만 나옴 사용자에게 보여지는 정보 없이 meta데이터만 있음
    <meta charset="utf-8">  utf-8은 페이지에서 쓰여지는 format을 나타냄
    <meta name="viewport" content="width=device-width"> 디바이스 스크린의 너비를 나타냄
    <title>JS Bin</title> 브라우저에서 검색할때 나오는 타이틀
  </head> 
  <body> 
    <h1>Heading</h1> Heading을 나타냄
    <h2>heading2</h2> h1보다 작게
    <button>click me</button>  버튼
  </body> 
</html>

 

 

html은 마크업 언어 상위태그에는 head와 body가 있음.

head에는 상세설명이 들어가 있음.

body에는 사용자에게 보여지는 태그들로 이루어져 있음.

 

 

 

지원가능한 정의된 태그들은 MDN에서 확인가능

developer.mozilla.org/ko/developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순

developer.mozilla.org

브라우저 호환가능도 확인할수 있음.

 

정의되지 않은 태그를 사용해도 출력이 가능하다.

validator.w3.org/

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

본인이 직접 확인하고 싶다면 validator에서 작성한 html을 넣어서 유효한 태그들을 사용한 것인지 확인 가능하다.

 

html을 작성할 때 박스모델을 생각하면서 작성해야한다. (header, navigation bar, main content, sidebar, footer)

728x90
반응형