잠못드는 개발자의밤 디스코드

HTML

html 단기속성과정 - html에서 사용하는 태그들의 사용법에 대한 내용을 다룹니다. html의 제목, 단락, 목록 등과 같은 구조적 의미와 링크, 인용과 같은 항목 등으로 구조적 문서를 위한 마크업 언어를 살펴봅니다.

PROGRAMMING
Flutter
HTML Crash Course
css
Dart 단기속성
JavaScript Crash Course
html canvas

HTML 단기속성과정 Crash Course

html은 영어로 Hypertext Markup Language의 약자이다.

하이퍼텍스트 마크업 언어로써 브라우저가 해석할 수 있도록 한 구조화된 언어이다.

html은 태그 요소로 구성되어 있으며, 이것을 마크업이라 한다.

태그요소는 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 HTML 요소 형태이다.

html의 구조화는 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미부터 링크, 인용 그 밖의 항목으로 html 문서를 만들 수 있다.

문서의 확장자는 tm이나 html 확장자가 바로 이 언어로 작성된 문서로써 웹사이트에서 흔히 볼 수 있다.

HTML 공부를 위해 필요한 것

html를 공부하기 위해 필요한 것은 2가지가 있습니다.

첫번째는 웹브라우저미며, 두번째는 html 작성할 수 있는 텍스트 에디터 입니다.

  • 웹브라우저

    • 구글 크롬 브라우저

    • 마이크로소프트 엣지 브라우저

    • 모질라 파이어폭스 브라우저

    • 사파리 브라우저

    • etc

  • 텍스트 에디터

    • Visual Studio Code

    • Notepad++

    • etc

HTML 파일 만들기

html을 학습하기 전에 필요한 것은 html 파일이다.

html 파일은 확장자가 html 또는 htm 으로 끝나는 파일이며, 바탕화면 특정폴더 또는 텍스트 에디터를 통해 만들 수 있다.

  • 바탕화면 또는 특정폴더에서 html 만들기

    1. 마우스 오른쪽 버튼 클릭

    2. 새로 만들기 선택

    3. 텍스트 문서 클릭

    4. index.html 파일로 저장

  • 텍스트 에디터에서 html 만들기

    1. 상단메뉴 선택

    2. File 선택

    3. New 또는 새 파일 선택

    4. index.html 파일로 저장

HTML 파일 열기

위의 항목에서 html 파일을 만들었다면 html 파일을 더블클릭하거나 마우스 오른쪽 버튼을 이용해 웹브라우저에서 열 수 있다. 또는 텍스트 에디터의 File > Open ( 또는 열기 ) 메뉴를 통해 html 파일을 열고 내용을 편집할 수 있다.

  • html 파일 열기

    • 파일 선택 후 더블클릭하여 웹브라우저에서 열기

    • 파일 선택 후 마우스 오른쪽 버튼 > 열기 하여 웹브라우저에서 열기

    • 텍스트 에디터의 File > Open ( 열기 ) 메뉴를 통해 html 파일 열기

문법 구조

html 의 문법 구조는 꺽쇠를 이용한다.

이것을 시작 태그와 종료 태그라고 하며, 시작태그와 종료태그는 하나의 쌍으로 이루어진다.

일부 태그는 닫힘태그가 없이 단독으로 사용된다.

<태그명>내용</태그명>
또는
<태그명/>

예시)
<h1>제목입니다.</h1>
<p>문단 컨텐츠 내용입니다.</p>
<br/> 또는 <br>

html 문서 구조

html 의 문서 구조는 태그들의 집합으로 이루어져 있으며 트리구조를 이룬다.

시작태그와 종류태그에 자식들이 존재할 수 있다.

html 은 기본적으로 head 태그와 body 태그 를 중심으로 이루어져 있다.

  • html

    • head

      • 문서의 기본적인 정보를 표시한다.

    • body

      • 문서의 컨텐츠를 표시한다.

아래는 html의 기본적인 문서 구조를 나타내는 코드이다.

<html>
    <head>
        <title>웹페이지의 제목입니다.</title>
    </head>
    <body>
        <h1>컨텐츠의 제목입니다.</h1>
        <p>컨텐츠의 첫번째 내용입니다.</p>
        <p>컨텐츠의 두번째 내용입니다.</p>
    </body>
</html>

HTML5의 문서구조

html5의 문서 구조는 위의 내용과 크게 차이가 없다.

다만 <!DOCTYPE html> 구문을 추가하여 웹브라우저가 현재 보여지는 웹 페이지가 html5로 된 것임을 알려주어야 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>웹 페이지의 제목입니다.</title>
    </head>
    <body>        
    </body>
</html>

주석처리

html에서 주석처리는 <!-- 내용 --> 을 사용한다.

이 주석처리를 사용하여 설명문을 넣을 수 있으며, 웹브라우저에서는 보여지지 않는다.

아래는 html에서 주석을 사용하는 방법이다.

<!-- 주석 설명문입니다 -->
또는
<!--
    주석 설명문입니다
-->

.

전체 코드

아래는 위의 내용을 모두 포함한 코드이다.

위의 내용에서 다룬 내용들을 모두 포함하고 있기 떄문에 태그들을 참고하여 확인하면 된다.

<!DOCTYPE html>
<html>
    <!-- 문서의 의미 -->
    <head>
        <title>웹 페이지의 제목입니다.</title>
    </head>
    <!-- 문서의 구조 -->
    <body></body>
</html>

참고

https://youtu.be/UB1O30fR-EE?t=1066