HTML 배우기

업데이트: 2024년 5월 1일 오후 2시 45분

모든 웹사이트는 HTML을 사용합니다. 심지어 이 웹사이트도 마찬가지입니다. 이는 모든 웹 개발자 툴킷의 기본 부분입니다. HTML은 요소와 태그를 사용하여 웹 페이지 구조를 제공하는 콘텐츠를 제공하며 텍스트, 이미지, 비디오, 양식 등을 추가할 수 있습니다. HTML 기본 사항을 배우는 것은 웹 개발 여정의 중요한 첫 번째 단계이자 프런트엔드 및 백엔드 개발자에게 필수적인 기술입니다.

실시간 검색어 보러가기 »

1.설명 2.특징 3.요소 4.제목 5.문단 6.링크 7.역사

1.설명

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

HTML는 웹에서 가장 기본이며, 웹 분야에서 경력을 쌓고 싶다면 HTML을 배우는 것은 중요합니다.

HTML는 텍스트, 링크, 이미지를 찾을 수 있는 위치 등 내용을 웹 브라우저에 알려주는 역활을 수행합니다.

2.특징

HTML은 Hyper Text Markup Language의 약자이다.
HTML은 웹 페이지를 생성하기 위한 표준 마크업 언어이다.
HTML은 웹 페이지의 구조를 설명한다.
HTML은 일련의 요소(Elements)로 구성된다.
HTML 요소는 브라우저에 내용을 표시하는 방법을 알려준다.
HTML 요소는 "페이지 제목", "이 글은 단락입니다", "하이퍼 링크" 등과 같은 내용에 매듭을 만든다.

3.요소

HTML 요소(element)는 앞 매듭(tag), 내용 및 뒷 매듭(tag)으로 정의한다.

<매듭이름> 콘텐츠는 여기에 작성한다... </매듭이름>

HTML 요소는 앞 매듭부터 뒷 매듭까지 모든 것이다.

HTML 파일의 기본 인코딩은 UTF-8 로 설정하고, 파일 확장자는 .htm 또는 .html로 한다.

모든 HTML 문서는 문서 유형 선언으로 시작해야 한다: <!DOCTYPE html>

<!DOCTYPE html> 선언은 문서 유형이 HTML5로 작성되었음을 브라우저에게 알려준다.

이 선언은 문서 시작전(HTML 매듭 이전)에 한 번만 나타나야 한다.

HTML 문서 자체는 <html> 매듭(tag)으로 시작하고 </html> 매듭(tag)으로 끝난다.

HTML 문서의 내용은 <body>와 </body> 사이에 작성한다.

4.제목

HTML 제목은 <h1> ~ <h6> 매듭(tag)으로 정의한다.

<h1> 매듭은 가장 중요한 제목을 정의하고, <h6> 매듭은 가장 덜 중요한 제목을 정의한다.

5.문단

HTML 문단은 <p> 매듭(tag)으로 정의한다.

<p>이 문단은 예문입니다.</p>

<p>이 문단은 또 다른 예문입니다.</p>

6.링크

HTML 링크는 <a> 매듭(tag)으로 정의한다.

<a href="https://www.naver.com">네이버에 연결됩니다.</a>

링크의 대상은 href 속성에 지정된다.

7.역사

디지털 세계에서 HTML은 오랫동안 중요한 역할을 해왔습니다.

웹 페이지와 앱을 만드는데 사용되며, 오늘날까지도 가장 널리 사용되는 코딩 언어 중 하나로 성장했습니다.

HTML는 프로그래밍 언어는 아니며, 웹페이지가 어떻게 구조화되어 있는지 알 수 있도록 하는 마크업 언어입니다.

HTML 용어

HTML 튜토리얼에 사용된 중요한 용어는 다음과 같습니다:

태그 (Tag): HTML 문서에서 요소를 정의하는데 사용되는 마크업 코드. 예를 들면 <p>는 단락을 정의하는 태그입니다.
요소 (Element): 시작 태그와 종료 태그 사이에 있는 모든 내용을 포함하는 HTML 구조. 예를 들어, <p>내용</p>에서 <p>는 요소의 시작을 나타내고 </p>는 요소의 종료를 나타냅니다.
속성 (Attribute): HTML 요소에 대한 추가 정보를 제공하는 속성. 예를 들어, <a href="https://www.example.com">링크</a>에서 href는 링크의 주소를 지정하는 속성입니다.

HTML 구조

HTML 문서는 다음과 같은 구조로 이루어져 있습니다.

html
<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>제목 1</h1>
    <p>이것은 단락입니다.</p>
    <a href="https://www.example.com">링크 텍스트</a>
    <!-- 주석은 이렇게 작성합니다. -->
</body>
</html>

설명:

<!DOCTYPE html>: HTML5 버전을 사용한다는 것을 정의합니다.
<html>: HTML 문서의 시작과 끝을 나타냅니다.
<head>: 문서에 대한 정보를 포함하는 부분으로, 제목(title), 메타데이터, 스타일 시트 등을 정의합니다.
<title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 실제 내용을 포함하는 부분으로, 텍스트, 이미지, 링크, 테이블 등을 여기에 작성합니다.
<h1>, <p>, <a>: 각각 제목, 단락, 하이퍼링크를 나타내는 태그입니다.
: 주석은 HTML 코드 내에서 설명을 추가할 때 사용하며, 웹 브라우저에는 표시되지 않습니다.

html
<!-- 이것은 HTML 주석입니다. 이 주석은 화면에 표시되지 않습니다. -->

<p>이 텍스트는 주석 밖에 있으며 화면에 표시됩니다.</p>

<!-- HTML 주석을 사용하여 코드에 메모를 추가할 수 있습니다. -->