HTML5 문서 구조 및 주요 태그

Benjamin·2025년 2월 21일

html5의 문서 구조:

  • <!DOCTYPE html>: 문서 타입을 선언하는 태그
  • <meta charset="utf-8">: 메타 태그에 charset속성을 사용하면 해당 문서의 문자 인코딩을 지정할 수 있다. utf-8이 표준
  • <link href="test.css" rel="test.css" >:외부 css를 현재의 html문서로 가져오기 위한 링크를 연결할 때 사용 한다.
  • <script> 태그: 자바스크립트 코드를 기술 할 때 쓴다. 코드를 html문서 내부에 쓸경우 <script> 자바스크립트 코드 </script> 이렇게 쓴다

주요 태그:
1 시맨틱/구조적 태그(엘리먼트)
문서의 영역 구조를 나누는 블록 요소인 <div> 태그를 대체해서 문서를 구조적으로 표현 하는데 사용 된다.

  • header, nav, article, aside, footer등등...
    section은 문서의 내용을 표시하는 태그로, 영역적인 의미로 사용하는데, article, section, div등 아무거나 사용해도 된다.
  • 그 밖의 시맨틱 태그: figure, figcaption, mark, meter, progress...

2 웹 폼 태그 - 입력 폼을 구성하는 태그
form 과 /form 사이에 체크박스, 입력란등 사용자 입력을 받는 문구로 구성된다.

속성
action: 입력된 값을 넘겨줄 페이지의 url을 지정
autocomplete: 폼에 입력값을 자동완성
enctype: 입력된 값을 넘길때 인코딩 방식을 지정
method: post, get등 입력된 값을 처리 페이지로 넘길때 http방식을 지정
name: 폼의 이름을 지정
target:처리 페이지의 타겟을 지정

웹 폼 테그
input: 텍스트, 라디오 버튼, 체크박스 등등
select: 드롭박스를 만들 때 사용
textarea: 여러줄을 입력받는 필드
button: 버튼
.
.

0개의 댓글