#1. Level (block & inline)
Block level 요소
: 화면의 가로 전체(100%) 영역을 사용하는 요소
div, h1~h6, p, hr, ul, ol, dl, table, tr, td, form, fieldset, figure, figcatipn 등
Inline level 요소
: 요소의 내용 만큼만 영역을 사용하는 요소
span, a, b, strong, i, em, img, iframe, audio, video, input, textarea, label, button, select, q, mark, time 등
특성
- Inline level 요소는 Block level요소 안에 넣어서 사용 해야 함
- Block level 요소 안에는 또 다른 Block level 요소를 넣어서 사용 가능
- 예외 : h1~h6, p, address 태그는 다른 Block level요소를 넣어서 사용 불가능
#2. Element 1(General & a & img & list)
<!doctype html>
html문서라는 정의 태그
<title>
웹페이지의 제목 정의
<meta charset="utf-8">
웹페이지를 utf-8로 오픈하라는 코드
<h1~h6>
제목 : 크기는 순서대로 사용 해야 함 (section태그 바로 아래에는 제목 태그가 들어가야한다.)
<hr />
구분선
<br />
줄바꿈
<p>
문단
<q>
인용구
<strong>
강한 강조
<em>
약한 강조
<address>
사이트의 정보, 주소, 연락처 등을 작성
<a>
링크 추가
*프로퍼티*
href : 링크가 연결 되는 주소 ( mailto:메일주소 작성 시, 메일 프로그램 실행되는 링크 적용 )
target : 새 창이 열리는 지
title : 링크에 호버 됐을 때 뜨는 툴팁
<img />
이미지 추가
*프로퍼티*
src : 이미지의 경로
alt : 이미지에 대한 설명(웹 접근성)
loading : 이미지의 로딩에 대한 설정
longdesc : 설명이 너무 길 경우 html파일을 연결함
<ol> <ul> <dl> + <li>
리스트
*설명*
ol : 순서형목록
ul : 비순서형 목록
dl : 정의형 목록
li : 리스트 태그
*특성*
- ol과 ul의 자식으로는 li밖에 올 수 없음
- dl의 자식으로는 dt,dd밖에 올 수 없음 ( dt:제목, dd:설명)#3. Element 2 (table & form & select & input)
<table>
테이블 : 기본적으로 머리/몸통/하단 으로 나누어져 있음
<caption> : 테이블 제목
<tr> : 행 / <th> : 제목 열 / <td> : 내용 열
*구분*
내용을 가로로 나눌 때 : <thead>, <tbody>, <tfoot>
내용을 세로로 나눌 때 : <colgroup>
<# scope속성> : 웹 접근성에 의한 제목 셀 내용 설명
<# rowspan속성> : 행 병함
<# colspan속성> : 열 병합
- th가 2개 이상 포함된 td는 id,headers로 웹 접근성을 준수해야 함<form>
주로 로그인 폼 형식을 위해 사용 함
폼은 여러개의 <fieldset>으로 구성되어 있고, <filedset>의 제목은 <legend>로 지정 함
<form action="/" method="post">
기본적인 폼의 속성
*특성*
- <filedset>내의 각종 요소들은 <input />으로 넣음
- <input />에서 폼의 전송 까지 가능하도록 코드 작성 가능
- 웹 접근성 준수를 위해 label의 for속성과 input의 id속성을 동일하게 설정 해야 함
예시)
<label for="userId">#</label>
<input type="text" id="userId" placeholder="#" autofocus required /><select>
리스트 형식의 선택란을 설정
<option value=””>
리스트의 내용을 지정
<optgroup laber=””>
option태그에서 지정한 내용의 그룹을 설정
<input type=”text”> 태그에 데이터 리스트를 통해 <select>태그처럼 리스트화 할 수 있음
<label for="cardtype">카드선택</label>
<input type="text" id="cardtype" list="card" />
<datalist id="card">
<option value="비씨카드" label="비씨카드"></option>
<option value="국민카드" label="국민카드"></option>
<option value="하나카드" label="하나카드"></option>
</datalist>input 타입 종류
<input type=”” />
여러가지 타입의 버튼이나 입력란을 추가| 종류 | 설명 |
|---|---|
| text | 텍스트 입력란 |
| textfield | 장문 텍스트 입력란 (행과 열을 cols, rows 속성으로 설정 가능) |
| password | 비밀번호 입력란 (텍스트 작성 시 불릿으로 나타남) |
| number | 숫자 입력란(증감버튼 있음, min:최소값 / max:최대값 / value:초기값 / step:증감 단위 속성 적용) |
| range | 슬라이드 버튼 (min:최소값 / max:최대값 / value:초기값 / step:증감 단위 속성 적용) |
| search | 검색창 |
| image | 이미지 삽입 |
| tel | 전화번호 입력란 (모바일에서 숫자 키패드가 나옴) |
| 이메일 입력란 (모바일에 키패드에서 at, .com 등 메일과 관련된 단어 나옴) | |
| url | 사이트 주소 입력란 |
| radio | 라디오 버튼 (여러개 중 한개만 선택되게 하기 위해서 name속성을 꼭 추가 해야함) |
| checkbox | 체크박스 버튼 |
| file | 파일 첨부 버튼 |
| photo | 사진 첨부 버튼 |
| submit | 폼을 전송하는 버튼 |
| reset | 취소버튼 |
| button | 일반버튼 |
| hidden | 숨겨진 버튼 |
| date | 캘린더 |
| color | 색상 선택 버튼 |
input 프로퍼티 종류
<input type=”” 속성>| 프로퍼티 | 설명 |
|---|---|
| required | 빈 칸이 있는 경우 submit 시 알려주는 속성 |
| autofocus | 창이 열렸을 때 커서가 처음부터 입력 할 수 있게 깜빡이는 속성 |
| size | 칸의 크기 조절 |
| max&minlength | 최대/최소 입력 글자 수 제한 |
| readonly | 읽기 전용 |
| disabled | 비활성화 |
| autocomplete | 자동 완성 |
| placeholder | 힌트 텍스트 |
#4. Audio & Video
<audio 프로퍼티>
오디오 삽입, 자식으로 <source src=”#” type=”audio/mp3(wav,ogg)” /> 태그를 넣어 사용
*프로퍼티*
autoplay : 자동재생
controls : 조절버튼
loop : 반복재생
<video 프로퍼티>
비디오 삽입, 자식으로 <source src=”#” type=”video/mp4(ogg,webm)” /> 태그를 넣어 사용
*프로퍼티*
width : 가로
heigth : 세로
poster : 썸네일
autoplay : 자동재생
controls : 조절버튼
loop : 반복
muted : 무음
<iframe>
소스코드 복사해서 영상을 넣거나 할 때 사용할 때 사용 (주로 유튜브 동영상)#5. Other element
<ins>
추가글(밑줄)
<pre>
text의 공백 모두 적용
<b>
텍스트 볼드체
<del>
삭제글(취소선)
<code>
텍스트를 코드로 인식
<small>
텍스트 작게
<sup>
윗첨자
<mark>
키워드 강조(형광펜)
<sub>
아래첨자
<i>
텍스트 기울임
<progress>
다운로드 진행표시줄
*프로퍼티*
max : 최대값
value : 초기값
<meter>
범위가 지정된 요소 표시줄
*프로퍼티*
min : 최소값
max : 최대값
value : 초기값
low : 저점제한
high : 고점제한
optimum : 범위 내의 최적값
<figure>
차트, 그래프, 이미지, 소스코드, 다이어그램 등을 구분
요소들의 제목은 <figcaption>태그로 지정
https://kyledev.tistory.com/