https://www.youtube.com/watch?v=rgI930gqdaY

description: |-

1. 이건 꼭 알아야 한다^1

[? 질문] HTML은 무엇이며 웹 개발에서 어떤 역할을 하는가^2
[= 답] HTML은 마크업(mark-up) 언어로, 웹 페이지의 **기본적인 형태(구조/겉모습)**를 만드는 코드이며 웹 개발자가 가장 먼저 배우는 기초이다.^2

[? 질문] HTML만으로 웹사이트를 만들 수 있는가, 그리고 무엇을 할 수/없나^4
[= 답] HTML은 프로그래밍 언어가 아니기 때문에 연산/통신 같은 기능은 수행하지 못하고, 글자·버튼·입력창 같은 **화면 요소(콘텐츠)**를 구성하는 데 집중한다.^4

[? 질문] 입문자가 “최소로” 알아야 할 HTML의 핵심은 무엇인가^6
[= 답] HTML은 결국 **태그(tag)**를 순서에 맞게 조합하는 문서이므로, 많이 쓰는 핵심 태그(제목/문단/입력/버튼/구역/줄바꿈/강조/링크/이미지/리스트/표/폼/선택)를 익히고, 스타일은 필요 최소한만 style 속성으로 맛본 뒤 CSS와 JavaScript로 확장하면 된다.^6^8

2. 큰 그림[^9]

이 콘텐츠는 웹개발 입문자를 대상으로 HTML의 정체와 역할을 먼저 정리한 뒤, Visual Studio Code에서 index.html을 만들고 기본 템플릿을 생성한 다음, 웹페이지에서 자주 쓰는 대표 태그들을 “직접 찍어보며” 어떤 화면이 만들어지는지 확인하는 실습형 강의다.[^9][^10] 마지막에는 “이 정도면 HTML은 충분하다”는 학습 로드맵(HTML → CSS → JavaScript)을 제안한다.[^11]

• HTML은 구조/콘텐츠를 담당하는 마크업 언어이며, 웹페이지의 요소(텍스트, 버튼, 입력창 등)를 태그로 표현한다.^2
• 태그는 열림/닫힘 구조(또는 닫힘이 없는 형태)로 사용하며, type, href, src 같은 **속성(attribute)**을 통해 동작/의미를 구체화한다.[^12][^13]
• style 속성으로 간단한 꾸미기는 가능하지만, 본격적인 디자인은 CSS, 제출/통신 등 동작은 JavaScript 영역으로 넘어간다.[^8][^14]

3. 하나씩 살펴보기[^15]

3.1 HTML이란 무엇인가: “겉모습을 만드는 코드”^2

영상은 “html이 뭘까요”라는 질문으로 시작한다.^1 이어서 HTML을 마크업(mark-up) 언어로 정의하며, 웹 페이지의 기본적인 형태를 만드는 코드라고 설명한다.^2
웹 개발자가 되고 싶다면 가장 처음 배우게 되는 것이 HTML이라고 강조한다.^3

또한 HTML은 프로그래밍 언어가 아니기 때문에, 연산이나 통신 같은 기능은 수행할 수 없고 “단순히 웹 페이지의 겉모습”만 담당한다고 선을 긋는다.^4 예시로 글자나 버튼 같은 요소들이 HTML로 만들어진다고 말한다.^5

마지막으로 HTML은 굉장히 쉽고 직관적이라, 기초지식이 없어도 누구나 쉽게 배울 수 있다고 난이도를 안내하고, 이번 영상에서 HTML 강의를 진행하겠다고 목적을 선언한다.^6

[!IMPORTANT] HTML의 포지션(역할) 규정 HTML은 “기능(연산/통신)”이 아니라 “구조/겉모습(콘텐츠 배치)”을 만든다는 구분을 초반에 명확히 한다.^4

3.2 개발 환경 준비: Visual Studio Code 설치와 폴더 열기[^10]

