html은 웹을 다룰 때 제일 먼저 사용하고, 배우는 프로그래밍 언어(엄밀하게 말하자면 프로그래밍 언어는 아닌 마크업 언어)입니다. 보통 웹을 만들 때, html을 뼈대, css는 건물 꾸미기, javascript는 건물의 기능(엘리베이터 등등)이라고 합니다. 뼈대인 html부터 부실하게 공부하면 부실 공사가 되지 않을까 하는 생각입니다. 그렇기에 html, css, javascrpt를 공부하는 중, 복습이 필요 할 것 같아 공부 내용에 대한 글을 블로그에 써 나가기로 결심했습니다.
이번에는 html에 등장하는 태그들의 정리입니다. 각 태그의 기능과 속성 등을 정리하도록 하겠습니다.
HTML 태그 정리
블럭 라인 엘리먼트(즉 div태그는 문서 한 줄을 통째로 잡아먹는다. 즉, div를 넣으면 줄바꿈이 된다.)
인라인 엘리먼트.(span 태그는 안에 담긴 요소까지만 공간을 차지한다. 즉, span은 줄바꿈이 되지 않는다.)
블럭 라인 엘리먼트인 <div>태그는 한 줄 전체를 차지하는 반면 인라인 엘리먼트인 <span> 태그는 글자 크기만큼의 공간만 차지한다.
 |
 |
div태그와 span태그 비교(태그 둘에 border적용함)
<div>태그
<span> 태그
<link> : 외부 파일을 연결할 때 사용
*link태그 속성
| 속성명 | 설명 |
| rel | 현재 문서와 외부 리소스 사이의 연관 관계를 명시 |
| href | 링크될 외부 리소스의 URL을 명시 |
<img> : 이미지를 삽일 할 때 사용
*img태그 속성
| 속성명 | 설명 |
| src | 가져올 사진 소스의 URL을 명시 |
| alt | 이미지를 가져오는 데 실패할 경우 보여줄 대체 텍스트 명시 |
*ol태그 속성
| type 속성 값 | 설명 |
| <ol type="1"> | 숫자 순서 |
| <ol type="a"> | 영어 소문자 순서 |
| <ol type = "A"> | 영어 대문자 순서 |
| <ol type = "i"> (소문자 아이) | 로마숫자 소문자 순서 |
| <ol type = "I>(대문자 아이) | 로마숫자 대문자 순서 |
 |
 |
<table> : 테이블을 생성, 테이블 관련 태그를 감싸는 태그
*table태그 속성
| border | 테이블 셀의 선 처리 |
| bordercolor | 테이블 테두리의 색상 설정 |
| bgcolor | 배경색 설정 |
| width | 테이블의 가로폭을 설정 |
| height | 테이블의 세로폭 설정 |
| cellpadding | 셀과 컨텐츠(셀 내의 이미지, 텍스트 등)의 간격 조절(셀의 안쪽) |
| cellspacing | 셀과 셀 사이의 간격 조절(셀의 바깥쪽) |
| align | 테이블 정렬(테이블 내 컨텐츠의 정렬이 아닌, 테이블 자체 정렬) |
| 테이블 안에 포함되는 태그들 |
| <tr> : 테이블의 행을 의미, th, td등을 내부에 가짐 |
| <th> : 테이블의 제목을 의미하는 태그, 글자 기본값은 굵게 처리, 셀 내 가운데 정렬 |
| <td> : 테이블에서 데이터를 넣는 태그, 즉 셀을 의미 |
- 예시 1) html에서 테이블에 속성 값 주기
- 예시 2) CSS로 속성 설정하기
<HTML>
<CSS>
<결과>
<form> : 폼을 생성함, 다양한 입력 양식을 감싸는 태그
*form태그 속성
| 속성명 | 설명 |
| method | 전송 방식을 설정 1) get : 256~4096 byte까지만 전송, 디폴트값임 2) post : 입력 내용의 길이에 제한을 두지 않음 |
| name | 폼을 식별하기 위한 이름, 서버로 보낼 때 보내질 데이터 값 |
| action | form이 전송될 서버 주소 또는 링크 |
| target | 폼 데이터를 서버에 제출 후, 응답이 열릴 위치 명시 |
| 폼 안에 포함되는 양식들 |
| <button> : 버튼을 생성함 type : - submit : 폼을 전송하는 버튼 - reset : 폼 내부 요소를 초기화하는 버튼 - button : submit되지 않는 버튼. js등으로 컨트롤 할 때 사용 |
| <input> : 사용자가 입력 가능한 필드를 생성 |
| <label> : 사용자 인터페이스의 라벨을 정의, 다른 요소와 결합 가능 결합 : label의 for속성 값과, 다른 요소의 id속성 값이 같아야함 |
| <option> : select나, datalist태그 내부에 위치, 드롭다운 리스트의 값으로 사용 |
<select> : 드롭다운 리스트를 정의, option태그와 연결 *select 속성 size : 콤보박스에서 화면에 노출되는 항목 개수 지정 multiple : 콤보박스에서 여러 항목을 선택 가능하도록 selected : select내부 option태그에 지정. 기본값으로 해당 option이 선택된 상태로 만듬. |
| <optgroup> : option태그를 감싸는 형태로 사용. 해당 옵션들의 그룹 이름을 지정 <select> <optgroup label="그룹명"> <option value="옵션1">옵션1</option> <option value="옵션2">옵션2</option> </optgroup> </select> |
<textarea> : 사용자가 입력 가능한 택스트 영역 정의 |
| <fieldset> : form 태그 안에 사용하여 다양한 내부 요소를 그룹 지을 수 있음(박스모양 테두리) |
| <legend> : fieldset태그와 함께 사용하여 이름을 붙임 |
- 예시
버튼, 인풋, 라벨, 셀렉트(내부에 옵션), 텍스트에리어 순서
+ form 내부 태그에 사용 가능한 각종 속성
disabled : 해당 요소를 비활성화함, 입력 요소는 텍스트 입력 불가, 목록 상자는 선택 불가, 버튼 요소는 클릭 불가
readonly : 해당 요소를 읽기 전용으로 변경, input등에 사용시 입력은 불가능하지만 복사 등은 가능.
maxlength : 입력 가능한 글자 수 제한
checked : 해당 요소를 선택된 상태로 표시. checkbox태그나 radio태그에 사용
placeholder : 입력 값에 대한 힌트를 보여줌
audio, video태그
<audio> : 오디오 파일을 삽입
<audio src=”오디오 파일 경로” controls> </audio>
<video> : 비디오 파일을 삽입
<video src=”비디오 파일 경로” controls></video>
* controls속성을 사용해야 컨트롤 패널이 브라우저에 노출된다.
<source> : audio태그나 video태그 내부에 사용하여 경로와 미디어 타입을 명시. 브라우저마다 지원하는 미디어 타입(ex .mp3 등)이 다를 경우 사용 가능.
<source src=”파일 경로” type =”미디어 타입”>
'컴퓨터 > 웹 : HTML' 카테고리의 다른 글
| [HTML] html 시맨틱 태그란? 시맨틱 태그를 사용해야하는 이유 (0) | 2023.05.09 |
|---|---|
| [EJS] 3개의 ejs태그 간단 정리(<%- %>와 <%= %> 차이) (0) | 2022.12.27 |
| [HTML]엔티티 코드(Entity Code)란? 엔티티 코드 사용 이유와 사이트 (0) | 2022.12.23 |
댓글