태그와 요소

• 요소 : html 페이지 구성하는 부품
  • 생성방법에 따른 요소 구분
    - 내용 o : <h1> hello world </h1>
    - 내용 x : <img>, <br>
    
    
• 태그 : 요소를 만들 때 사용하는 작성 방법
  +) 흔히 요소와 태그 구분 X

속성

• 태그에 추가 정보 부여
  

기본 태그

글자 태그

1. <h1></h1> : heading 제목 태그
2. <p></p>: paragraph 문단를 정의하는 태그
   • 앞뒤로 자동 줄바꿈이 생김 (블록 요소)
   • 연속된 공백과 줄바꿈은 하나의 공백으로 처리
3. <br> : break 줄바꿈
4. <hr> : horizontal rule 수평 줄
   
   
5. <a href="주소"> </a> : anchor 앵커 태그, 다른 웹 페이지나 파일로 이동

글자 모양 태그

목록 태그

1. <ul></ul> : unordered list
2. <ol></ol> : ordered list
3. <li></li> : list item 목록 요소 생성

table 태그

<table></table> : 표 삽입

• 가장 기본적인 구조
  • <tr></tr> : 테이블의 행 row
  • <td></td> : 테이블의 데이터 셀 (세로줄)
• thead : 제목 줄
  • <th></th> : 테이블의 제목 셀
    • 굵은 글씨
      • 가운데 정렬
• tbody
• tfoot : 가장 아래 행
• 병합
  • colspan : 행 병합
  • rowspan : 열 병합

-> 화면이 변경될 때 복잡해서 잘 사용하지 않음음

미디어 태그

img

<img src="" alt="대체 텍스트" width="" height="">

• inline 기준
• 랜덤 이미지
  • https://picsum.photos/
  • https://dummyimage.com/

audio

• <audio src="" controls></audio>

video

• <video controls src=”.mp4” type=”video/mp4”></video>

입력 양식 태그

form 양식

• 사용자로부터 입력을 받기 위한 양식을 만드는데 사용
  • action : 폼 데이터를 전송할 서버의 URL
  • method : 데이터 보낼때 전송 방식 (GET, POST)
    • GET 방식 : 주소에 데이터를 입력해서 전달, 크기가 한정됨(주소에 데이터가 모두 들어가 있음) → text 스타일만 가능
    • POST 방식 : 주소를 변경하지 않고 비밀스럽게 데이터를 전달, 용량 제한X → 벡엔드에서 받아서 처리

input 태그

• 속성
  • type : 입력 필드의 종류
  • id : 요소의 고유 식별자
  • name : 서버로 전송될 때 사용되는 이름
  • value : 입력필드의 초기값
• type 종류
  

Type	Example	Description
text		글자 입력 양식 생성
button	button	버튼 생성
checkbox		체크박스 생성
file		파일 입력 양식 생성
hidden	(보이지 않음)	해당 내용 표시 안 함
image		이미지 형태 생성
password		비밀번호 입력 양식 생성
radio		라디오 버튼 생성
reset		초기화 버튼 생성
submit		제출 버튼 생성
textarea		여러 행의 글자 입력 양식 생성, cols는 너비를 지정하고 rows는 높이를 지정

• label 태그 : for="id이름" 을 통해 연결

  <label for="연결되는 id 값">name : </label>

• select 태그
  • option
  • multiple : 중복
  • optgroup label=”그룹이름” : 그룹화
  • css 적용x
    
• field set : 그룹으로 묶기
  - <legend>이름</legend>
  

문서 구조화

공간 분할 태그

• 영역(범위) 지정 태그

블록 형식

한 행을 모두 차지
1. 줄바꿈 : 블록 요소
2. 너비와 높이 조절 : width, height로 값을 지정 가능
3. margin, padding이 상하좌우 모두 적용가능

• 대표적인 태그 : div, p, h1~h6, ul, ol, li. table, form, 시멘틱 태그(header, footer, main, article, section) …

인라인 형식

content 만큼만 차지, 줄바꿈 X 다음 내용 출력
1. 줄바꿈 없음
2. 내용물의 크기만큼 공간을 차지
3. 넓이와 높이는 지정 불가능
4. margin, padding 좌우만 조절 가능

• 대표적인 태그 : a, span, em, small, sup, sub → 글자와 관련

시맨틱 태그

태그에 의미를 부여