- 이미지 관련 태그
1) <img src="경로"> : 이미지 삽입 태그
2) <img src="경로" alt="대체 텍스트"> : alt는 이미지가 에러 현상으로 보이지 않는 경우나, 화면 낭독기가 이미지 대신 인식할 때 필요한 텍스트를 표현
3) <img src="경로" width="크기" height="크기"> : width는 이미지의 가로 크기, height는 이미지의 세로 크기 태그
4) <figure>과 <figcaption> : <figure>로 웹 문서에서 이미지와 텍스트 등을 한 단위로서 묶을 수 있고, <figcaption>을 추가하면 이미지에 설명 글을 붙일 수 있음
*웹에서 사용 가능한 이미지 파일 형식 - GIF, JPG/JPEG, PNG, SVG
*경로 설정법 - 현재 위치하고 있는 HTML 문서에서 이미지 파일이 있는 곳까지 찾아가기 위한 경로로 설정, '/'는 하위 폴더를 지칭, '..'는 한 단계 위의 폴더로 올라가는 것. 경로는 웹 상의 링크로도 가능
//경로 설정
//1. 이미지 파일이 현재 있는 파일과 같은 위치에 있을 때
<img src="이미지파일명.파일형식"> //파일명만 적음
//2. 이미지 파일이 현재 있는 파일의 바로 아래 단계의 하위 폴더에 있을 때
<img src="하위폴더명/이미지파일명.파일형식">
//3. 한 단계 위의 파일로 올라갔다가, 다시 하위 폴더로 내려와 이미지 파일을 찾아야 할 때
<img src="../하위폴더명/이미지파일명.파일형식">
- 링크 관련 태그
1) <a href="링크할 주소">텍스트</a> : 텍스트를 클릭하면 링크한 주소로 이동시키는 태그. 텍스트 대신 이미지 삽입도 가능
2) <a href="링크할 주소" target="속성 값"> : target의 _blank는 새 탭에서, _self는 현재 화면에서, _top은 전체 화면으로 띄우는 속성 값
3) anchor 태그 : 한 문서 안에서 해당하는 위치로 점프할 수 있도록 하는 태그. id나 클래스 속성을 이용
4) <map>, <area>태그와 usemap 속성 : 하나의 이미지에 여러 링크를 만들 수 있는 태그. <map>으로 이미지 맵을 만들고, 같은 아이디로 이미지 태그에 usemap 속성을 설정. 이미지 내 링크를 만들 영역은 <area>으로 설정
- 폼 관련 태그
1) <form> : 폼 생성 태그. method 속성은 서버로 넘겨줄 방식을, name 속성은 폼의 이름을, action 속성은 form의 데이터를 보낼 서버를 지정하고, autocomplete 속성은 이전에 입력했던 내용을 바탕으로 자동으로 내용을 완성함
2) <label> : 폼 요소에 이름을 붙이는 태그. 라벨 태그 내에 form의 요소인 input 태그를 넣거나, 라벨의 for와 input 태그의 id를 동일하게 설정하여 연결하는 방식으로 사용. input 중 체크박스나 라디오 버튼에서 사용하면 텍스트까지 선택 영역을 넓힐 수 있다.
3) <fieldset>, <legend> : <fieldset>으로 폼 요소를 그룹으로 묶고, <legend>를 통해 폼 요소에 제목을 붙일 수 있음
4) <input> : 사용자가 입력하는 부분을 만드는 태그. id 속성으로 input 태그 구별 가능.
- input type
hidden : 화면에는 보이지 않고, 입력된 내용을 서버로 함께 보낼 수 있음
text : 텍스트를 입력할 수 있는 영역을 만듦
password : 비밀번호 타입의 텍스트로, 일반 텍스트와 달리 입력 시 기호로 나타남
radio, checkbox : 라디오에 있는 버튼처럼 생긴 라디오 버튼을 만듦, 체크박스는 말 그대로 체크박스. 차이점은 라디오 버튼은 1개만 선택이 가능하지만 체크박스는 중복 선택이 가능함
submit : 폼에 입력된 정보를 서버로 전송
button : 버튼을 만듦, 버튼 클릭 시 동작하는 기능은 자바스크립트 함수를 통해 추가 시 가능
- input 속성
autofocus : 페이지를 불러오자마자 원하는 요소에 마우스 커서 표시 가능
placeholder : 텍스트 입력 시 입력에 필요한 힌트를 제공, 입력을 시작하면 사라짐
readonly : 읽기 전용 필드로 작성은 불가
required : 필수 필드 지정, 미입력 시 오류 메세지 나타남
size, minlength, maxlength : 텍스트의 길이 제한
5) <select>, <optgroup>, <option> : <select>로 드롭다운을, <option>으로 드롭다운의 선택지들을, <optgroup>으로 드롭다운 내에서 선택지들을 구분지어주는 태그
6) <datalist>, <option> : <datalist>는 드롭다운 형태로 <option>으로 만들어진 선택지들을 보여주지만, <select>와 다르게 드롭다운이 아닌 텍스트 필드로 <option>에서 선택지를 고르면 텍스트에 자동으로 입력해줌
7) <progress>, <meter> : <progress>로 진행상태를, <meter>로 진행상태나 값이 차지하는 크기를 좀 더 구체적으로 설정 가능
참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>
'TIL' 카테고리의 다른 글
| <CSS> 레이아웃 (1) - 박스 모델 (0) | 2021.11.18 |
|---|---|
| <CSS> 기초 개념 (0) | 2021.11.17 |
| <HTML> 기본 태그들 (1) (0) | 2021.11.15 |
| <자바 Java> 기본 API - StringTokenizer 클래스 (0) | 2021.11.14 |
| <자바 Java> 컬렉션 프레임워크(Collection Framework) (1) - List (0) | 2021.11.13 |