HTML 핵심 요소

1. 블록(상자) 요소

• div 태그 : 특별한 의미가 없는 구분
• h1 태그 : 제목(Heading)
  • 숫자 커질수록(h2,h3,..,h6) 중요도 낮아짐
  • 보통 h2~h4 많이 사용
  • CSS reset 적용하면 글자크기 전부 같아지므로 의미에만 중점
    🌟HTML은 구조를 만드는 역할일 뿐! (CSS가 예쁘게 해줄거야)
• p 태그 : 문장(Paragraph)
• ul 태그 : 순서 없는 목록의 집합(Unordered List)
  • 자식 태그 li : 블록 요소, 목록 내 각 항목(List Item)
  • ul>li*4 입력 후 Enter치면 ul태그 안에 li태그 4개 생성
  • 순서 있는 목록의 집합은 ol 태그

2. 인라인(글자) 요소

• span 태그 : 특별한 의미가 없는 구분
• img 태그 : 이미지 삽입 시 사용
  • 필수 속성 src, alt
• a 태그 : 페이지 이동하는 하이퍼링크 지정(Anchor)
  • 필수 속성 href : 링크 URL 지정
  • 속성 target : 링크URL 표시 위치 설정, 값을 _blank로 지정하면 새 탭에 열림
• br 태그 : 줄바꿈(Break)
  • HTML 코드 자체의 줄바꿈은 적용이 안됨 -> 꼭 br 사용

+3. 인라인-블록 요소

• 인라인 베이스로 수평방향으로 쌓이나 가로세로 크기 및 상하좌우 여백 조정 가능
• input 태그 : 사용자 데이터 입력
  • 필수 속성 type : 입력받을 데이터 타입 (text, checkbox, radio..)
    • type="text" : 속성 value로 미리 입력된 값(수정 가능), 속성 placeholder로 입력할 값의 힌트 설정, disabled(속성 값X)로 입력요소 비활성화
    • type="checkbox" : 속성 checked(속성 값X)로 이미 체크된 상태 설정, label태그(inline요소)로 래핑하면 글씨 눌러도 체크되는 효과 설정
    • type="radio" : name="이름" 속성 같이 지정 -> 같은 이름을 가진 그룹 중 택1 하도록 설정

+4. 블록요소 -> 테이블 요소

• table 태그 : 행(row)과 열(column)의 집합
  • 자식요소로 tr태그(행) + td태그(열)