HTML 기초: 태그, 속성 및 연결

### HTML 기초: 첫 번째 웹 페이지 만들기
* 📝 이 동영상 튜토리얼은 **기초부터 고급 수준까지 HTML**을 다루며 초보자가 웹사이트를 만드는 과정을 안내합니다.
* 💻 튜토리얼에는 **두 가지 주요 프로젝트**가 포함되어 있어 실무 경험과 이력서 작성 기회를 제공합니다.
* 🔧 웹 개발에 유용한 확장 기능과 기능을 제공하는 코딩용 텍스트 편집기로는 **Visual Studio Code**를 권장합니다.
* 🏠 HTML은 웹페이지의 구조로 설명되며, **요소를 배치할 위치와 콘텐츠를 표시하는 방법**을 정의합니다.
* 🎨 웹페이지의 스타일을 지정하고 모양과 디자인을 제어하기 위한 도구로 **CSS(Cascading Style Sheets)**가 도입되었습니다.
* 자바스크립트는 웹페이지에 기능을 추가하는 언어로, **버튼 클릭이나 양식 제출과 같은 대화형 기능**을 가능하게 합니다.
* 📱 반응형 디자인의 중요성이 강조되면서 **웹사이트가 다양한 기기와 화면 크기에서 보기 좋게 표시**되도록 하는 것이 중요해졌습니다.
* 💬 주석은 웹페이지의 모양에 영향을 주지 않고 **코드 내에 메모와 설명**을 추가할 수 있는 방법으로 강조 표시되어 있습니다.

### HTML 마스터하기: 고급 태그 및 기법
* 🏗 콘텐츠를 구성하는 데 적절한 HTML 태그를 사용하는 것은 **웹사이트 디자인 및 SEO에 매우 중요**합니다.
* 🔖 **'<섹션>', '<기사>', '<사이드>'와 같은 태그**를 사용하면 콘텐츠를 의미 있는 섹션으로 구성하는 데 도움이 됩니다.
* 📊 콘텐츠를 그룹화하고 스타일을 지정할 때 `<div>` 및 `<span>` 요소를 올바르게 사용하는 것은 **코드 가독성과 유지 관리에 필수적**입니다.
* 🔗 '[a]' 태그는 **텍스트 링크뿐만 아니라 이미지 링크 및 인터랙티브 요소 생성**에도 사용할 수 있습니다.
* 🎨 레이아웃과 디자인을 제어하려면 **블록 요소와 인라인 요소**를 이해하는 것이 중요합니다.
* 🔗 `target="_blank"` 속성을 사용하면 **링크를 새 탭에서 열 수** 있으므로 사용자 환경이 개선됩니다.
* 🖼 '[img]' 태그는 **이미지뿐만 아니라 다른 페이지나 리소스에 대한 링크**로도 사용할 수 있습니다.
* 🎨 `<div>` 태그는 요소를 그룹화하고 스타일을 적용하는 다용도 컨테이너이며, **`<span>` 태그는 인라인 스타일링에 유용**합니다.

### HTML 양식 디자인: 목록에서 표와 양식으로
* 📋 HTML에서 정렬된 목록과 정렬되지 않은 목록을 만들고, **중첩된 목록의 예**와 CSS를 통해 **글머리 기호 스타일을 변경하는 방법**을 다룹니다.
* 🏷 테이블 행(`<tr>`), 테이블 데이터 셀(`<td>`), 테이블 헤더(`<th>`) 등 HTML의 테이블 구조를 **기본 테이블 생성 예제**와 함께 설명합니다.
* 📝 그런 다음 튜토리얼은 **텍스트 입력(`<입력 유형="text">`)과 비밀번호 입력(`<입력 유형="password">`)**으로 시작하여 HTML 양식 디자인으로 넘어갑니다.
* 🔤 양식 입력에 대한 '<라벨>' 요소를 소개하며 특히 **라디오 버튼과 확인란의 접근성 및 사용성**에 대한 중요성을 설명합니다.
* 🏘 이 텍스트는 드롭다운 메뉴에 `<선택>` 요소를 사용하여 **이 예제에서 도시와 같은 옵션**을 제공하는 방법을 보여줍니다.
* 📝 또한 피드백 양식과 긴 사용자 입력에 유용한 여러 줄 텍스트 입력을 위한 **`<텍스트 영역>` 요소**도 다룹니다.
* 🎨 이 튜토리얼에는 **양식 요소 사이의 간격 조정 및 양식 섹션에 제목 추가**와 같은 CSS 스타일 제안이 포함되어 있습니다.
* 🎥 마지막으로 `<iframe>`을 사용하여 외부 콘텐츠를 삽입하고 **`<비디오>` 요소로 재생, 일시 중지, 반복과 같은 컨트롤**을 사용하여 비디오를 추가하는 방법에 대해 설명합니다.

