HTML HTML 기본 태그와 요소

    2018-02-11 06:18:44 작성

    html은 웹 페이지를 만들기 위한 표준 마크 업 언어입니다.

    • HTML은 Hyper Text Markup Language
    • HTML은 마크업을 사용하여 웹페이지의 구조를 설명합니다.
    • HTML 요소(element)는 HTML 페이지의 구성요소입니다.
    • HTML 요소는 태그(tag)로 표현됩니다.
    • 브라우저는 HTML 태그를 표시하지는 않지만 이를 사용하여 페이지의 내용을 렌더링합니다.

    HTML 문서작성과 실행

    HTML은 윈도우즈에서 기본적으로 제공하는 메모장 또는 텍스트편집기를 사용하여 HTML문서를 작성할 수 있습니다.
    파일의 확장자는 'htm' 또는 'html'로 지정합니다.
    브라우저에서 작성한 HTML 파일을 엽니다.(작성한 파일을 더블클릭하거나, 마우스 오른쪽버튼을 클릭하고 '연결 프로그램'을 선택하세요)

    텍스트 편집기에는 Visual Studio Code, SublimeText 등이 있으며 자신에게 맞는 편집기를 사용하시면 됩니다.


    무작정 살펴보기

    예제의 Result를 선택하면 HTML 문서가 브라우저에 표시는 내용을 확인할 수 있습니다.

    <!DOCTYPE html> 선언은 문서의 유형이 html5 임을 나타내며 웹페이지가 올바르게 표시할 수 있도록 합니다.
    html 태크보다 먼저 페이지 상단에 한번만 나타나야 합니다.

    <html> 요소는 HTML 페이지의 루트 요소입니다.

    <head> 요소는 문서에 대한 메타 정보를 포함합니다.

    <meta> 요소는 HTML 문서에 대한 메타 데이터를 제공합니다.
    charset="utf-8"은 페이지의 인코딩 방식을 utf-8로 지정합니다.

    <title> 요소는 문서의 제목을 명시합니다.

    <body> 요소는 사용자에게 보여지는 페이지의 내용을 포함합니다.

    <h1> 요소는 큰 제목을 정의합니다.

    <p> 요소는 문단을 정의합니다.


    HTML 태그

    태그는 꺽쇠 괄호로 묶인 요소 이름입니다.

    <tagname> 콘텐츠는 여기에 있습니다... </tagname>
    • HTML 태그는 일반적으로 <p>, </p>와 같이 쌍으로 표시됩니다.
    • 쌍의 첫번째는 시작태그이고, 두번째는 종료태그입니다.
    • 종료태그는 태그이름 앞에 /(슬래시)가 삽입되어 있습니다.

    HTML 요소

    HTML 요소는 일반적으로 시작태그와 종료태그로 구성되며 그 사이에 내용이 삽입됩니다.
    HTML 요소중 내용이 없는 요소를 빈 요소라고 합니다.
    빈 요소에는 <br>요소(줄 바꿈)와 같이 종료태그가 없습니다.

    HTML요소는 중첩 될 수 있습니다.
    위의 예제에서도 html 요소 안에 head 요소와 body 요소가 있고, body 요소 안에는 h1 요소와 p 요소가 있습니다.

    빈 요소가 아닌경우 종료태그를 꼭 작성해야 HTML요소가 올바르게 표시됩니다.

    예제의 결과를 보면 정상적으로 출력되어집니다.
    왜냐하면 종료 태그는 선택 사항으로 간주되기 때문입니다.
    이것은 절대 하지 마십시오!! 종료태그를 잊어버리면 예기치 않은 결과 및 오류가 발생할 수 있습니다.

    태그명은 대소문자를 구분하지 않습니다.
    하지만 W3C는 HTML에서 소문자를 권장하므로 HTML 작성시 소문자로 작성하시기 바랍니다.