HTML 기본

hj·2021년 8월 1일
0

목록 보기
2/6
post-thumbnail

01. DOCTYPE

DOCTYPE 또는 문서 형식 선언(Document Type Declaration)은 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 문서의 첫번째 줄에 위치해야 한다.

DTD(Documnet Type Definition) - SGML 계열의 마크업 언어에서 문서가 어떻게 구성되어야 하는지 정의하는 것이다. SGML을 비롯해 HTML, XHTML, XML 등에서 쓰인다.

HTML 문서에 문서 형식 선언이 없는 경우에는 비표준 모드(Quirks mode)로 렌더링되고, 문서 형식 선언이 있는 경우에는 표준 모드로 렌더링된다. 표준 모드로 렌더링되는 경우 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다.

  • HTML5로 구성된 문서에서 문서 형식 선언은 불필요하지만(HTML5는 SGML 기반의 언어가 아님), 웹 브라우저들의 표준 모드를 활성화하기 위해 최소한의 형태로 유지된다.
<!DOCTYPE html>
  • HTML5 이전의 버전은 SGML 기반이라서 'DTD 참고 URL'이 들어간다. URL이 없는 경우 비표준 모드로 렌더링된다.
 <!DOCTYPE HTML PUBLIC
     "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

02. HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>문서의 정보</head>
  <body>문서의 내용</body>
</html>

02-1.html 태그

html 파일의 범위를 지정, headbody를 포함한다.

02-2.head 태그

  • meta
    title, link, style, script 태그에서 나타낼 수 없는 정보들을 표시하기 위한 태그

    속성의미
    charset문자 인코딩 방식UTF-8 등
    name검색 엔진에 제공하기 위한 정보의 종류author, description, viewports 등
    contentname이나 http-equiv 속성의 값을 제공

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

  • title
    웹 페이지의 제목을 나타내기 위한 태그

  • link
    외부 문서(HTML, CSS, icon)를 연결할 때 사용하는 태그

    <link href="main.css" rel="stylesheet">
    <link rel="icon" href="favicon.ico">

    속성의미
    rel현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명(필수)stylesheet, icon 등
    href외부 문서의 위치를 지정경로
  • style
    HTML 문서 내부에 CSS 코드를 작성할 경우 사용하는 태그

  • script
    JavaScript 파일을 불러오거나 코드를 작성할 경우 사용하는 태그

02-3.body 태그

  • div
    아무런 의미가 없는 태그

  • image
    이미지를 넣을 때 사용하는 태그
    <img src="/img/pic.png" alt="그림">

    속성의미
    src이미지의 URL(필수)URL
    alt이미지의 대체 텍스트(alternate)를 지정(필수)

빈 태그(empty tag)

/* / 없음 */
<img>

/* / 있음 */
<img/>

HTML5에서는 두가지 모두 허용되지만 XHTML에서는 /를 붙여줘야 한다.

0개의 댓글