HTML을 작성하기 위해 먼저 **Visual Studio Code(VS Code)**를 다운로드한다고 안내한다.[^10] VS Code는 웹 개발에 가장 많이 사용되는 코드 에디터라고 소개하고, 무료임에도 개인적으로 가장 좋아하는 에디터라고 덧붙인다.[^16]

설치를 완료하면 VS Code 화면이 뜨며, 먼저 작업할 폴더를 선택하라고 한다.[^17] 선택한 폴더 안에서 모든 작업이 이뤄진다는 점을 짚는다.[^18]

3.3 index.html 만들기와 기본 템플릿 자동 생성(! + Tab)[^19]

이제 HTML 파일을 만들어야 하므로, 새 파일 아이콘을 눌러 index.html을 생성한다.[^19]
그리고 파일 안에 코드를 작성할 때, 느낌표(!)를 누르고 탭을 누르면 HTML의 기본 구조 템플릿이 자동 생성된다고 보여준다.[^20] 이는 VS Code가 지원하는 기능이라고 설명한다.[^21]

3.4 태그(tag)란 무엇인가: HTML은 “태그의 조합 문서”[^22]

템플릿에 보이는 “괄호 안 영어 단어들”을 태그라고 부른다고 소개한다.[^22]
HTML은 사실 이런 태그들을 순서에 맞게 조합한 문서라고 이해하면 된다고 말하며,[^23] 따라서 영상의 대부분은 태그를 소개/설명하는 내용이 될 것이라고 예고한다.[^24]

3.5 head와 body: 어디에 무엇을 쓰는가[^25]

기본 구조에는 head 태그와 body 태그가 있으며,[^25]

• 웹사이트에 대한 설명 또는 외부 자료에 대한 참조는 head에 들어가고[^25]
• 사용자가 실제로 보는 화면의 내용은 body에 들어간다고 구분한다.[^25]

초보자 입장에서는 body 안의 내용만 신경 쓰면 된다고 학습 초점을 정리한다.[^26]

3.6 title 태그: 웹사이트 제목 넣기 + 태그 기본 사용법[^27]

불필요한 태그를 지우고 title 태그에 “나의 웹사이트”라고 적는 시연을 한다.[^27]

이어서 “태그를 사용하는 방법”을 규칙처럼 설명한다.[^28]

• 열림 태그와 닫힘 태그 사이에 내용을 넣는다.[^28]

그리고 title은 말 그대로 웹사이트의 제목이라고 의미를 확정한다.[^29]

3.7 제목 태그 h1~h6: 숫자는 크기 차이[^30]

body에 들어갈 태그 중 처음으로 h1부터 h6까지를 소개한다.[^30] 용도는 글의 제목 또는 강조라고 말한다.[^31]

여기서 1~6의 숫자는 글자 크기의 차이를 의미하며, 1이 가장 크다고 덧붙인다.[^32][^33] 브라우저에서 확인하면 해당 결과가 나온다고 보여주고,[^34] 이후 h1만 제외하고 나머지는 모두 삭제한다고 한다.[^35]

3.8 문단 태그 p: 긴 텍스트를 넣어 표시[^36]

다음 태그로 p를 소개하며, p는 문단을 넣을 때 사용하는 태그라고 정의한다.[^36]
태그 안에 긴 텍스트를 넣고 브라우저에서 확인하면 작성한 텍스트가 화면에 보여지는 것을 확인할 수 있다고 설명한다.[^37]

3.9 input 태그와 속성(attribute) type="text": 닫힘 태그가 없는 경우[^38]

다음은 input 태그로, 입력창을 의미한다고 말한다.[^38] input은 “내용이 없기 때문에” 닫는 태그가 불필요하다고 설명한다.[^39] 실제로 화면에 텍스트를 입력할 수 있는 공간이 생기는 것을 보여준다.[^40]

그리고 여기서 “새로운 것”으로 type를 짚는다.[^41] type는 해당 태그의 속성이며,[^42] type="text"는 “type이라는 속성의 값이 text임”을 뜻한다고 풀이한다.[^43] type에 대해서는 영상 뒤에서 다시 설명하겠다고 예고한다.[^44]

