초보자를 위한 HTML 기초

### 완전 초보자를 위한 HTML: 기초부터 배우는 웹 개발
* 📹 이 동영상 시리즈는 **HTML부터 시작하여 기본적인 웹 디자인 및 개발**을 배우는 데 관심이 있는 초심자를 위해 제작되었습니다.
* 📚 시리즈의 각 동영상은 서로 다른 주제에 초점을 맞추며, **첫 번째 동영상은 HTML만 다루고 그다음에는 CSS와 자바스크립트를 다룹니다.**
* 🌐 이 시리즈는 **사전 웹 개발 지식이 필요하지 않다**는 점을 강조하면서 인터넷에 웹사이트를 업로드하는 방법을 가르치는 것을 목표로 합니다.
* 🖥 웹사이트 제작을 시작하려면 **HTML을 볼 수 있는 브라우저와 HTML을 작성할 수 있는 텍스트 편집기**만 있으면 되며, 이 두 가지 모두 크로스 플랫폼에서 사용할 수 있습니다.
* HTML은 웹 페이지와 문서를 만드는 데 사용되는 웹의 기본 구성 요소이지만 **프로그래밍 언어는 아닙니다.**
* 🔤 HTML 태그는 웹 페이지의 기본 구성 요소로, 다양한 태그가 **정보와 텍스트가 표시되는 방식**을 형식화합니다.
* 🔗 링크는 앵커(`<a>`) 태그를 사용하여 생성되며, **`href` 속성은 링크 위치를 지정**하고 **`target` 속성은 링크가 열리는 방법**을 결정합니다.
* 📝 테이블, 주석, 속성 역시 HTML의 기본 개념으로, **테이블(`<table>`), 주석(``), 속성**은 요소에 대한 추가 정보를 제공합니다.

