기초부터 천천히

개발/HTML

HTML 태그 모음

생각외로깔끔함 2023. 1. 17. 19:48
728x90
반응형

 

HTML 태그 모음

 

 

  1. <!DOCTYPE html> : 웹 문서의 유형을 html로 지정
  2. <html lang="ko"> : 문서를 html로 시작하며 언어는 한국어
  3. <head> : 브라우저 웹사이트의 정보를 입력하는 부분
    1. <meta> : 메타 데이터 입력, UTF-8과 같은 인코딩 값을 의미
    2. <title> : 문서(홈페이지) 제목
  4. <body> : 문서(홈페이지) 내용
  5. <header> : 헤더 영역
  6. <main> : 메인 영역
  7. <section> : 콘텐츠 영역
  8. <aside> : 사이드 바 영역
  9. <footer> : 푸터 영역
  10. <nav> : 내비게이션 영역, 다른 문서(홈페이지)로 연결할 때 사용
  11. <article> : 독립적인 콘텐츠를 사용할 때
  12. <div> : 여러 소스 묶기
  13. <h1> : 제목체, h2~6까지 사용 가능
  14. <p> : 단락, 문단
  15. <br> : 줄 바꿈, 닫기 필요 없음
  16. <blockquote> : 인용문, 들여쓰기 적용됨
  17. <strong> : 텍스트 굵게
  18. <b> : 텍스트 굵게(단순한 굵기)
  19. <em> : 텍스트 기울임, emphasis, 주로 강조용으로 사용
  20. <i> : 텍스트 기울임, italic, 단순히 기울임
  21. <u> : 텍스트 밑줄
  22. <s> : 텍스트 취소선
  23. <abbr> : 줄임말
  24. <cite> : 참고 내용
  25. <code> : 소스 코드
  26. <small> : 작은 텍스트
  27. <sub> : 아래 첨자
  28. <sup> : 위 첨자
  29. <ins> : 공동작업문서에 새로운 내용 삽입
  30. <del> : 공동작업문서에 기존 내용 삭제
  31. <li> : 목록 생성, 자식
  32. <ol> : 순서가 있는 목록, ordered list
    1. type="1" : 숫자(기본값)
    2. type="a" : 영문 소문자
    3. type="A" : 영문 대문자
    4. type="i" : 로마 숫자 소문자
    5. type="I" : 로마 숫자 대문자
    6. start="3" : 3부터 시작
  33. <ul> : 순서가 없는 목록, unordered list
  34. <dl> : 설명 목록
    1. <dt> : 설명할 용어, Term
    2. <dd> : 설명할 내용, Description
  35. <table> : 테이블
    1. <caption> : 표 제목
    2. <tr> : 행 삽입
      1. <td> : 셀 삽입
      2. <th> : 셀 삽입(진하게 표시)
    3. <thead> : 표 중 제목, 여러 페이지에 걸쳐 고정 가능
    4. <tbody> : 표 중 본문
    5. <tfoot> : 표 중 요약, 여러 페이지에 걸쳐 고정 가능
  36. <rowspan="2"> : 2개의 행 합치기
  37. <colspan="2"> : 2개의 열 합치기
  38. <colgroup> : 여러 열을 지정할 때 사용
  39. <img> : 이미지 삽입
    1. src : source, 이미지 파일 경로
    2. alt : 대체용 텍스트
    3. width : 가로 크기 조절, %나 px로 조절 가능
    4. height : 세로 크기 조절, 위와 동일
  40. <object> : 기본, 닫기 태그 필요
    1. width : 너비
    2. height : 높이
    3. data : 파일
  41. <embed> : 기본, 닫기 태그 필요 없음
    1. src : 파일 경로
    2. width : 너비
    3. height : 높이
  42. <audio> : 기본, 플러그인 피요 없이 브라우저에서 바로 재생, html 5부터 적용
    1. src : 오디오 파일 경로
  43. <video> : 기본
    1. audio와 video 공통 속성들
    2. control : 컨트롤 바 표시
    3. autoplay : 자동 재생
    4. loop : 반복 재생, 크롬 브라우저에서 비디오 자동 재생을 위해선 muted autoplay loop로 사용
    5. muted : 음소거
    6. preload : 로딩 방법, 사용값으로는 auto(기본값)와 metadata 그리고 none이 있음
    7. width와 height : 너비와 높이
    8. poster : 재생 전 포스터, 사용할 파일 이름 설정
  44. <a> : 하이퍼링크 삽입
    1. href : 링크 주소
    2. target : "_blank"를 사용하면 새 탭에서 열림
  45. <form> : 사용자의 데이터를 서버로 전송하는 기능
    1. method : 넘기는 형태
      1. get : 사용자 입력 내용이 드러나게 서버로 넘김
      2. post : 사용자 입력 내용이 드러나지 않게 서버로 넘김
    2.  name : 자바스크립트로 폼 이름 지정
    3. action : 서버 프로그램 지정
    4. target : 열어볼 파일 위치 지정
    5. autocomplete : 자동 완성 기능 지정(기본값 on)
    6. fieldset : 폼 내부에서 구역을 나눔
      1. legend : 구역 제목 붙이기
  46. <label> : 레이블, 라벨, for="접목시킬 이름" 을 사용하여 일치시킬 수 있음
  47. <input> : 입력값
    1. type=""에 들어가는 속성들
    2. text :  한 줄 텍스트
    3. password : 비밀번호
    4. search : 검색
    5. url : url 주소
    6. email : email 주소
    7. tel : 전화번호
    8. checkbox : 체크박스 (중복 체크)
    9. radio : 라디오 버튼 (중복 아닌 체크)
    10. number : 숫자 스핀 박스(버튼으로 숫자 조절)
    11. range : 숫자 슬라이드 막대
    12. date : local - 연, 월, 일
    13. month : local - 연, 월
    14. week : local - 연, 주
    15. time : local - 시, 분, 초, 분할 초
    16. datetime : UTC - 연, 월, 일, 시, 분, 초, 분할 초
    17. datetime-local : local - 연, 월, 일, 시, 분, 초, 분할 초
    18. submit : 전송 버튼
    19. reset : 리셋 버튼
    20. image : submit 버튼 이미지
    21. button : 일반 버튼
    22. file : 파일 첨부 버튼
    23. hidden : 사용자에게 보이지 않는 필드
  48. text, password와 같이 쓰이는 속성들
    1. size : 화면에 출력할 글자 수
    2. value : text 필드에 보여줄 내용, password에서 사용 안함
    3. maxlength : 최대 입력 가능한 글자 수
  49. checkbox와 radio에서 같이 쓰이는 속성들
    1. value : 서버에 전달될 값
    2. checked : 기본으로 선택하고 싶은 항목
    3. name : radio 전용, 여러 옵션의 공통 이름
  50. number와 range에서 같이 쓰이는 속성들
    1. min : 최소값(기본값 0)
    2. max : 최대값(기본값 100)
    3. step : 조정할 단위값(기본값 1)
    4. value : 초기값
  51. submit과 reset에서 같이 쓰이는 속성들, 버튼
    1. value : 버튼에 표시할 내용
  52. image에서 같이 쓰이는 속성들
    1. src : 이미지 경로
    2. alt : 대체 텍스트
  53. button에서 같이 쓰이는 속성들
    1. value : 버튼에 표시할 내용
    2. onclick : 클릭 시 실행할 JS 함수
  54. input의 다른 주요 속성들
    1. autofocus : 페이지 불러오자마자 마우스 포인터가 표시(값은 "autofocus")
    2. placeholder : 힌트를 표시, 내용을 입력하면 사라짐
    3. readonly : 읽기 전용(값은 "readonly" 혹은 "true")
    4. required : 필수 입력 필드(값은 "required")
  55. input 이외의 주요 태그들
    1. <textarea> : 여러 줄의 텍스트 입력 영역
      1. rows : 세로 줄 수, 긴 경우엔 스크롤 막대 생성
      2. cols : 가로 너비(문자 단위)
    2. <select> : 드롭다운 목록 생성
      1. size : 항목 개수
      2. multiple : 둘 이상의 항목을 선택
      3. option : 옵션, value(서버에 전달될 값), selected(기본 선택 항목)
    3. <datalist> : 미리 입력된 데이터 목록
      1. <option value=> : 서버에 전달될 값
    4. <button> : 버튼
      1. type="submit" : 폼을 서버로 전송
      2. type="reset" : 폼 초기화
      3. type="button" : 일반 버튼, <input type="button">과 같은 의미

 

 

 

출처 : https://yunbinni.tistory.com/63

 

HTML 태그 모음 & 요약정리

기본 태그 태그 의미 웹 문서의 유형을 html로 지정 문서를 html로 시작, 언어를 한국어로 지정 문서 구조 태그 태그 의미 헤더 영역 메인 영역 콘텐츠 영역 사이드 바 영역 푸터 영역 태그 의미 내

yunbinni.tistory.com

728x90
반응형
저작자표시

'개발 > HTML' 카테고리의 다른 글

HTML 정리  (0) 2022.09.13

'개발/HTML'의 다른글

  • 현재글HTML 태그 모음

관련글

티스토리툴바