이 동영상에서는 Shraddha가 HTML을 소개하고 그 수준을 설명하며 실제 예제를 통해 기본적인 코딩 개념을 보여줍니다.

HTML Tutorial for Beginners | Complete HTML with Notes & Code

Apna College

Shraddha는 프로젝트 아이디어와 이력서 팁과 함께 4단계로 나누어 종합적인 HTML 학습 경험을 제공합니다.

그녀는 전문 개발자를 위한 두 가지 텍스트 편집기인 Global Online Text Editor와 UltraEdit를 소개하지만 HTML 코드 작성에는 Visual Studio Code를 추천합니다.

또한 Windows용 Visual Studio Code 다운로드 및 설치 방법을 안내하고 웹사이트의 레이아웃과 요소를 구성하는 데 있어 HTML의 역할에 대해 설명합니다.

CSS(Cascading Style Sheet)는 배경색, 버튼 크기, 글꼴 등 웹페이지의 스타일을 정의합니다.

반면 HTML은 다양한 요소와 디자인 구성 요소 생성을 포함하여 웹페이지의 구조와 레이아웃을 담당합니다.

웹 개발자는 HTML 태그를 사용하여 웹사이트의 레이아웃을 디자인하며, Visual Studio Code는 웹 개발에 일반적으로 사용되는 도구로 HTML 파일을 생성하고 확장 프로그램을 설치할 수 있습니다.

spm과 같은 특정 확장자를 가진 HTML 파일을 만드는 것이 필수적입니다.

"색인" 파일로 알려진 웹사이트 홈페이지는 매우 중요하며 기본 페이지 역할을 합니다.

HTML 코드는 단락 및 제목과 같은 콘텐츠를 구성하기 위해 서로 중첩할 수 있는 컨테이너(HTML 태그)를 사용하여 구조화됩니다.

doctype 선언은 HTML 문서의 유형과 사용 중인 HTML 버전(예: HTML5)을 지정합니다.

<html> 요소는 HTML 문서의 루트 요소로, <head> 및 <body> 요소를 포함합니다.

<head> 요소는 웹페이지의 메타데이터와 <title>을 제공하고, <body> 요소는 페이지에 표시되는 콘텐츠를 포함합니다.

문서 메타데이터 및 HTML 편집 가이드

문서 메타데이터 헤더 요소를 클릭하면 다양한 브라우저에서 헤더 작성에 대한 세부 정보 및 브라우저 호환성 등 추가 정보를 제공합니다.

HTML 코드를 편집하여 단락을 추가하거나 검색 엔진 이름을 변경하는 등 웹 페이지의 모양을 변경할 수 있습니다.

코드의 주석은 프로젝트의 여러 부분을 명확히 하고 설명하는 데 필수적이며, 코드를 읽는 개발자를 위한 가이드 역할을 합니다.

이 HTML 편집 방법을 사용하면 원본 소스 코드를 수정하지 않고도 웹 페이지의 시각적 변경이 가능하므로 다양한 요소와 콘텐츠를 실험할 수 있습니다.

HTML 배우기: 기본 태그 및 프로젝트 설정

HTML은 대소문자를 구분하므로 태그에 올바른 대소문자를 사용하는 것이 오류를 방지하는 데 중요합니다.

이 튜토리얼에서는 속성 사용과 텍스트 중요도에 따라 올바른 제목 태그를 사용하는 것의 중요성 등 HTML 태그의 기본 사항을 다룹니다.