### 기본 HTML 태그 마스터하기: 표, 양식, 이미지 및 HTML5 시맨틱 태그
* 🏗 표를 만들려면 `table`, `thead`, `tbody` 태그를 사용합니다. 제목은 **`th` 태그가 있는 `tr` 태그**에 배치하고 데이터는 **`td` 태그가 있는 `tr` 태그**에 배치합니다.
* 📝 "표는 표 형식의 데이터에만 사용해야 하며 레이아웃 용도로는 사용하지 않아야 합니다. **웹사이트 레이아웃에는 CSS를 사용하세요.**"
* 📝 양식을 만들려면 **`action` 및 `method` 속성과 함께 `form` 태그**를 사용합니다. 레이블과 입력은 양식 필드에 사용되며 **`type` 속성은 입력 유형**을 지정합니다.
* 🖼 이미지를 추가하려면 `src` 속성과 함께 `img` 태그를 사용하여 이미지 소스를 지정합니다. **이미지의 대체 텍스트를 제공**하려면 `alt` 속성을 사용하는 것이 좋습니다.
* 🏷 인용 요소에는 블록 따옴표의 경우 **'블록따옴표'**, 약어의 경우 **'abbr'**, 인용의 경우 **'인용'**이 포함됩니다.
* "`header`, `nav`, `section`, `article`, `aside`, `footer`와 같은 HTML5 시맨틱 태그는 **콘텐츠에 구조적 의미**를 부여합니다."
* 📄 설명` 및 `키워드`와 같은 **헤드 섹션의 메타 태그**는 검색 엔진에 웹페이지에 대한 정보를 제공하는 데 사용됩니다.
* 🔗 "링크는 페이지 간 탐색에 사용할 수 있습니다. **링크를 만들려면 `href` 속성과 함께 `a` 태그**를 사용하세요."

이 동영상은 HTML 구문, 요소 및 양식 필드에 중점을 두고 초보자 HTML을 가르칩니다.

HTML Crash Course For Absolute Beginners

Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP

Traversy Media

초보자를 위한 기초 웹 개발: HTML 기초

이 웹 개발 시리즈는 전제 조건이 없는 초보자를 위해 설계되었으며 HTML, CSS, 자바스크립트에 중점을 두고 있습니다.

이 강좌는 학습에 대한 인내심과 웹의 기본 구성 요소인 HTML의 중요성을 강조합니다.

웹 개발을 시작하려면 브라우저(예: Google Chrome)와 텍스트 편집기(예: Sublime Text)만 있으면 되며, 두 가지 모두 완전히 크로스 플랫폼으로 사용할 수 있습니다.

Internet Explorer를 사용하지 말고 줄 번호와 구문 강조 표시 기능이 있는 텍스트 편집기를 사용하는 것이 중요합니다.

HTML 편집용 Sublime Text 설치 및 열기

서브라임 텍스트는 Windows, Mac 또는 Linux에서 쉽게 다운로드하여 설치할 수 있으며, 탐색기 컨텍스트 메뉴에 추가하는 옵션이 있습니다.

특별한 서버 없이도 컴퓨터에서 로컬로 HTML 파일을 생성하고 브라우저에서 열어 테스트할 수 있습니다.

인터넷에 사이트를 배포할 준비가 되면 도메인 이름, 호스팅 패키지 및 파일 업로드가 필요합니다.

HTML의 기본 구조는 일반적으로 시작 태그와 끝 태그 쌍으로 대괄호로 둘러싸인 태그를 사용하여 웹 페이지의 텍스트 및 정보 표시 형식을 지정하는 것입니다.

HTML 자동 닫기 태그 및 문서 구조 이해

<br/>와 같은 자동 닫기 태그는 줄 바꿈과 같이 콘텐츠가 없는 요소에 사용되며 닫는 대괄호 앞에 슬래시를 사용하여 작성합니다.

HTML 문서의 구조는 닥타입 선언, 열기 및 닫기 HTML 태그, 메타데이터를 위한 헤드 섹션, 표시되는 콘텐츠를 위한 본문 섹션으로 구성됩니다.

HTML5에는 표준 닥타입이 있으며, 헤드 섹션에는 페이지 제목이 포함되고 본문 섹션에는 브라우저에 표시되는 콘텐츠가 포함됩니다.

HTML에서 주석을 사용하면 코드에 파싱되지 않은 주석을 추가할 수 있습니다.

HTML 제목의 범위는 H1에서 H6까지이며, H1이 가장 크고 H6이 가장 작습니다.

제목은 콘텐츠를 구성하고 텍스트의 중요성을 나타내는 데 유용합니다.

HTML의 단락은 블록 수준 요소로, 각 개별 단락에 대해 간격과 새 줄을 제공합니다.

강조, 링크 및 목록에 HTML 태그 사용하기

e/m 태그는 강조를 위해 사용되며 HTML에서 텍스트를 이탤릭체로 표시하는 의미적 방법을 제공합니다.

a 태그는 링크를 만드는 데 사용되며, href 속성은 링크의 대상을 결정하고 target 속성은 링크가 새 탭에서 열릴지 여부를 지정합니다.

HTML의 목록은 정렬되지 않은(UL) 목록과 정렬된(OL) 목록으로 구성되며, li 태그는 목록 항목을 정의하는 데 사용됩니다.

정렬되지 않은 목록은 기본적으로 글머리 기호를 표시하고 정렬된 목록은 숫자를 표시하며 일반적으로 웹사이트 탐색에 사용됩니다.

HTML의 표는 제목과 본문 섹션이 있는 표 태그로 구성되며, 제목에는 th를, 데이터에는 td를 사용합니다.

표는 표 형식의 데이터에만 사용하는 것이 좋으며 CSS를 사용하여 만들어야 하는 웹사이트 레이아웃에는 사용하지 않는 것이 좋습니다.

HTML 양식은 양식의 모양을 만드는 데 사용되며, 양식 태그에는 action 및 method와 같은 속성이 포함되어 있습니다.

action 속성은 양식이 제출될 페이지를 지정하고, method 속성은 요청 유형(게시 또는 가져오기)을 결정합니다.

양식은 레이블과 입력 태그로 구성되며, 유형 속성은 입력 유형을 정의하고 이름 속성은 제출된 양식 값을 캡처하기 위해 서버 측 프로그래밍에 사용됩니다.

HTML에서 다양한 입력 유형으로 양식 만들기

이메일, 텍스트 영역, 선택 목록 등 다양한 HTML 입력 유형을 사용하면 내장된 유효성 검사를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

HTML5는 숫자 및 날짜와 같은 새로운 입력 유형을 도입하여 보다 구체적인 데이터 입력을 허용하고 더 나은 사용성을 위해 값 및 플레이스홀더 속성을 제공합니다.

제출 유형의 입력 버튼으로 양식 제출을 완료하면 양식이 완성됩니다.

기본 기능 및 디스플레이에 HTML 사용

HTML은 프로그래밍 언어가 아니라 웹에서 콘텐츠를 표시하는 데 사용되는 마크업 언어이므로 기능을 사용하려면 JavaScript와 같은 다른 언어가 필요합니다.

HTML의 IMG 태그는 이미지를 표시하는 데 사용되며, 소스 속성은 이미지 파일을 지정하고 alt 속성은 이미지를 표시할 수 없는 경우 대체 텍스트를 제공합니다.

또한 HTML에서는 이미지에 너비, 높이, 링크 속성을 사용할 수 있을 뿐만 아니라 특정 서식을 지정하기 위해 따옴표, 약어와 같은 인용 요소도 사용할 수 있습니다.

웹사이트 구조에 HTML5 시맨틱 태그 사용

월드와이드웹은 <광고> BR 태그로 표시되며 약어에 사용됩니다.

<cite> 태그는 HTML에서 인용된 콘텐츠를 표시하는 데 사용됩니다.

헤더, 탐색, 섹션, 기사, 사이드, 바닥글과 같은 HTML5 시맨틱 태그는 웹 문서를 더욱 체계적으로 구성하는 데 사용됩니다.

이러한 태그는 웹 페이지를 레이아웃하는 데 도움이 되며 특히 주요 콘텐츠 섹션, 블로그 글, 글 날짜, 카테고리 사이드바가 있는 블로그 페이지를 만드는 데 유용합니다.

HTML로 기본 웹사이트 구조화하기

탐색, 바닥글, 메타 등의 HTML 태그를 사용하여 웹페이지의 여러 섹션을 구성합니다.

이 튜토리얼에서는 머리글과 바닥글에 간단한 CSS 스타일을 추가하는 방법과 페이지 간 탐색 링크를 만드는 방법도 다룹니다.

페이지 설명 및 키워드에 메타 태그를 사용하는 방법도 설명합니다.