[!NOTE] 태그 vs 속성 이 시점에서 콘텐츠는 “태그(요소 자체)”와 “속성(요소의 성격/동작을 지정)”을 구분해 소개한다.[^42][^43]

3.10 button 태그: 클릭 가능한 버튼 생성[^45]

button 태그는 말 그대로 버튼이며, 길게 설명할 필요 없이 페이지에 클릭할 수 있는 버튼이 생긴 것을 확인할 수 있다고 한다.[^45][^46]

3.11 style 속성으로 크기/색상 등 커스터마이징 + CSS의 역할 맛보기[^47]

버튼/입력창이 작아 보인다는 맥락에서, HTML 태그들은 style 속성으로 외형을 커스터마이징할 수 있다고 소개한다.[^47] 여기서 크기나 색상 등을 변경할 수 있다고 말한다.[^48]

실습으로 input 창을

• 가로 500px
• 세로 100px
  로 스타일링해 크기가 커지는 것을 확인한다.[^49][^50]

이후 글자 크기가 작다는 문제를 다시 발견하고, style에서 font-size를 조절해 폰트 크기를 바꾸면 된다고 설명한다.[^51][^52]

여기서 style로 하는 작업은 원래 CSS의 기능이며, CSS는 태그들의 스타일만 담당하는 코드라고 역할을 분리한다.[^8][^53] 따라서 디테일한 스타일링은 CSS 파일을 따로 만들어 작성한다고 말한다.[^54] 다만 “이런 간단한 부분은 HTML 내에서 해도 문제 없다”고 예외를 허용한다.[^55] CSS는 다른 영상에서 다루겠다고 안내한다.[^56]

이어서 버튼에도 스타일링을 적용해 버튼이 적당한 크기가 되었다고 확인한다.[^57]

[!TIP] 입문 단계에서의 스타일 적용 기준 강의는 “간단한 스타일은 HTML의 style로 맛보기 가능”하지만 “디테일/본격 스타일은 CSS로 분리”라는 기준을 제시한다.[^54][^55]

3.12 div로 구역 나누기: 버튼을 가로/세로로 배치하기[^58]

버튼을 하나 더 만들면 버튼이 가로로 추가되는 것을 보여준다.[^58][^59] 그리고 “라인을 바꾸어 세로로 버튼을 추가하고 싶다면?”이라는 상황을 던진다.[^60]

그럴 때 div 태그를 사용한다고 말하며,[^61] div는 여러 개의 태그들을 구역으로 묶거나 나눌 때 사용하는 태그라고 정의한다.[^62] 버튼들을 별도의 div에 넣어 구역을 나누어 보겠다고 하고,[^63] 결과적으로 두 개의 버튼이 별도의 줄로 나뉜 것을 확인한다.[^64]

또한 같은 div 안에 묶으면 같은 줄로 들어간다는 배치 규칙을 함께 말한다.[^65]

3.13 줄바꿈이 “코드 줄바꿈”대로 되지 않는 이유: br 태그 필요[^66]

p 태그의 내용을 두 줄의 짧은 문장으로 바꾸며, 코드상에서 줄바꿈을 했는데도 화면에 적용되지 않는 현상을 보여준다.[^66][^67]

HTML에서 줄바꿈을 하려면 br 태그를 사용해야 한다고 설명하고,[^68] br 태그를 넣으면 줄바꿈이 일어난다고 확인한다.[^69]

3.14 strong 태그: 텍스트 강조하기[^70]

첫 문장을 strong 태그 안에 넣으면 텍스트가 강조됨을 확인할 수 있다고 설명한다.[^70]

3.15 a 태그: 링크 걸기 (href 속성)[^71]

다음으로 a 태그를 소개하며, 다른 웹사이트로 가는 링크를 걸어주는 태그라고 한다.[^71]
href 속성에 원하는 주소를 넣어주면 되고,[^72] 그러면 페이지에 링크가 생긴 것을 확인할 수 있다고 한다.[^73]

3.16 div + display: flex: 블록을 가로로 나누기(간단 시연)[^74]