이 프로젝트에는 폴더를 만들고, index.

html 파일을 설정하고, 간단한 "Hello, World" 메시지를 인쇄하는 것이 포함됩니다.

HTML에서 세금 크기 및 웹 페이지 요소 조정하기

이제 속성 크기가 세금을 결정하는 데 사용되며 단락 서식 및 확대/축소에 대해서도 설명합니다.

웹사이트 내 및 외부 사이트에 대한 링크를 생성하기 위한 앵커 태그의 사용에 대해 설명합니다.

웹 페이지의 이미지 표시와 함께 HTML의 상대 링크와 절대 링크의 개념도 다룹니다.

비주얼 스튜디오 코드로 웹 개발에서 이미지 사용

비주얼 스튜디오 코드는 <img> 태그와 상대 URL을 사용하여 웹 페이지에 이미지를 표시하고 조작하는 방법을 제공합니다.

또한 높이 및 너비 속성을 사용하여 이미지 크기를 조정할 수 있으며 최상의 결과를 위해 하나만 설정할 것을 권장합니다.

또한 가로 세로 비율을 유지하고 왜곡을 방지하기 위해 이미지 크기를 변경할 때는 CSS를 사용하는 것이 좋습니다.

텍스트 서식을 위한 HTML 태그 사용

<i>와 같은 HTML 태그는 텍스트를 이탤릭체로, <u>는 밑줄을, <br>는 줄 바꿈을 만드는 데 사용됩니다.

<hr> 태그는 웹페이지에서 콘텐츠를 가로로 구분하는 데 사용됩니다.

아래 첨자 및 위 첨자 텍스트는 <sub> 및 <sup> 태그를 사용하여 만들 수 있으며, <pre> 태그는 공백과 줄 바꿈을 무시하고 텍스트를 표시하는 데 사용됩니다.

포트폴리오 홈페이지에 기능 추가하기

Janeshwar는 포트폴리오 홈 페이지에 교육, 프로젝트 경험, 업적 및 취미와 같은 추가 세부 정보를 위한 별도의 페이지를 만들 것을 제안합니다.

또한 더 나은 사용자 경험을 위해 적절한 제목, 단락, 서식을 사용할 것을 권장합니다.

Janeshwar는 코드 가독성, SEO 및 사용자 경험을 개선하기 위해 HTML에서 "시멘트" 태그의 사용을 강조하고 HTML을 사용하여 웹사이트 헤더를 만드는 프로세스에 대해 설명합니다.

잘 구성된 포트폴리오 페이지 만들기

횡단면을 사용하여 페이지를 나누면 '경험', '교육', '프로젝트' 섹션으로 콘텐츠를 구성할 수 있습니다.

'기사 작업' 섹션은 개인적인 경험과 관심사에 대해 작성하는 데 활용할 수 있으며, '부작용' 섹션은 주요 콘텐츠와 추가 정보를 구분하는 데 도움이 됩니다.

앵커 태그와 이미지 태그를 활용하면 링크로 리디렉션하고 이미지를 클릭 가능한 요소로 통합하여 페이지를 향상시킬 수 있습니다.

HTML 요소 이해하기: 블록과 인라인

블록 요소는 문단 및 div와 같이 사용 가능한 전체 너비를 차지하는 반면 인라인 요소는 스팬 및 앵커와 같이 필요한 만큼의 공간만 차지합니다.

블록 및 인라인 요소의 사용은 레이아웃과 간격을 제어할 수 있으므로 웹사이트를 디자인하고 구조화하는 데 중요합니다.

HTML은 목록과 같은 다양한 유형의 콘텐츠를 웹 페이지에 체계적으로 표시할 수 있는 유연성을 제공합니다.

HTML에서 정렬된 목록과 정렬되지 않은 목록 만들기

'ol' 태그로 표시되는 정렬된 목록은 데이터를 번호 순서대로 표시하며 로마 숫자나 문자를 포함할 수 있습니다.

'ul' 태그로 생성된 정렬되지 않은 목록은 글머리 기호를 사용하며 다양한 글머리 기호 스타일에 맞게 CSS로 사용자 정의할 수 있습니다.

