[HTML]기초

HyperText Markup Lanuage

웹페이지의 틀을 만드는 마크업 언어

HTML은 Tag들의 집합
Tag란 부등호(<>)로 묶인 HTML의 기본 구성 요소

---

tag

• head - 문서의 메타데이터를 선언. 문서의 제목, 브라우저의 탭에 보여짐
• /태그 - 해당 태그가 끝났음을 의미
• body - 문서의 내용을 담는 곳
• h1 - heading, 크기에 따라 h1부터 h6까지
• div - content division, 줄바꿈, 한줄 차지
• span - 줄바꿈이 없는 content 컨테이너, 컨텐츠의 크기만큼 공간 차지

---

태그 내부에 내용이 없다면

<tag><tag /> </tag>

---

img - 이미지

---

<img src="링크" alt="사진설명" />

의 형태이다.

a - 링크 삽입

---

<a href="http://www.naver.com">네이버</a>

<a href="http://www.naver.com" target="_blank">네이버</a>

“_blank” - 새탭에서

<a href="./index.html"></a>

같은 폴더(./)의 index.html로 이동

---

ul, li, ol - 리스트

---

<ul>
  <li>dsf</li>
</ul>

<ol>
  <li>dsf</li>
</ol>

ol은 앞머리에 숫자

---

form

---

<form action="submit">
  <div id="todo">
    <input id="todo_workout" type="checkbox" />
    <label for="todo_workout">운동</label>
    <input id="todo_study" type="checkbox" />
    <label for="todo_study">공부</label>
    <input id="todo_drink" type="checkbox" />
    <label for="todo_drink">물 마시기</label>
    <input id="todo_shopping" type="checkbox" />
    <label for="todo_shopping">장 보기</label>
    <input id="todo_play" type="checkbox" />
    <label for="todo_play">놀기</label>
  </div>
  <div>
    <button>오늘 할 일 완료</button>
  </div>
</form>

select

---

<select>
  <option value="select">기수를 선택하세요</option>
  <option value="39th">39기</option>
  <option value="40th">40기</option>
  <option value="41th">41기</option>
  <option value="42th">42기</option>
  <option value="43th">43기</option>
</select>

p - paragraph, 즉 문단의 약자, 하나의 문단을 만들 때 쓰임

---

<p>
  《어벤져스》(영어: The Avengers)는 마블 스튜디오가 제작하고 월트 디즈니
  픽처스가 배급하여 개봉된 2012년 미국의 슈퍼 히어로 영화이다.
</p>
<p>마블 코믹스에 등장하는 동명의 슈퍼히어로 팀을 바탕으로 하고 있다.</p>

p와 div의 차이
p는 단락이 나누어 짐
div는 단지 영역을 구분할 뿐