이번에는 div를 사용해 페이지의 블록을 나누는 예시를 진행한다.[^74] div 안에 나눌 태그들을 모아 넣고, 전체를 다시 하나의 div로 묶는 구조를 만든다.[^75]

그리고 바깥 div에 display=flex 스타일을 넣겠다고 하며,[^76] 이렇게 하면 내부의 div 블록들이 가로로 나뉘는 것을 볼 수 있다고 설명한다.[^77]
다만 flex는 CSS 영역이므로 자세히 설명하지 않겠다고 선을 긋는다.[^78]

3.17 img 태그: 이미지 삽입 (src, alt)[^79]

이미지는 img 태그가 담당한다고 하고, 외우기 쉽다고 언급한다.[^79][^80]

예시로 구글에서 유튜브 로고를 검색해 이미지 주소를 복사한 뒤,[^81] img의 src 속성 안에 해당 링크를 넣는다.[^82]

또한 alt 속성은 이미지 불러오기가 실패했을 때 이미지 대신 텍스트로 대체된다고 설명한다.[^83] 결과적으로 이미지가 잘 불러와졌다고 확인한다.[^84]

3.18 리스트: ul/ol + li (불릿 vs 숫자 넘버링)[^85]

다음은 ul과 ol 태그를 소개한다.[^85] 둘 다 리스팅에 사용된다고 말한다.[^86]

• ul 태그 안에 li 태그를 넣고 내용을 넣으면 워드에서 사용하는 것과 비슷하게 리스팅이 가능하다고 설명한다.[^87]
• ol도 사용 방법은 동일하다고 하며,[^88] ol은 ul과 다르게 앞에 자동으로 숫자 넘버링이 붙는다고 차이점을 정리한다.[^89]

3.19 표 만들기: table + tr + th + td + caption[^90]

다음은 table 태그로, 주로 표를 만들 때 사용된다고 소개한다.[^90]

ul과 비슷하게 table 태그 안에 내용이 되는 태그들을 넣어야 한다고 말하고,[^91] 구성 요소를 순서대로 설명한다.

• tr은 테이블의 한 **행(row)**을 의미한다.[^92]
• 첫 행에는 th(테이블 헤더)를 칸 수에 맞게 배치한다.[^93]
• 다음 tr 안에는 td로 테이블 내용을 헤더 칸에 맞게 배치해 준다.[^94]
• 마지막으로 caption 태그로 테이블의 이름을 정해주면 테이블이 완성된다고 한다.[^95]

표의 크기가 큰 것 같아 살짝 줄이겠다고 말하며 크기를 조정하고,[^96] 이어서 “이제 세 번째 블록을 만들겠다”고 다음 구간으로 넘어간다.[^97]

3.20 form 태그: 여러 입력을 묶어 제출하는 단위[^98]

다음으로 다룰 태그는 form이며,[^98] 회원가입이나 로그인 같이 특정 정보들을 묶어서 하나의 폼으로 제출해야 할 때 사용하는 태그라고 정의한다.[^99]

실습으로 form 안에 3개의 input을 넣는다.[^100]

3.21 input type 심화: text/email/password + submit 버튼[^101]

앞에서 예고했던 type을 다시 꺼내며 설명을 이어간다.[^101]

input 태그의 type 속성은 이 입력창이 어떤 정보를 받아들일지에 대한 속성이라고 정의한다.[^102]
예시로 text, email, password 순서대로 배치했다고 말한다.[^103]

• password 타입 입력창은 입력한 글자가 보이지 않는다고 확인시켜 준다.[^104]
• 그리고 “email 타입은 뭐가 다른 걸까요?”라고 질문을 던진다.[^105]

이어서 form 태그 내에 button을 넣는데,[^106] 일반적으로 form 안에는 작성한 정보를 제출하기 위한 버튼을 넣고, 이때 버튼의 type을 submit으로 지정한다고 설명한다.[^107]

