HTML 태그 정리

김명래·2022년 9월 5일
0

html

목록 보기
1/1

Html 태그 정리
기본 태그들
Head – -> 문서의 제목

~

- 웹 페이지의 제목이며 굵기가 가장 굵은 것이 h1 이다.

- 단락 구분 태그.

 - 문단 태그.
 - 굵은글씨 (bold)
 - 밑줄 글씨(under line)
 - 줄 관통(strike)
- 윗첨자
- 아래첨자
 - 기울임
 강조표시
하이퍼 링크 태그

-	Herf : 클릭시 이동할 link
-	요소를 지정하여 이동하는 방식도 가능
-	Target(링크를 여는 방법)
	_self : 현재페이지(기본값)
	_blank : 새 페이지
	_parent : 부모페이지
	_top : 최상위 페이지
	프레임이름 

목록관련 태그

    : unordered List (순서가 없는 List)
      : ordered List (순서가 있는 List) - type :  I -> 로마자로 구분  A -> alphabet으로 구분  Reversed -> 역순으로 구분
    1. : ul 과 ol 의 자식요소로 사용하는 태그.

      표(테이블) 관련 태그

      - Border -> table에 선굵기를 지정할 수 있다. : 테이블을 삼등분하여 관리하기위해 헤드부분을 명시해준다. : 바디부분을 명시해준다. : 푸터부분을 명시해준다. : table에 새로운 row(행) 을 추가할 때 사용하는 태그
      : 테이블의 제목을 나타낼 때 사용하는 태그
      : tr에 자식 요소로 사용되며 table head 부분에 행 값을 입력할 때 사용한다. : tr에 자식 요소로 사용되며 table body부분에 행 값을 입력할 때 사용된다. , type - Colsapn : 행에 있는 칸과 합칠만큼을 속성값으로 제시 - Rowspan : 열에 있는 칸과 합칠만큼 속성값으로 제시 - Align : 행데이터의 정렬을 속성값으로 제시. 영역관련 태그
      - Block속성태그이기 때문에 한 행을 모두 사용한다. - P 태그 역시 같은 block 형식 - Div와 같은영역관련 태그이나 inline속성태그이기에 한줄에 가능한 만큼 서로 붙어서 나오는 특징.

      시맨틱 태그

      : 웹 문서의 머릿글 : 대체적으로 header 의 자식요소로 사용하며 웹 문서의 menu 영역 : 웹 문서의 주요 주제 : 주제 세부내용 : 주제와 관련이 적거나 상대적으로 덜 중요한 내용을 작성하는 영역 : 해당 문서의 저자, 저작권 정보등을 명시하는 바닥글을 작성하는 영역 사진 태그 : image 를 삽입할 때 사용하는 태그 - Type :  Src : 파일의 경로를 속성값으로 넣는다.  Alt : img의 설명을 속성값으로 넣는다. - Width,height 존재.

      미디어 관련 태그

      : audio를 삽입하고싶을 때 사용하는 태그

      • Src : audio의 경로
      • Controls : 컨트롤러 표시
      • 기본 구조는 같으나 브라우저마다 지원하는 기능이 다를 수 있음으로 개발시 호환성을 체크한다.
      - Src : video의 경로를 속성값으로 제시 - Controls : 컨트롤러 표시 - Width,height 존재

      양식 제출 관련 태그

      : input 태그에 값을 적으면 server로 전달할때에 name속성의 이름으로 값을 담아 전달한다. 이를 전달하려면 반드시 submit 요소를 사용해야한다. - Name : 서버로 전달시 이 이름으로 전달된다. - Value : 속성값으로 제시한 것이 기본값으로 들어가 있음. 상황에따라 태그의 글처럼 적혀짐(ex. Button, submit, reset) - Placholder : 이 태그의 내용을 속성값으로 제시하면 사용자가 보고 어떤 값을 넣어야 하는 요소인지 파악할 수 있다 - Required : 필수 작성요소로 지정하고싶을 때 기술한다. - Type :  Text : text 를 입력받을 수 있음.  Password : password를 입력받을 수 잇음.  Submit : 버튼 형식으로 click시 action 으로 값 전달  Reset : reset button  Number : 입력창에 스핀 형태로 숫자를 입력받음.  Range : 슬라이드 바 형태로 값을 받아옴.  Date : 년, 월, 일을 입력받음  Month : 월-일을 입력받는다.  Radiobox : 필수적으로 선택해야하며 한가지만 선택할 수 있는 checkbox  Checkbox : 필수 선택이 아니며, 중복 선택이 가능하다  Color : color 를 입력받기가 가능하다.  File : file을 입력받는 것이 가능  Hidden : 보이지 않는 태그  Button : 기존의 submit button 보다 더 다양한 모양을 제공하기위해 별도로 확장된 태그  Tel : 전화번호를 입력받을 때 사용하는 타입  url : 주소를 입력받을 때 사용하는 태그.

      : 콤보박스를 생성해주는 태그 multiple : 기술시 다중선택을 가능하게한다. : 사용자에게 추천 목록을 제시하는 태그 ( 자동완성 ) : 위에기술한 (select,datalist,textarea) 태그의 자식 요소로 사용되며 태그 사이에 넣는 텍스트로 사용자가 볼수있는 식별자 역할을 한다. Value : 사용자가 식별자를 클릭하게되면 얻는 실제 값

      • Cols : 열길이 (글자 단위로 받는다)
      • Rows : 행길이 (글자 단위로 받는다)

      : 테두리를 만들어주는 역할

      : filedset에 자식요소로 사용되며 제목을 정할 수 있게 해준다. : 폼의 약싱에 붙는 태그이다. - For : 양식에 id 속성값과 같은 속성값을 주면 양식과 연결된다.또는 label 태그 안에 양식을 넣어도 연결할 수 있다.

      $nbsp -> 공백

profile
독자보다 필자를 위해 포스팅합니다

0개의 댓글