핵심 요소

div (Division)

-<div></div> : 특별한 의미가 없는 구분을 위한 요소 (block 요소)

• 어떠한 영역을 나눌 때 사용
• 문장인가? 뭐지 헷갈릴땐 그냥 div 쓰기

h1 (Heading)

- <h1></h1> : 제목을 의미 하는 요소(block 요소) 

• 목차 역할 
• 숫자가 커질수록 부제목 숫자가 작을 수록 중요한 제목이다.

p (Paragraph)

- <p></p>: 문장을 의미하는 요소 (block 요소)

• 문장을 묶어주는 요소 

ul (Unodrdered List) / li (List Item)

-<ul></ul> : 순서가 필요없는 목록의 집합을 의미(block 요소)

• 주관적인 순서일경우 많이 사용

-<li></li> : 목록 내 각 항목 (block 요소)

img (Image)

-<img /> : 이미지를 삽입하는 요소 (inline  요소)

• 필수 속성 src: 이미지 소스의 파일 경로, alt: 이미지 로드 되지 않았을때 설명해주는 글 

a (Anchor)

-<a></a> : 다른/ 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (inline 요소)

• 필수 속성 href  경로를 입력해준다 
• target 속성 새로운 페이지가 열릴때 어디에 표시 될지 쓰는 속성

span 

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

• 해당 묶은 부분를 css 줄때 좋다 

br(Break)

-<br / > : 줄바꿈 요소(inline 요소)

• 인위적으로 줄바꿈 처리 할때 

input 

-<input /> : 사용자가 데이터를 입력하는 요소 (inline-block 요소)

• type 입력받을 데이터 타입을 지정하는 속성
• vaule 속성 미리 입력된 값(데이터)
• placeholder 사용자에게 힌트 준다
• disabled 입력 요소 비활성화 
• type에는 text, checkbox(다중선택),radio(택 1) 다양한 값이 올수 있다
• checked 체크박스 입력 요소가 체크 됨 
• name 그룹화 할때 

label 

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

 

table

-<table></table> : 표 요소 행(Row)과 열(Column)의 집합 (table 요소)

 

tr

- <tr></tr> :행을 지정하는 요소 (table 요소)

 

td

- <td></td> : 열을 지정하는 요소 (table 요소)

---

keypoint

html 구조를 나타내는 것이지 꾸미는 것이 아니다 

각자 인라인 블록 요소는 css에서 활용됨으로 알아두자

 

느낀 점

태그에 속성이 어떤것이 있을지 궁금하다

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