그러면 해당 버튼을 눌렀을 때 폼의 내용이 제출된다고 말하며,[^108] “어디로 제출될지는 JavaScript로 한다”고 덧붙인다.[^109]

3.22 email 유효성 검사 데모: 형태가 아니면 알림이 뜬다[^110]

폼 내용을 채우고 submit 버튼을 누르면, 앞서 만든 email 타입 입력창이 알림을 띄우는 것을 보여준다.[^110][^111]
이는 이메일 주소 형태가 아님을 “캐치한 것”이라고 설명한다.[^111]

이메일 주소 형태로 바꾼 뒤 완료를 누르면 제출이 완료되고, 내용들이 다시 리셋된 것을 확인할 수 있다고 한다.[^112][^113]

[!IMPORTANT] 브라우저 기본 기능 활용 input type="email"만으로도 브라우저가 “이메일 형태인지”를 기본 검증해 알림을 띄울 수 있음을 시연한다.[^110][^111]

3.23 input type="date": 날짜 선택 UI[^114]

input을 하나 더 추가하며 이번에는 date 타입을 소개한다.[^114]
date 타입의 input은 날짜를 선택하는 기능을 가지고 있다고 설명하고, “굉장히 심플”하다고 평한다.[^115][^116]

3.24 input type="checkbox": 체크박스 + 텍스트[^117]

체크박스를 하나 만들며 type을 checkbox로 바꾼다고 말한다.[^117] 이번에는 텍스트도 넣어 보며, 잘 작동한다고 확인한다.[^118][^119]

3.25 select + option: 하나를 고르는 선택 입력 + name/value[^120]

마지막으로 select 태그를 다룬다.[^120] select는 항목 선택을 위한 태그이며 여러 선택지 중 하나를 골라야 할 때 자주 사용된다고 설명한다.[^121][^122]

구조는 ul과 비슷하게 select 태그가 여러 개의 option 태그를 감싸는 형태라고 말한다.[^123]
그리고 속성의 의미를 다음처럼 정리한다.

• select 태그는 name 속성으로 이름을 지정한다.[^124]
• option 태그는 value로 전송 값을 지정한다.[^124]

이 부분은 HTML 상에서 “보이는 부분은 아니지만”, 서버로 폼을 제출할 때 이 값이 서버로 전송된다고 설명한다.[^125]
다만 통신 관련 내용이므로 아직은 그 정도까지 알 필요는 없고 “그냥 그렇구나” 하고 넘어가면 된다고 안내한다.[^126][^127]

예시로 select 내에 3개의 option을 만들고 각각 커피 이름을 넣어 보며, 선택 창이 생긴 것을 확인한다.[^128][^129]

+++ 상세 예시: select의 “화면에 보이는 값”과 “전송 값” 구분(영상 맥락 재구성) 영상의 설명 흐름은 다음 포인트를 분리한다.[^124][^125]

• 사용자는 화면에서 커피 이름(옵션 텍스트)을 보고 선택한다.[^128]
• 실제로 서버로 제출될 때는 option value="..."에 지정한 값이 전송된다.[^124][^125]
• 이 차이는 “통신/서버로 데이터가 넘어가는” 순간 의미가 커지지만, 입문 단계에서는 구조만 이해하고 넘어가도 된다고 정리한다.[^126][^127] +++

3.26 마무리: “자주 쓰는 핵심만 알아도 충분” + 다음 단계(CSS/JS)[^130]

영상은 지금까지 HTML을 알아봤다고 정리한다.[^130] 자주 사용하는 핵심 내용만 다뤘지만, 이 내용들만 알아도 웬만한 웹사이트를 만드는 데 큰 문제가 없다고 말한다.[^131]

또한 웹 개발을 이제 공부하는 사람이라면 HTML은 이 정도만 배우고 CSS와 JavaScript로 넘어가도 충분할 것 같다고 학습 전략을 제안하며 마무리한다.[^132] 끝인사로 “오늘 영상은 여기까지” “시청해줘서 고맙다”고 종료한다.[^133][^134]

4. 핵심 통찰[^135]

