HTML 기초

📝1. 웹 페이지의 모든 것의 시작은 HTML에서 비롯된다.

• 우리가 보는 것들은 모두 HTML을 통해 볼 수 있음
• 웹 페이지에 보이는 모든 것들은 기승전 HTML 태그의 결과물
• 웹 브라우저 환경의 베이스가 되는 HTML
• 문서의 구조와 정보 위계가 명확하게 보이는 아름다운 HTML 코드 작성하는 것 매우 중요!
• semantic markup

---

📝2. 태그 해부학

• tag
• attribute: 속성, 태그의 성격을 디테일하게 주고 싶을 때 사용
• 다양한 태그와 웹 표준에 맞는 올바른 사용법 익히기

---

📝3. Heading & Paragraph

• Heading Tag: H1(제목), H2, H3, H4, H5, H6
• Paragraph: p

---

📝4. Emphasis

• 강조: em(기울기), strong(굵게)
• 차이점은 없음

---

📝5. 링크 Anchor

• 현 위치에서 다른 위치로 이동할 때 사용
• href attribute 반드시 필요함
• hypertext reference(참조, 주소값)
• url 주소 / 상대 경로 / 페이지 내 이동 / 메일 쓰기 / 전화 걸기 / 새 창에서 열기(blank)

---

📝6. Image

<img src="#" alt=""/>

• src: source (이미지 주소 값)
• alt: alternative text (대체 텍스트)

---

📝7. List

• ol(ordered list): 순서가 중요한 목록 (ex. 레시피)
• ul(unordered list): 순서가 중요하지 않은 목록
• ul과 ol의 자식 요소는 무조건 li만 가능!

---

📝8. Description List

• 용어를 정의할 때
• key-value로 정보 제공할 때
• dl, dt(key), dd(value), dfn(정의할 때 사용)
• Good Practice

<dl>
  <dt>김버그</dt>
  <dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
</dl>

<dl>
  <dt>
    <dfn>development</dfn>
  </dt>
  <dd>1. dd </dd>
  <dd>2. cc </dd>
</dl>

<dl>
  <dt>김버그</dt>
  <dt>Kimbug</dt>
  <dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
</dl>

<dl>
  <div>
    <dt>김버그</dt>
    <dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
  </div>
</dl>

• Bad Practice

<dl>
  <dt>김버그</dt>
  <dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
  <dt>데벨업</dt>
  <!-- 데벨업을 설명하는 dd가 없음 -->
</dl>

<!-- dl의 자식요소는 오직 div, dt, dd만 가능! -->
<dl>
  <section>
    <dt>김버그</dt>
    <dd>주니어 개발자의 성장 드라마를 다루는 유튜브 채널입니다</dd>
  </section>
</dl>

---

📝8. Quotation

• blockquote: 더 많이 사용
• q: 문단 내의 인용문 사용 시
• cite: 출처

---

📝9. Div & Span

• 아무런 의미가 없고, 요소를 묶어야할 때 유용하게 쓰임
• span: text를 그루핑할 때

---

📝10. Form

<form action="API 주소" method="GET|POST"></form>

• 사용자로부터 Input을 받기 위한 태그
  action: API-서버에게 접근 가능한 URL
  method: GET OR POST
  POST: 정보의 양이 많을 때 사용
  input: 입력창 / type attribute 명시
  type: text/number/email/password

---

📝11. Input & Label

<input type="text">

• input 태그 attribute
  1) placeholedr: 안내문
  2) required: 빈칸 x
  3) disabled: 입력 x
  4) value="": 기본값(복사 가능)
  5) minlength/maxlength: 최소 문자 수/최대 문자 수
  6) min/max: 최소 숫자/최대 숫자
  7) accept: 파일 확장자 제한 (accept=".png, .jpg")

<label for="inputID">라벨</label>
<input id="inputID" type="text">

• label: 부가적인 태그
  폼 양식에 이름을 붙이는 태그
  for attribute 사용
  label 선택 시 input 태그에 focus

---

📝12. Radio & Checkbox

• radio: 단일 선택
  반드시 필요한 attribute
  1) name: name을 동일하게 설정해주어야 단일 선택 가능함
  2) value: submit 시 어떤 radio가 선택 되었는지 알 수 있음 | name=value 값으로 넘어감
  서버가 값을 구분할 수 있어야 함
