티스토리 뷰
<HTML 태그 정리>
<내용> - 태그임
ex) 실행시 예제임
(ddd) 뭐의 줄임말인지 알랴쥼
*속성 속성임
<문단 관련 태그>
<br> - 줄바꿈 기능이 있는 홑태그 (line break)
<p> - 문단을 나누고 한줄의 여백을 띄어줌, text-align 으로 문단정렬을 처리 (paragraph)
<pre> - 문서 내용에 편집되어있는 모든 여백, 탭, 줄바꿈 등을 모양 그대로 화면에 보여줌
<span> - 문장 내에서 일정 부분에 색상 변경등의 스타일을 지정하는 인라인 태그 (span - 범위)
<hr> - 주제번경, 내용구분등을 위해 수평선을 삽입 (horizontal rule)
<div> - 높이와 너비를 가진 독립된 영역을 만들어 웹페이지 화면에 블록 구조로 표현. (division)
<텍스트 관련 태그>
<H1> ~ <H6> - 제목을 표시하는 태그, 숫자가 클수록 글자크기는 작다 (heading)
<abbr> - 축약어를 표현함. *title 로 지정하면 마우스를 올리면 화면에 말풍선으로 나타남
<meter> - 측정값을 그래픽(그래프)형태로 표현
사용예) <meter value=”측정값” min=”최소값” max=”최대값”>
<time> - 작성된 날짜를 사람뿐만 아니라 기계도 알아볼 수 있게 하는 시맨틱 태그.
사용예) <time datetime=”날짜, 시간(2016-06-25T15:30:00)”> 내용 </time>
<텍스트 효과 태그>
<address> - 주소나 연락처의 의미로 기울임
<cite> - 책, 그림등의 제목을 알리는 의미로 기울임
<em> - 강조의 의미로 기울임 (emphasis)
<i> - 이탤릭체로 기울임 표현 (italic)
<b> - 강조의 의미로 굵게 (bold)
<strong> - 강한 강조의 의미로 굵게
<blockquote> - 긴글 인용문을 들여쓰기 처리 (quote - 인용하다)
<q> - 짧은 글 인용문을 “큰따옴표” 처리 (quote)
<mark> - 하이라이트 마크 표현, 형광펜 처럼 (mark - 표시하다) [ex) 흐헑]
<ruby> - 루비문자 선언 (동아시아 문자들에서, 글자위에 작게 발음 설명이 들어감) -->
<rt> - 루비문자의 설명(발음)표현
<sub> - 아래 첨자 표현 (subscript) [ex) X2]
<sup> - 위 첨자 표현 (superscript) [ex) H2O]
<del> - 가운데 줄이 들어간 글자 표현 (delete) [ex) 으아ㅏ아아아]
<목록 관련 태그>
<!-- 목록은 중첩하여 사용할 수 있다. →
<ol> - 항목앞에 순서를 표현하여 목록을 만든다. (ordered list)
*type : 1(숫자), a,A(알파벳 소, 대문자), i,l(로마자 소, 대문자)
*start : 시작 숫자를 지정
*reversed : 숫자를 역순으로 정렬
---<li> - 목록에 항목을 추가 (list item)
<ul> - 항목앞에 순서없이 목록을 만든다 (unordered list)
*type : square(네모), circle(동그라미)
---<li> - 목록에 항목을 추가
<dl> - 정의 목록 (definition list)
--- <dt> 정의 항목 용어 (definition term)
--- <dd> 정의 항목 용어 설명 (definition description)
ex) 졸라 큰 회사임. 나도 가고싶당 핡핡 |
<이미지 관련 태그>
<img> - 이미지파일을 삽입 (imagine dragons)
*src - 이미지의 경로 지정
*alt - 이미지가 보이지 않을때 출력할 대체 텍스트
*title - 마우스 올릴 시 보여줄 추가 설명
*width/height - 가로/세로길이 설정
<하이퍼링크 관련 태그>
<a> - 다른 문서, URL연결 (anchor - 닻 (배에다는 그거))
*href - 연결할 문서의 경로 또는 URL지정
*target - _blank - 새로운창에서 열기
- _self - 현재 탭에서 열기
*title - 마우스 올릴시 추가 설명
<a> - 문서 내에서 스크롤 이동할때, 클릭를 누르면 내용임으로 스크롤 이동
<a href=”#id”>클릭</a>
<a id=”id”>내용임</a>
<표관련 태그>
<table> - 표를 정의
<tr> - 행을 구성 (table row)
<td> - 열을 구성 (table data)
<th> - 행,열의 머리말, 가운데 정렬및 굵은글씨 표현 (table head)
사용 예)
<table>
<tr>
<th> </th>
<th>월</th>
<th>수</th>
<th>금</th>
</tr>
<tr>
<th>1교시</th>
<td rowspan="2">국어</td>
<td>수학</td>
<td>영어</td>
</tr>
<tr>
<th>2교시</th>
<!-- 병합되었으므로 쓰지 않음 -->
<td>과학</td>
<td>사회</td>
</tr>
</table>
ex)
월 | 화 | 수 | |
1교시 | 국어 | 수학 | 영어 |
2교시 | 과학 | 사회 | |
<멀티미디어 관련 태그>
<video> 재생 안될시 대체 텍스트 (생략가능) </video>
*src - 비디오파일 경로 설정
*autoplay - 자동 재생 기능
*controls - 컨트롤 바 표시
*poster - 동영상 재생이 안될 시 대체이미지
*width, height - 가로/세로 길이 지정
<source> - 만약 브라우저에서 해당 확장자를 지원하지 않을 시 준비해 둔 다른 확장자의 동영상 실행
*src - 비디오파일 경로 설정
*type - 비디오 파일의 타입 지정 (video/egg , video/mp4 등...)
<audio> 재생 안될시 대체 텍스트(생략가능) </audio>
*src - 오디오파일 경로 설정
*autoplay - 자동 재생 기능
*controls - 컨트롤 바 표시
*loop - 반복 재생 기능
<source> - 만약 브라우저에서 해당 확장자를 지원하지 않을 시 준비해 둔 다른 확장자의 오디오 실행
*src - 오디오파일 경로 설정
*type - 오디오 파일의 타입 지정 (audio/ogg , audio/mp3 등...)
<embed> - 비디오/오디오/플래시 파일 등 플러그인이 설치된 또는 필요한 멀티미디어 파일을 재생
*src - 파일 경로 설정
*type - 비디오 파일의 타입 지정
*width, height - 가로/세로 길이 지정
<폼태그>
폼이란 사용자의 입력, 출력을 지원하는 양식을 포함하여 사용자와 상호작용이 이루어지는 영역 전반의 의미한다.
사용자와의 대화 창구를 구성하는 대표적인 마크업 기술.
폼 태그는 각종 양식과 함께 작성되며, 양식이 작성될 그룹을 자동으로 만들어준다.
<form> - 폼 영역을 구성하는 태그
<필드셋과 캡션>
<fieldset> - 입력, 출력등의 여러 폼 양식요소들을 함께 묶어 그룹화 시켜 범위를 지정한 것.
<legend> - 그룹화 한 범위에 캡션을 단다.
<입출력 폼>
<select> - 선택 리스트 만듦 (공간을 아끼기위해서 사용)
*name - 콤보박스와 리스트박스의 이름 지정
*size - 목록크기를 지정하여 형태를 결정 (1: 콤보박스 or 2이상 : 리스트)
*multiple - 여러개의 목록을 선택하는 기능지원
<option> - select에 항목 추가
<datalist> - 텍스트 입력 필드와 <select>필드를 연계하여 텍스트 입력 필드에 선택 목록이 나오게함
<input type=”text” list=”id”>
<datalist id=”id”>
<option>AAA</option>
<option>BBB</option>
</datalist>
</input>
<textatra rows=”행” cols=”열”> 기본 입력값 </textatra>
*name - 텍스트 영역의 이름 지정
*rows - 행수 지정 (지정한 행수가 넘어가면 자동으로 스크롤 바 생성)
*cols - 열수 지정
<input>
*id - id값 지정 (중복 불가)
*name - 입력 필드의 이름 지정. 서버로 전송할때 변수명으로 사용함. (중복 가능)
*size - 입력 필드의 크기 지정 (가로크기만)
*value - 초기 문자열 지정
*maxlength - 문자열의 최대길이 지정
*placeholder - 힌트 표시기능
*autofocus - 커서를 자동으로 표시해줌
*checked - 항목입력 필드에 자동으로 선택표시로 지정
*required - 입력 필드 내용이 작성여부 판단
*type - 입력 타입 지정
text - 텍스트를 입력받음
password - ●●●● 으로 표시된 텍스트 입력받음
2. radio - 제시된 항목중 하나만 선택할 때 사용
checkbox - 제시된 항목을 다중 선택할 때 사용
3. submit - 입력받은 모든데이터를 서버로 전송하는 버튼 만듦
reset - 입력받은 내용들을 지워주는 버튼 만듦
4. email - 이메일을 입력받음
url - 웹 페이지의 주소 입력받음
<!--위 둘은 유효성 검사 기능이 있음→
5. number - 스핀컨트롤 형식으로 수치를 입력받음
range - 슬라이드 컨트롤로 수치를 입력받음
min - 최솟값
max - 최댓값
step - 간격값
value - 초깃값
6. file - 사용자의 컴퓨터에서 파일 선택
search - 검색하고자 하는 정보의 검색 단어를 입력하는 양식
multiple - 다중선택 지원
accept - 파일 형식 지정 (사용 예) accept=”image/jpg”
7. date - 날짜의 연, 월, 일
month - 연도와 월
week - 연도와 주
time - 시간 선택
datetime - 날짜와 시간
'배운 것 > HTML, CSS, JS' 카테고리의 다른 글
| DOM 객체를 찾는 3가지 방법 (0) | 2017.12.15 |
|---|