1. HTML 학습의 중심은 “기능 구현”이 아니라 태그로 구조를 조립하는 감각을 익히는 것이다.[^2][^23]
   • head/body 구분과 주요 태그들의 역할만 알아도 페이지 뼈대를 만들 수 있다는 톤으로 전개된다.[^25][^26]
2. HTML은 태그 + 속성의 조합으로 실질적인 표현력이 생긴다.[^42][^43] input type, a href, img src/alt, select name, option value 같은 속성들이 “동작과 의미”를 결정한다.[^72][^82][^83][^102][^124]
3. 스타일은 style로 당장 바꿔볼 수 있지만, 본격적으로는 CSS로 분리하는 것이 자연스럽다는 방향을 명확히 제시한다.[^53][^54]
4. form과 input type="email" 데모는 HTML만으로도 브라우저가 제공하는 기본 검증 UX를 활용할 수 있음을 보여준다.[^110][^111]
5. 입문 로드맵은 “HTML 핵심 → CSS → JavaScript”로 이어지며, 제출/통신(어디로 제출되는가)은 JavaScript 영역이라고 경계를 설정한다.[^109][^132]

• 실행 포인트(콘텐츠가 암시하는 학습/실습 행동)
  • index.html을 만들고 VS Code의 ! + Tab 템플릿으로 기본 골격을 자동 생성해 반복 연습한다.[^19][^20]
  • h, p, div, a, img, ul/ol/li, table, form, select/option을 “하나씩 추가→브라우저 확인” 흐름으로 손에 익힌다.[^30][^36][^61][^71][^79][^85][^90][^98][^120]
  • input type만 바꿔가며(text/email/password/date/checkbox) UI/동작 차이를 직접 확인한다.[^103][^114][^117]

5. 헷갈리는 용어 정리[^136]

마크업 언어(Markup language): 웹 페이지의 기본 형태(구조/겉모습)를 만들기 위해 태그로 문서를 “표시”하는 언어로, HTML을 이렇게 정의한다.^2
태그(Tag): HTML 기본 구조에서 꺾쇠 괄호 형태로 쓰이는 영어 단어들로, HTML 문서를 구성하는 단위라고 설명한다.[^22][^23]
속성(Attribute): 태그에 붙어 그 태그가 어떤 성격/동작을 가질지 정하는 정보로, 예시로 input의 type="text"를 들어 “type 속성의 값이 text”라고 풀이한다.[^42][^43]
CSS: 태그들의 스타일만 담당하는 코드로, 디테일한 스타일링은 CSS 파일을 따로 만들어 작성한다고 설명한다.[^53][^54]
flex: display=flex로 블록을 가로로 나누는 데 쓰이는 CSS 성격의 기능이며, 자세한 설명은 생략한다고 언급한다.[^76][^78]

---

참고(콘텐츠 정보)[^137]

• 제목: [웹개발 입문] HTML 핵심만 배우기[^137]
• 채널: 아케이코딩 - 쉽게 배우는 코딩과 IT[^137]
• 길이: 10분 46초[^137]
• 링크: https://www.youtube.com/watch?v=rgI930gqdaY[^137]
• 키워드(제공됨): HTML, 웹, 웹사이트, 코딩, 프로그래밍, 파이썬, 파이선, 자바스크립트, 강의, 강좌[^137]