• checkbox: 다중 선택 가능
  반드시 필요한 attribute: radio와 동일

---

📝13. Select & Option & Textarea & Button

• select 자식이 option이므로 select에만 name 주어도 됨
• option 다중 선택 원하면 select 태그에 multiple 작성 후 ctrl|command 사용
• textarea: 여러 줄의 글 작성 시 필요
• button type: button, submit, reset

---

📝14. Table

• 데이터를 담은 표를 만들 때 사용
• Table을 만드는 기본 원리

<table>
  <tr> <!--table row(가로줄)-->
    <th>테이블 헤더</th>
    <td>테이블 데이터</td>
  </tr>
</table>

• thead, tbody: 사용해주는것이 좋음
• tfoot: 총합, 결론 작성 시 사용
• rowspan="": 가로줄 병합
• colsapn="": 세로줄 병합
• scope="row|col": 행에 대한 th인지 열에 대한 th인지 브라우저에게 알려주는 attribute

---

📝15. Media Files

• 미디어 파일: 텍스트가 아닌 이미지, 영상, 오디오 등을 문서 안에 첨부함
• audio src="파일 주소"
  controls: 재생 바 | autoplay: 자동 재생 | loop: 반복
  source 태그 따로 사용: 브라우저에서 실행되지 않는 파일일 경우 대비하여 파일 여러개 작성
• video 태그 audio와 동일
• iframe

---

📝16. ETC. 태그

• abbreviation(abbr): 약자, 약어
  abbr title="풀네임"
• address: 연락처 정보 마크업 시 사용
  물리적 주소, URL, 이메일 주소, 전화번호, SNS
• pre(preformatted text)
• code: 코드 작성하고 싶을 때 사용. 주로 pre 안에 사용함(띄어쓰기)

---

📝17. Doctype & Title, Link, Style&Script

• vs code - !+tab
• document: HTML 그 자체
• title: 문서의 대제목
  검색 최적화(Search Engine Optimization)에 매우 중요
  *title 잘 쓰는 방법
  1) 키워드 단순 나열 비추
  2) 페이지마다 그에 맞게 변경
  3) 무엇에 관한 내용인지 센스있게!
• CSS 스타일시트를 첨부하는 태그
• html 안에 style 태그 작성: hmm..
• script 태그: js 파일 첨부
  script는 head 안에 쓰지 않음
  link는 우리가 가지고 있지 않기 때문에 가져오는데 시간 걸림 - 기다리지 않고 skip 가능
  script는 다른 서버의 js를 가져올 수도 있음. js는 가져올 때까지 멈춰있음. 로드 될 때까지 기다림. 비효율적! script는 body 내 모든 콘텐츠가 로드된 후 작성

---

📝18. Meta Tag

<meta name="메타데이터 종류" content="메타데이터 값">

• name="viewport"
  viewport에 맞춰서 화면 크기 조정. 디바이스 사이즈에 맞게 반응형 사이트 만들 수 있으므로 반드시 작성해야 함
• content="width=device-width, initial-scale=1.0"
  디바이스 width에 맞게, 초기 배율: 1.0

---

📝 짧은 후기

• DL 태그 처음 알게 됨🙄
• input 태그에 required attribute를 사용하면 빈칸 있을 때 submit 안되는 것도 처음 알았다.
  여태 js로 뻘 짓한 게 생각나서 괴로웠다. minlength 같은 attribute도...
  처음 안 게 아니라 까먹고 있었나...😭 이렇게 간단한 걸 js로 얼마나 뻘짓을 해왔던지...
• script문을 마지막에 쓰는 이유가 너무 궁금했는데 드디어 알게 되었다. 아무도 안알랴줌. 사실은 내가 서치를 안 해봤다... 무튼 앞으로는 js 파일은 body 태그 마지막에 쓰는 걸로.
• HTML 태그 정말 많다. 새삼 많다. MDN 문서 서치를 생활화하자.
• VS Code에서 Open in Preview를 사용하다 다크모드로 뜨는 것이 불편해 Live Preview로 바꾸었다. 실제 웹에서 보는 것과 크게 다르지 않다. iframe 태그 깨지는 거 말고는 다를 게 없었음👍