HTML

HTML은 구조를 만드는 역할

주석: <!— Comment —> 수정사항이나 설명 등을 작성(주석) → cmd+/

HTML 기본 문법

<태그>내용</태그>

ex) <h1>Hello HTML~</h1>

• 시작 태그와 종료 태그 사이에 내용 입력
• 종료 태그 앞에는 / 붙여야함

부모/자식 관계

<태그><태그>내용</태그></태그>

• 밖에 있는 태그가 부모 요소
• 안에 있는 태그가 자식 요소

<!-- 부모 요소 -->
<태그> 
	<!-- 자식 요소 -->
	<태그>내용</태그>
</태그>

빈태그

• 종료 태그가 존재하지 않는 태그 <태그 /> : XHTML, HTML5
  
• <태그 속성=”값”>내용</태그>

인라인/블록

인라인 요소: 글자를 만들기 위한 요소들

• 가로, 세로 사이즈를 가질 수 없음
• 인라인 요소 안에 블록 요소 넣을 수 없음! → 인라인 요소만 넣을 수 있음
• <span></span>: 대표적인 인라인 요소, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도(요소가 수평으로 쌓임)
• 포함한 콘텐츠 크기만큼 자동으로 줄어듦!
  

ex) 코드를 줄바꿈하면 띄어쓰기가 들어감

  <span>Hello</span>
  <span>World</span>

블록 요소: 상자(레이아웃)를 만들기 위한 요소들

• <div></div>: 대표적인 블록 요소, 본직적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도(수직으로 쌓임)
• 가로, 세로 사이즈 가짐
• 가로는 부모 요소 크기만큼 자동으로 늘어남
• 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어듦

ex) 수직으로 쌓임(한 태그당 한줄 차지)

<div>Hello</div>
<div>World</div>

핵심 요소 정리

블록 요소

div: 특별한 의미가 없는 구분을 위한 요소

h1~h6: 제목을 의미 → 숫자가 작을수록 더 중요한 제목을 정의(글씨가 더 커짐)

p: 문장을 의미하는 요소

ul: 순서가 필요없는 목록의 집합

li: 목록 내 각 항목 → ul태그 사이에 존재

ol: 순서가 필요한 목록의 집합

인라인 요소

img: 이미지를 삽입하는 요소 → <img src=”삽입할 이미지 경로” alt=”삽입할 이미지 이름” />

a: 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 → <a href=”링크 url”></a>

• target=”_blank”: 해당 속성은 링크를 눌렀을 때 새탭에 열리도록 하는 것

span: 특별한 의미가 없는 구분을 위한 요소

br : 줄바꿈 요소 → <br />

인라인-블록 요소

input: 사용자가 데이터를 입력하는 요소 → <input type=”text” />

• value=””: 미리 입력된 값(데이터)
• placeholder=”이름을 입력하세요!”: 사용자가 입력할 값(데이터)의 힌트
• disabled: 입력 요소 비활성화
• type=”checkbox” : 사용자에게 체크 여부를 입력 받음 → label: 라벨 가능 요소의 제목

  <label>
  	<input type="checkbox" /> Apple
  </label>
  <label>
  	<input type="checkbox" checked/> Banana
  </label>
  <!-- checked: 체크 박스 입력 요소 체크됨 -->

• type=”radio”: 사용자에게 체크 여부를 그룹에서 1개만 입력 받음

  <label>
  	<input type="radio" name="fruits" /> Apple
  </label>
  <label>
  	<input type="radio" name="fruits" /> Banana
  </label>

테이블 요소

table: 표 요소, 행(Row)과 열(Column)의 집합

tr: 행을 지정하는 요소

td: 열을 지정하는 요소

<table>
	<tr>
		<td>A</td><td>B</td>
	</tr>
	<tr>
		<td>C</td><td>D</td>
	</tr>
</table>
<!-- 
	A B
	C D
-->

전역 속성

• <태그 title=”설명”></태그>: 요소의 정보나 설명을 지정
• <태그 style=”스타일”></태그>: 요소에 적용할 스타일(CSS)을 지정
• <태그 class="이름"></태그>: 요소를 지칭하는 중복 가능한 이름
• <태그 id=”이름”></태그>: 요소를 지칭하는 고유한 이름
• <태그 data-이름=”데이터”></태그>: 요소에 데이터를 지정 → js에서 해당 데이터 사용할 때 유용
  

  <div data-fruit-name="apple">사과</div>
  <div data-fruit-name="banana">바나나</div>

  const els = document.querySelectorAll('div')
  els.forEach(el => {
    el.dataset.fruitName
  })