요소(Element)

<태그>내용</태그>

<태그> =>상위(조상) 요소
	<태그> => 부모 요소
    	<태그>내용</태그> =>자식 / 하위(후손) 요소
    </태그>
</태그>

+) 닫힌태그가 없는 태그도 있음(img) 붙여도 상관X

기능 확장

<태그 속성="값">내용</태그>

글자와 상자

: 요소가 화면에 출력되는 특성 크게 2가지 [인라인/블록]

인라인(Inline)요소

: 글자를 만들기 위한 요소

span

<span></span>
: 대게 특별한 의미 없는 구분을 위한 요소

• 요소가 수평으로 쌓임
• 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 가로/세로 너비 지정 불가! (width, height 반응X)
• <span><div></div></span> 불가X
  <span><span></span></span> 가능O

블록(Block)요소

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

div

<div></div>
: 대게 특별한 의미 없는 구분을 위한 요소

• 요소가 수직으로 쌓임
• width : 부모 요소의 크기만큼 자동으로 늘어남
  height : 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 가로/세로 너비 지정 가능! (width, height 반응O)
• <div><div></div></div> 가능O
  <div><span></span></div> 가능O

속성 class / id

class

<태그 class="이름"></태그>
: 요소를 지칭하는 중복 가능한 이름

id

<태그 id="이름"></태그>
: 요소를 지칭하는 고유한 이름

태그 종류

h (h1~6)

<h1>대제목</h1>
: 제목을 의미하는 요소 (폰트크기 1>6)

h태그의 숫자의 의미

1. 제목의 크기
2. 대제목(h1), 중제목(h2), 소제목(h3)
   -숫자가 작을 수록 중요도가 높다 (남발 금지)

p

<p>안녕하세요, 저는 문장이라고 합니다.</p>
: 문장을 의미하는 요소 (Paragraph)

img

<img src="./cat.jpg" alt="고양이">
: 이미지 삽입하는 요소 (Image)

• ★인라인 요소★
• src : 이미지 경로
• alt : 대체 택스트 (이미지가 로딩되지 않을 경우)

ul / li

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

ul : 순서가 없는 목록 (unordered List)
li : 순서가 있는 목록 (List Item)

a

<a href="https://velog.io/">velog</a> -> velog
: 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (Anchor)

• ★인라인 요소★
• 속성 target="_blank" => target : 링크 URL의 표시 위치 , "_blank" : "새 탭"에 링크 로드

br

안녕<br/>반가워
: 줄바꿈 요소 (Break)

• ★인라인 요소★

input

<input type="입력받을 데이터 타입">
: 사용자가 데이터를 입력하는 요소

• ★인라인 요소 + 블록 요소★ = Inline-block
• 속성 placeholder="내용" => 사용자가 입력할 값의 힌트! ->

type 종류

1. text : 텍스트
2. email : 이메일 형식이 아닐 시 오류
3. password : 입력시 .... 으로 보임 ->
4. date : 날짜 선택 ->
5. checkbox : 체크박스 ->
6. radio : 체크박스 ->
   -radio는 중복선택 불가!(택1) 단, 중복 불가하려면 name으로 그룹이름을 지정해줘야함)

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

AppleBanana

label

<label></label>
: 라벨 가능 요소(input)의 제목

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

=> 네모상자를 클릭하지 않고 글자를 클릭해도 선택이 가능

textarea

<textarea>긴 문장</textarea>
: 여러 줄의 긴 문장을 입력할 수 있는 양식

col 가로 크기
row 세로 크기
placeholder 힌트 텍스트

대표적인 블락 요소

article, section, div

<article> 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용
<section> 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용
<div> 요소 간 논리적 관계와는 상관없이 요소를 나눠야 할 때 사용

• <article>과 <section>은 <div>로 대치해도 기능상의 문제가 없다. (<header>,<footer>도 마찬가지)