1. 핵심 요소

블록 요소

<div> </div>

특별한 의미가 없는 영역 구분을 위한 요소 (Division)
어떠한 개념을 한데 묶을 때 많이 사용한다.

<h1> </h1>

제목을 의미하는 요소(Heading)
글자로 이루어져있긴 하지만 블록 요소이다.
h1 ~ h6 까지 존재한다.
(숫자가 낮을수록 중요, 페이지의 제목이 전체 페이지 내 중요도가 어느 정도인지 생각해보고 적절하게 사용한다.)

H1 헤더

H2 헤더

H3 헤더

H4 헤더

H5 헤더

H6 헤더

<p> </p>

문장을 의미하는 요소(Paragraph)
div사용 안하고 p태그로 사용하면 p태그 안에 묶여있는 것이 어떠한 문장임을 이해할 수 있다.

• 문장이지만 p태그로 구분하기 애매한 경우, div태그 사용 가능
• 글자를 다루고 있지만 글자들이 모여 문장을 이루고 있기 때문에 인라인 요소가아니라 블록 요소이다.

<ul> </ul>

순서가 필요없는 목록의 집합을 의미(Unordered List)
순서가 주관적인 경우 순서가 필요없다고 가정
ul태그의 자식으로 li태그가 무조건 1개 이상 들어있어야 한다.

<li> </li>

목록 내 각 항목 (List Item)
항목이 모여 목록을 만든다. (목록: List / 항목: Item)
li 태그는 무조건 ul태그로 감싸져 있어야 한다.

<ul>
	<li>사과</li>
    <li>딸기</li>
    <li>수박</li>
</ul>

인라인 요소

<img />

이미지를 삽입하는 요소 (Image)
src, alt 는 필수 속성이다.

<img src="../images/starbucks_logo.png" alt="STARBUCKS" />

<a> </a>

다른 or 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
Anchor: 닻을 의미. 배에서 닻을 내려 배를 고정시키는 것 처럼 앵커 태그를 통해 주소를 건다는 의미

자주쓰이는 속성 target: "_blank"는 새로운 탭에 페이지를 열 수 있다.

<span> </span>

특별한 의미가 없는 구분을 위한 요소.
"동해물"이라는 글자에만 스타일을 특별하게 지정해주고 싶을 때 span태그로 특정한 글자 부분을 묶어낼 수 있다.

<span> 동해물 </span>과 백두산이 마르고 닳도록

<br/>

줄바꿈 요소 (Break)
흔히 줄바꿈 할때 사용하는 엔터키는 코드에서 바꿈이 되지 않음

안녕 <br />
하세요

<input/>

사용자가 데이터를 입력하는 요소.

input 요소는 인라인이라서 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징이 있으나 블록요소처럼 가로 세로 여백도 쓸 수 있는 특징 있다.
이처럼 글자 요소이긴하지만, 상자 요소가 가지고있는 특성을 몇 가지 쓸 수 있어서 Inline-block 이라고도 한다.

input창

<input type="text" / >

type: 입력받을 데이터의 타입
text: 사용자한테 입력 받을 텍스트

<input type="text" value="HELLO!" / >

value: 사용자가 입력하기 전에 미리 입력된 값(데이터)

<input type="text" placeholder="이름을 입력하세요." / >

placeholder: 사용자가 입력할 값(데이터)의 힌트

<input type="text" disabled / >

disabled : 비활성화, 값을 명시하지않는 속성 회색처리되면서 사용자가 사용할 수 없다. input창이 화면에 보이긴 하는데 입력하지 않는 창으로 만들기 위해 사용한다.

<label> </label>

라벨 가능 요소(input)의 제목

checkbox: 사용자에게 체크 여부를 입력 받음

• checked: 해당 요소를 추가로 입력하면 사용자가 체크안해도 화면에 체크된 상태로 출력 된다.

Apple Banana Cherry

<label>
   <input type="checkbox" / > Apple
   <input type="checkbox" / > Banana
   <input type="checkbox" checked / > Cherry
</label>

radio : 속성으로 묶어서(name 속성) 택1하는 속성
기본적으로 그룹을 지정해야하고 같은 이름으로 해줘야 그룹이 된다.

Apple Banana Cherry

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

---

2. 전역속성

HTML에서 속성은 열린 태그에 작성하며, 기능을 확장 하는 개념이다. 각각의 요소들은 속성이 지정되어있는데(예를들어, img태그에는 src속성을 사용) 전역속성은 전체영역에서 사용 가능하다.

<태그 title="설명"></태그>

요소의 정보나 설명을 지정

<태그 style="스타일"></태그>

요소에 적용할 스타일(CSS)을 지정

<태그 class="이름"></태그>

요소를 지칭하는 중복 가능한 이름

• 하나의 요소에 이름을 부여하는 이유
• CSS에는 요소를 선택하는 선택자 개념이 있다. class를 사용하면 요소 선택하고 선택된 부분에만 원하는 요소를 적용할 수 있기 때문다.

<태그 id="이름"></태그>

요소를 지칭하는 고유한 이름

• Class 처럼 중복이 가능하지 않다. 그러다 보니 자주사용하게 되지는 않고 중복이 안되는 핵심적인 부분에 사용한다.
• #은 CSS에서 id를 지칭하는 선택자

<태그 data-이름="데이터"></태그>

요소에 데이터를 지정

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

• data 라고 입력하고 하이픈 붙인 후 원하는 이름을 명시하면 된다.
• 속성의 값으로는 원하는 데이터, 데이터는 기본적으로 문자데이터
• 특정 text입력하면 그것이 데이터가 되는 것
• 용도 : 이 속성과 값이 작성되어있는 그 요소에 특정한 데이터를 잠시 저장하는 용도. 저장하는 데이터를 js에 사용할 때 (CSS도 사용 가능)