[HTML] tag 모음 2

< i 태그 >

- i 태그 혹은 이탈릭(Italic) 태그는 글씨를 기울임꼴로 만드는데 사용한다.

- 시멘틱(sementic) : 없음

- em 태그와 같이 보기 

 

< em 태그 >

- EM 태그 혹은 강조(Emphasize) 태그는 I 태그와 똑같이 생겼으나 시멘틱이 있음.

- 시멘틱(Sementic) : 있음

- i 태그와 같이 보기

 

< h태그 >

- 문서나 구획의 제목을 담기위해 사용한다.

- h1부터 h6 까지의 태그를 사용하며 <h1>이 가장 상위 제목, <h6> 가 가장 하위 제목이다.  

- 시멘틱 : 있음

 

< iframe 태그 >

- iframe 태그 혹은 아이프레임 태그는 외부 웹 페이지를 현재 페이지 내에 조각으로 삽입하고자 할 때 사용한다.

- 시멘틱(Sementic) :  없음

- 속성

  - src : 표시할 HTML 페이지의 주소를 입력한다.

  - width :  가로크기, 픽셀단위, 사용안함.

  - height : 세로크기, 픽셀단위, 사용안함.

- 보안상의 이유로 막혀있는 대상이 많다.

 

< img 태그 >

- img 태그 혹은 이미지(Image) 태그는 이미지를 삽입하기 위해 사용한다.

- 시멘틱(Sementic) : 있음

- 속성

  - src : (Source) 표시할 이미지의 경로를 지정한다.

  - alt : (Alternative) 위 src 속성의 경로를 탐색하지 못했을때 표시할 대체 텍스트. 혹은 시각 장애인을 위한 이미지에 대한 설명을  TTS 가 읽을때의 값이다. 이 속성이 없으면 HTML5 표준 위반.

  - width : 이미지의 가로크기를 픽셀 단위로 지정한다. 잘 안씀

  - height :  이미지의 세로크기를 픽셀 단위로 지정한다. 잘 안씀

 

< form 태그 >

- form 태그(양식 태그)는 서로 관련있는 input, select 등의 사용자 입력 값을 받는 태그 들을 묶어내는 역할을 한다.

( 로그인 폼, 회원가입 폼 등 ... )

 

< label 태그 >

- label 태그는 input 태그를 감싸서 해당 input의 간략한 정보나 종류를 전달하기 위해 사용한다.

 

< select 태그 >

- option 태그는 드롭다운(Drop Down) 방식의, 주어진 선택지 중 하나만 선택할 수 있게끔 하는 태그이다.

  (input 의 radio 와 역할은 같음)

- 속성

  - name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.

 

< option 태그 >

- option 태그는 <select> 태그의 구성요소이다. 표시 텍스트는 태그 안에, 해당 선택지의 값은 value 속성을 이용한다.

- 속성

  - disabled :  해당 option을 선택하지 못하도록 한다. 속성값은 부여하지 않는다.

  - selected : 해당 option이 선택된 상태로 초기화한다. 속성값은 부여하지 않는다.

  - value : 해당 option을 선택했을 경우 실제 서버로 전송할 값.

 

< optgroup 태그 >

- 유사한 <option>을 ㅈ묶어내는 역할을 하나, 이는 시각적 요소에 국한되어 있고 실제 역할은 없다고 할 수 있다.

- 속성

  - label : 표시할 텍스트를 지정한다.

 

< input 태그 >

- input 태그는 사용자에게 값을 받는 용도로 사용된다.

- 입력 받은 값은 주로 서버로 전송한다.

- 속성

  - autofocus : 페이지가 로드되었을 때 해당 속성을 가진 input요소가 포커스를 가지게 한다. 속성값은 부여하지 않는다.

  - checked : type이 checkbox 이거나 radio 인 경우 선택(체크) 된 상태로 지정한다. 속성 값은 부여하지 않는다.

  - disabled :  해당 input 요소를 사용하지 못하게 한다. 속성값은 부여하지 않는다.

  - max : type 이 number 인 경우 그 값의 최대값을 지정한다.

  - min : type 이 number 인 경우 그 값의 최소값을 지정한다.

  - maxlength : 값의 최대 길이

  - minlength : 값의 최소 길이

  - multiple : type 이 file 인 경우 파일을 두 개 이상 선택할 수 있게 한다. 속성값은 부여하지 않는다.

  - name : (상당히 중요) 사용자가 입력한 값을 서버가 식별하기 위해 사용하는 식별자다.

  - pattern : 정규식(Regular Expression) 을 통해 값을 필터한다.

  - placeholder : 값이 비어있을때 표시할 힌트 메세지

  - readonly : 해당 input의 값을 변경하지 못하게 한다. 속성 값은 부여하지 않는다.

  - required :  빈 값을 허용하지 않음. 속성 값은 부여하지 않는다.

  - value :  버튼(button,reset,submit)이 아닐때, 초기 값을 지정한다. 버튼의 경우 표시할 버튼 텍스트를 지정한다.

  - type : input 태그의 종류를 지정한다. 가능한 값은 아래와 같다.

    - "button" :  그냥 버튼. 아무일도 안함.

    - "checkbox" : 체크박스 필드. 여/부 값을 받기 위해 사용한다.

    - "email" :  이메일 필드. 입력받는 값이 이메일이라면 반드시 해당 타입 값 사용

    - "file" :  파일 필드. 주로 파일을 업로드 할 때 사용한다. (프로필 사진 선택, 첨부파일 추가 등)

    - "number" : 숫자를 입력받기 위한 필드.

    - "password" : 비밀번호 필드. 입력 문자가 보이지 않음.

    - "radio" : name 속성 값이 같은 radio 중에 하나만 선택하게 하기 위해 존재.

    - "reset" : 초기화 버튼. 해당 초기화 버튼이 포함되어 있는 <form>태그 내부의 모든 input의 값을 초기화 한다.

    - "submit" : 제출버튼. 해당 제출 버튼이 포함되어있는 <form> 태그 내부의 모든 값을 서버로 전송한다.(로그인, 회원가입 , 글 작성 버튼 등)

    - "tel" : 연락처 필드. 입력 받는 값이 연락처라면 반드시 해당 타입 값 사용.

    - "text" : 일반 텍스트. type 속성 생락시 기본값.