[^9]: @[00:35] "이번 영상에서는..." / @[01:34] "대부분은 태그들을 소개..." [^10]: @[00:40] "우선 html을 작성하기 위해 visual studio code를 다운 받습니다." [^11]: @[10:24] "핵심적인 내용만 다루었지만..." / @[10:33] "css와 javascript로 넘어가셔도..." [^12]: @[02:05] "태그를 사용하는 방법은 태그와 닫힘 태그 사이에..." [^13]: @[03:09] "type... 해당 태그의 속성" [^14]: @[08:43] "어디로 제출 될지는 javascript로 하게 되고요." [^15]: @[01:34] "이 영상의 내용도 대부분은 태그들을 소개..." [^16]: @[00:49] "무료 임에도 불구하고 개인적으로 가장 좋아하는 에디터입니다." [^17]: @[00:58] "먼저 작업할 폴더를 선택하세요." [^18]: @[01:00] "그러면 이 폴더 안에서 모든 작업이뤄집니다." [^19]: @[01:06] "새 파일... index.html 파일을 생성" [^20]: @[01:11] "느낌표를 누르고 탭을 누르면... 기본 구조 템플릿" [^21]: @[01:19] "visual studio code에서 지원하는 기능" [^22]: @[01:23] "이런 것들을 태그라고 부릅니다." [^23]: @[01:29] "html은 사실 이런 태그들을 순서에 맞게 조합한 문서" [^24]: @[01:34] "대부분은 태그들을 소개하고 설명" [^25]: @[01:41] "head... body... head... body..." [^26]: @[01:54] "초보자 입장에서는 body 태그 안의 내용만..." [^27]: @[01:59] "불필요한 태그들은 지우고 title 태그에..." [^28]: @[02:05] "태그를 사용하는 방법은..." [^29]: @[02:10] "title 태그는... 웹사이트의 제목" [^30]: @[02:14] "처음으로 소개드릴 태그는 h1부터 h6" [^31]: @[02:21] "주로 글의 제목이나 강조" [^32]: @[02:25] "1부터 6까지는... 글자의 크기의 차이" [^33]: @[02:30] "1이 가장 크고요." [^34]: @[02:32] "브라우저에서 확인하면..." [^35]: @[02:36] "h1만 제외하고..." [^36]: @[02:39] "p 태그... 문단" [^37]: @[02:45] "브라우저에서 확인하면..." [^38]: @[02:53] "다음은 input 태그입니다." [^39]: @[02:56] "내용이 없기 때문에 닫는 태그가 불필요" [^40]: @[03:02] "텍스트를 집어넣을 수 있는 공간" [^41]: @[03:06] "그런데 여기서 새로운 게 보입니다." [^42]: @[03:09] "type... 해당 태그의 속성" [^43]: @[03:13] "type='text'... 속성의 값이 text" [^44]: @[03:19] "type에 대해서는 영상 뒤 쪽에서..." [^45]: @[03:23] "button 태그는..." [^46]: @[03:26] "페이지에 클릭할 수 있는 버튼" [^47]: @[03:36] "style 속성으로 외형을 커스터마이징" [^48]: @[03:40] "크기나 색상 등을 변경" [^49]: @[03:44] "가로 500px 세로 100px" [^50]: @[03:48] "크기가 커졌죠." [^51]: @[03:51] "글자 크기가 작네요." [^52]: @[03:53] "font-size를 조절" [^53]: @[03:58] "이런 style은 css에서 하는 기능" [^54]: @[04:06] "디테일한 스타일링은 css파일을 따로..." [^55]: @[04:12] "간단한 부분은 html 내에서 해도..." [^56]: @[04:16] "css에 대한 내용은 다른 영상" [^57]: @[04:20] "버튼에도... 적당한 크기" [^58]: @[04:27] "버튼을 하나 더 만들어보겠습니다." [^59]: @[04:30] "버튼이 가로로 추가" [^60]: @[04:33] "라인을 바꾸어... 어떻게 할까요?" [^61]: @[04:38] "그럴 때 div 태그" [^62]: @[04:40] "구역으로 묶거나... 사용하는 태그" [^63]: @[04:46] "버튼들을 별도의 div" [^64]: @[04:51] "별도의 줄로 나뉜 것" [^65]: @[04:56] "같은 div 안에 묶으면..." [^66]: @[05:00] "p 태그... 두 줄" [^67]: @[05:06] "분명 줄 바꿈을 했는데도..." [^68]: @[05:11] "br 태그를 사용" [^69]: @[05:16] "br 태그를 넣으면..." [^70]: @[05:20] "strong 태그... 텍스트가 강조" [^71]: @[05:26] "a 태그... 링크" [^72]: @[05:34] "href 속성에 원하는 주소" [^73]: @[05:39] "페이지에 링크" [^74]: @[05:44] "div 태그... 페이지의 블록을 나눠" [^75]: @[05:48] "div 태그 안에... 다시 묶습니다." [^76]: @[05:54] "display=flex" [^77]: @[06:00] "내부의 div 블록들이 가로로" [^78]: @[06:04] "flex는 css... 자세히 설명" [^79]: @[06:09] "이미지는 img" [^80]: @[06:12] "외우기 굉장히 쉽죠." [^81]: @[06:13] "유튜브 로고... 이미지 주소" [^82]: @[06:18] "img의 src 속성" [^83]: @[06:23] "alt 속성은... 대체" [^84]: @[06:30] "이미지가 잘 불러와졌네요." [^85]: @[06:32] "ul과 ol" [^86]: @[06:35] "둘 다 리스팅" [^87]: @[06:37] "ul 태그 안에 li..." [^88]: @[06:46] "ol... 사용 방법은 동일" [^89]: @[06:51] "ol은... 숫자 넘버링" [^90]: @[06:59] "table 태그" [^91]: @[07:05] "table 태그 안에..." [^92]: @[07:10] "tr은 테이블의 한 행" [^93]: @[07:10] "첫 행에는 th..." [^94]: @[07:19] "다음 tr... td" [^95]: @[07:28] "caption 태그" [^96]: @[07:35] "크기... 줄일게요." [^97]: @[07:40] "세 번째 블록" [^98]: @[07:43] "form 태그" [^99]: @[07:46] "회원가입이나 로그인... 폼으로 제출" [^100]: @[07:55] "form... 3개의 input" [^101]: @[08:00] "type에 대해..." [^102]: @[08:03] "type 속성은... 어떤 정보를..." [^103]: @[08:09] "text, email, password" [^104]: @[08:15] "password... 글자가 보이지" [^105]: @[08:22] "email 타입은 뭐가 다른 걸까요?" [^106]: @[08:24] "form 태그 내에 button" [^107]: @[08:28] "type을 submit으로 지정" [^108]: @[08:38] "버튼을 눌렀을 때... 제출" [^109]: @[08:43] "어디로 제출 될지는 javascript" [^110]: @[08:46] "submit 버튼을 눌러보겠습니다." [^111]: @[08:50] "email 타입... 알림... 형태가 아님" [^112]: @[08:57] "이메일 주소의 형태로 바꿔" [^113]: @[09:01] "제출이 완료... 리셋" [^114]: @[09:06] "date 타입" [^115]: @[09:12] "날짜를 선택" [^116]: @[09:17] "굉장히 심플" [^117]: @[09:19] "체크박스... type을 checkbox" [^118]: @[09:21] "텍스트도 넣어보겠습니다." [^119]: @[09:27] "잘 작동" [^120]: @[09:29] "select 태그" [^121]: @[09:32] "항목 선택" [^122]: @[09:36] "여러 선택지 중 하나" [^123]: @[09:40] "select... option... 감싸는 형태" [^124]: @[09:46] "select... name... option... value" [^125]: @[09:53] "서버로 폼을 제출할 때... 전송" [^126]: @[10:01] "통신... 아직은..." [^127]: @[10:06] "그냥 그렇구나" [^128]: @[10:09] "3개의 option... 커피의 이름" [^129]: @[10:17] "선택 창" [^130]: @[10:22] "이렇게 html에 대해 알아봤는데요." [^131]: @[10:24] "이 내용들만 알아도 웬만한 웹사이트" [^132]: @[10:33] "html은... css와 javascript로 넘어가셔도" [^133]: @[10:41] "오늘 영상은 여기까지 입니다." [^134]: @[10:43] "시청해주셔서 고맙습니다." [^135]: @[00:12] / @[01:29] / @[03:09] / @[03:58] / @[08:50] 등 전반 종합 [^136]: @[00:02] / @[01:23] / @[03:09] / @[03:58] / @[05:54] [^137]: 사용자 제공 메타데이터(제목/채널/길이/링크/키워드)