정렬된 목록과 정렬되지 않은 목록 모두에 하위 목록을 추가하여 정보를 더욱 체계적으로 정리하고 표시할 수도 있습니다.

It seems that there is no text provided for me to work on.

Please provide a sentence or text that you would like me to highlight the key phrase in.

HTML의 표는 'tr'(표 행), 'td'(표 데이터), 'th'(표 헤더) 태그를 사용하여 데이터를 행과 열로 구성하고 표시합니다.

이러한 태그를 사용하여 헤더와 데이터를 포함한 표의 구조를 효과적으로 정의할 수 있습니다.

표 캡션은 표 콘텐츠에 대한 간략한 설명을 제공하여 접근성을 향상시킵니다.

표 머리글(<thead>)은 HTML 표의 헤더 콘텐츠를 그룹화하는 데 사용되며, 표 본문(<tbody>)은 본문 콘텐츠를 그룹화하는 데 사용됩니다.

HTML의 양식 요소는 가입, 로그인 또는 문의 양식과 같은 다양한 양식을 만드는 데 사용되며, 액션 속성은 양식 데이터가 처리될 위치를 정의합니다.

간단한 양식 만들기: 입력 유형 및 레이블

양식에는 입력할 텍스트 및 비밀번호와 같은 다양한 요소가 포함되어 있으며, 레이블은 각 입력 요소에 특별한 이름을 부여하여 시각 장애가 있는 사용자를 도와줍니다.

또한 레이블은 관련 버튼에 동일한 이름을 사용하여 단일 선택을 위한 라디오 버튼을 만드는 데 도움이 됩니다.

라디오 버튼은 한 번에 하나의 옵션만 선택할 수 있으며 선택한 값은 추가 처리를 위해 전송됩니다.

웹 디자인에서 레벨 및 클래스 사용의 이점

레벨을 사용하면 유연하고 기능적인 버튼 기능을 사용할 수 있어 특히 시각이나 운동 능력이 부족한 사람들에게 더 나은 사용자 경험을 제공할 수 있습니다.

웹 디자인의 요소에 클래스를 지정하면 여러 관련 요소의 스타일과 서식을 쉽게 지정할 수 있어 웹페이지의 전체적인 모양과 느낌을 개선할 수 있습니다.

웹 양식에 텍스트 영역을 통합하면 사용자가 소중한 피드백을 제공할 수 있는 공간을 제공하여 웹사이트의 상호 작용과 사용자 참여를 향상시킬 수 있습니다.

피드백 양식 디자인 및 동영상 삽입을 위한 팁

- 피드백 양식을 디자인할 때 선택 요소를 사용하여 사용자가 도시 등의 옵션을 선택할 수 있는 드롭다운을 만들고, 간격을 조정하고 제출 버튼을 추가하여 양식의 전체 레이아웃을 개선할 수 있습니다.

- YouTube와 같은 플랫폼의 동영상을 웹사이트에 삽입하려면 플랫폼에서 제공하는 삽입 옵션을 사용하여 HTML 코드를 생성한 후 웹사이트의 코드에 복사하여 붙여넣을 수 있습니다.

- iframe 태그를 사용하여 내 웹사이트 내에 외부 웹사이트를 표시할 수 있으므로 다른 사이트의 콘텐츠와 기능을 보여주면서 높이와 너비를 조정하여 최적의 상태로 표시할 수 있습니다.

동영상 태그를 사용하여 웹사이트에 콘텐츠 표시하기

위키백과에서는 동영상 태그를 사용하여 동영상을 포함한 콘텐츠를 자유롭게 사용할 수 있습니다.

동영상 태그는 웹사이트에 동영상에 대한 상대 또는 절대 링크를 표시하는 데 사용할 수 있으며, 컨트롤 및 반복과 같은 속성을 추가하는 옵션이 있습니다.

사용자 경험을 개선하고 대역폭을 절약하려면 자동 재생을 사용하지 않아야 합니다.

또한 높이 및 너비 속성을 설정하여 동영상의 표시 크기를 제어할 수 있습니다.