HTML SEMANTIC TAG(HTML 시맨틱 태그) -2-

<br />

• break

• 줄바꿈을 설정

• 줄간격을 만들때는 p태그에 line-height 활용할 것

<del>

• 삭제된 텍스트의 범위를 지정

• cite, datetime 등의 속성을 가짐

<ins>

• 새로 추가된 텍스트의 범위를 지정

• cite, datetime 등의 속성을 가짐

<img>

• 이미지를 삽입

• src: 이미지 URL(필수)

• alt: 이미지의 대체 텍스트(필수)

• srcset: 브라우저에 제시할 이미지 URL과 원본 크기의 목록을 정의(image.png 400w, image.png 700w, image.png 1000w)

• sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록 정의((max-width: 500px) 444px, (max-width: 800px) 777px, 1222px)

• *w unit: w단위(Width descriptot)는 이미지의 원본 크기(가로 너비)를 의미함

• *x unit: x단위는 이미지의 비율을 의미함

<audio>

• 소리콘텐츠를 삽입

• autoplay: 준비되면 바로 재생

• controls: 제어 메뉴를 표시

• loop: 재생이 끝나면 다시 재생

• preload: 페이지가 로드될 때 파일 로드 여부를 지정

• src: 콘텐츠의 URL

• mured: 음소거 여부

<video>

• 동영상 콘텐츠를 삽입

• autoplay: 준비되면 바로 재생

• controls: 제어 메뉴를 표시

• crossorigin: 가져오기가 CORS를 사용해 수행 되어야 하는지 여부(동일한 출처인지를 확인하는 정보)

• loop: 반복재생

• muted: 음소거 여부

• poster: 동영상 썸네일 이미지 URL

• preload: 페이지 로드시 파일 로드 여부 지정

• src: 콘텐츠 URL

• width: 동영상 가로 너비

• height: 동영상 세로 너비

<figure>, <figcaption>

• figure는 이미지나 삽화, 도표 등의 영역을 설정

• figcaption은 figure에 포함되어 이미지나 삽화 등의 설명을 표시

<iframe>

• 다른 HTML 페이지를 현재 페이지에 삽입

• 유튜브나 스크랩 등을 할 때 주로 사용함

• name: 프레임의 이름

• src: 포함할 문서의 URL

• width: 프레임의 가로너비

• height: 프레임의 세로너비

• allowfullscreen: 전체화면 사용 여부

• frameborder: 프레임 테두리 사용 여부

• sandbox: 보안을 위해 읽기 전용으로 삽입

<canvas>

• Canvas API나 WebGL API를 사용해 그래픽이나 애니메이션을 랜더링 함

• 그림을 그리는건 자바스크립트를 이용해야 함

<script>

• 스크립트 코드를 문서에 포함하거나 참조

• async: 스크립트의 비동기적 실행 여부

• crossorigin: 별도의 도메인을 사용하는 사이트(CORS)의 오류 로깅을 허용하기 위해 사용

• defer: 문서 파싱 후 작동 여부

• src: 참조할 외부 스크립트 URL

• type: MIME 타입

<noscript>

• 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의

• 옛날에는 쓰였지만 지금은 거의 안씀

<table>, <tr>, <th>, <td>

• 데이터 표의 행(줄)과 열(칸)을 생성

• Table Row, Table Header, Table Data

• border-collapse: collapse; -> 셀들간의 간격 없앰

<th>

• 머리글 칸을 지정

• abbr: 열에 대한 간단한 설명

• headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값

• colspan: 확장하려는 열의 수

• rowspan: 확장하려는 행의 수

• scope: 어떤 것의 머리글 칸인지 명시

<td>

• 일반 칸을 지정

• headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값(th에 있는 id값을 연결 해야함

• colspan: 확장하려는 열의 수

• rowspan: 확장하려는 행의 수

<caption>

• 표의 제목을 설정

• 열리는 table 태그 바로 다음에 작성해야 함

• table당 하나의 caption만 사용 가능

<colgroup>, <col>

• 표의 열들을 공통적으로 정의하는 컬럼과 그의 집합

• span: 연속되는 열의 수

<thead>, <tbody>, <tfoot>

• 표의 머리글, 본문, 바닥글을 지정

• 레이아웃에서는 차이가 보이지않고 의미적인 부분임

<form>

• 웹서버에 정보를 제출하기 위한 양식 범위를 정의

• form이 다른 form을 자식 요소로 포함할 수 없음

• action: 전송한 정보를 처리할 웹페이지의 URL

• autocomplete: 사용자가 이전에 입력한 값으로 자동완성 기능을 사용할 것인지 여부

• method: 서버로 전송할 HTTP 방식(Get: 전송시에 URL에 내용이 담겨서 전송 됨/Post: 전송시에 내용을 URL에 담아서 보내지는 않는 방식, 둘 다 암호화 필요함)

• name: 고유한 양식의 이름

• novalidate: 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정

• target: 서버로 전송 후 응답받을 방식을 지정

<input />

• 사용자에게 입력 받을 데이터 양식

• autocomplete: 자동 완성기능의 사용여부

• autofocus: 페이지가 로드될 때 자동으로 포커스

• checked: 양식이 선택되었음을 표시

• disabled: 양식을 비활성화

• form: <form>의 id 속성 값을 통해 연결

• name: 양식의 이름

• placeholder: 사용자가 입력할 값의 힌트

• type: 입력받을 데이터의 종류

• value: 양식의 초기 값

• maxlength: 값의 최대 입력 가능한 길이 설정

Type의 값

• button: 일반 버튼

• checkbox: 체크박스

• color: 색상

• emaile: 이메일

• file: 파일

• hidden: 보이지 않지만 전송할 양식

• image: 이미지 제출 버튼

• number: 숫자

• password: 비밀번호

• radio: 라디오 버튼(재클릭을 해도 해제가 안됨, 택1 해야하는 경우에 주로 사용)

• range: 범위 컨트롤

• reset: 초기화

• search: 검색

• submit: 제출버튼

• tel: 전화번호

• text: 일반텍스트

• url: URL주소

<label>

• 라벨 가능 요소의 제목

• for: 참조할 라벨 가능 요소의 id속성값

• for를 통해 id와 연결하여 묶을 수 있음

• label태그 안에 태그 넣어서 활용도 가능함

<button>

• 선택 가능한 버튼을 지정

• autofocus: 페이지 로드시 자동으로 포커스

• disabled: 버튼을 비활성화

• form: form의 id속성 값

• name: 폼 데이터와 함께 전송되는 버튼의 이름

• type: 버튼의 타입(reset, submit, button)

<textarea>

• 여러 줄의 일반 텍스트 양식

• rows: 양식의 줄 수

<fieldset>, <legend>

• 같은 목적의 양식을 그룹화(fieldset) 하고

• 제목을 지정(legend)

<select>

• 옵션을 선택하는 메뉴

• multiple: 다중 선택 여부

• name: 선택 메뉴의 이름

• size: 한번에 볼 수 있는 행의 개수

• select 태그 안에는 option태그를 이용해 메뉴 제공 해야 함

<optgroup>

• option을 그룹화

• label: 옵션 그룹의 이름

<option>

• select나 datalist에서 사용될 옵션

• 빈태그로도 사용 가능함

• disabled: 옵션 비활성화

• label: 표시될 옵션의 제목

• selected: 옵션이 선택 되었음을 표시

• value: 양식으로 제출될 값

<datalist>

• input에 미리 정의된 옵션을 지정해 자동완성 기능을 제공하는데 사용

• input의 list값과 datalist의 id값이 동일해야 연결이 됨

<progress>

• 작업의 완료 진행률을 표시

• max: 작업의 총량

• value: 작업의 진행량

• max를 설정하지 않은 경우 0~1사이의 숫자를 value값으로 넣어야 함