[HTML] elements and attributes 1

공부하면서 나름대로 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🔮 콘텐츠 구분

<h1> 1부터 6단계가 있고, 숫자가 낮을 수록 높은 단계의 제목 </h1>

<header> 로고, 제목, 검색을 포함 </header>

<footer> 작성자, 저작권, 관련문서를 포함 </footer>

<article> 독립적으로 구분, 재사용 가능한 영역 </article>

<section> 문서의 일반적인 영억, h1~을 포함하여 식별 <section>

<aside> 문서의 별도 콘텐츠, 광고나 링크 사이드바 <aside>

<nav> 다른페이지 링크 제공, 메뉴, 목차, 색인 </nav>

<div> 아무것도 나타내지않는 콘텐츠 영역, 꾸미는 목적 </div>

🔮 문자 콘텐츠

<ol> 정렬된 목록, 순서 및 중요도를 알수있음 (Ordered List) </ol>

<ul> 정렬되지 않은 목록 (Unordered List) </ul>

<li> 목록 (List Item) </li>

ol과 ul은 자식으로 li만 포함가능

<ol start='번호' type='번호의 유형(a, A, i, I, 1)'> 
	<li value=1> 1번은 토마토입니다 </li> 
    <li value=2> 2번은 고등어입니다 </li> 
</ol>

<p> 하나의 문단 (Paragraph) </p>

<hr/> 문단의 분리 (Horizontal Rule)

<pre> 텍스트의 공백과 줄바꿈을 작성한 데로 유지, 글꼴 monospace (Preformatted Text) </pre>

<blockquote cite='인용정보url'> 인용문 (Block Quotation) </blockquote>

🔮 인라인 텍스트

<a> 하이퍼링크 (Anchor) </a>

<abbr> 약어, title속성을 사용하여 설명제공 (Abbreviation) </abbr>

<b> bold처리 (Bring Attention) </b>

<i> 기울임처리 </i>

<em> 단순한 의미 강조, 기울임처리, 중첩가능, 중첩될수록 의미가 강해짐 (Emphasis) </em>

<strong> 의미의 중요성을 나타냄, bold처리 (Strong Importance) </strong>

<q cite='인용정보url'> 짧은 인용문 (Inline Quotation) </q>

<code> 컴퓨터 코드로 보여짐 (Inline Code) </code>

<kbd> 텍스트 입력장치(키보드의)의 사용자입력을 나타냄 (Keyboard Input) </kbd>

<span> 나타나지않는 콘텐츠 영역 </span>

<br/> 줄바꿈

a 속성

<a href='url' rel='URL과의 관계(prev)' target='URL표시 위치 (_self, _blank)' type='URL MIME타입(text/html)'>

🔮 멀티미디어

img와 속성

<img />  이미지 삽입

<img alt='로고' src='이미지URL' width=가로너비 height=세로너비>

<img alt='로고' src='이미지URL' srcset='url과 원본크기의 목록' size='미디어조건에서 이미지 최적화 크기'>

이미지태그에서 Cross Origin 발생할 경우

<img src="<URL>" crossorigin="anonymous">   // crossorigin 속성은 src 뒤에 위치한다.

audio와 속성

<audio /> 소리 콘텐츠 

<audio autoplay='준비되면재생(bool)' controls='제어메뉴표시(bool)' loop='끝나면 다시재생(bool)' src='콘텐츠URL' muted='음소거여부(bool)'> </audio>

<audio controls loop>
	<source src="./resources/BGM.mp3" type="audio/mpeg">
</audio>

preload 문서로드시, 파일을 로드할지 지정 (none, metadata, auto)
autoplay가 지정된 경우, preload는 무시됨

video와 속성

<video> 동영상 콘텐츠 </video>

<video autoplay='준비되면재생(bool)' controls='제어메뉴표시(bool)' loop='끝나면 다시재생(bool)' src='콘텐츠URL' muted='음소거여부(bool)' width='가로너비' height='세로너비' poster='썸네일URL'> </video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.

<!-- 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다. -->
<video src="videofile.ogg" autoplay **poster**="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos,
</video>

<!-- 사용자가 자막을 선택할 수 있습니다. -->
<video src="foo.ogg">
  <track **kind**="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track **kind**="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

figure와 속성

<figure> 이미지나 삽화, 도표 등의 영역 </figure>
<figcaption> **figure**에 포함되어 이미지나 삽화 등의 설명을 표시 (Figure Caption) </figcaption>

<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption> 우유 그림 입니다 </figcaption>
</figure>

🔮 내장 콘텐츠

iframe과 속성

<iframe> 다른 HTML 페이지를 현재 페이지에 삽입 </iframe>

<iframe src='포함문서URL' frameborder='프레임사용여부(0,1)' width='가로너비' height='세로너비' name='프레임이름' allowfullscreen='전체화면 사용여부(bool)' sandbox='보안 읽기전용'></iframe>

canvas와 속성

<canvas> 그래픽이나 애니메이션을 랜더링 </canvas>

<canvas width='가로너비' height='세로너비'></canvas>

canvas 속성img의 이미지를 blob형태로 담을 때, canvas에 그려서 이미지 저장할 수 있다!

🔮 표 콘텐츠

<caption> table title, 테이블당 하나의 caption만 사용 </caption>

<table> table </table>

<tr> row (table row) </tr>
<th> cell (table header) </th>
<td> cell (table data) </td>

<!-- 아래는 테이블 레이아웃에 영향을 주지 않는다, 코드내 구분을 위함 -->
<thead> 머리글 </thead>
<tbody> 본문 </tbody>
<tfoot> 바닥글 </tfoot>

th, td 속성

<th abbr='설명' headers='관련된 다른머리글 id' colspan='병합 열 수(1)' rowspan='병합 행 수(1)' scope='누구의 머리글 칸인지 명시(col, colgroup, row, rowgroup, auto)'></th>

<td headers='관련된 다른머리글 id' colspan='병합 열 수(1)' rowspan='병합 행 수(1)'></td>

---

Reference

1) img태그에서 Cross Origin Issue 발생할 경우

AWS S3 CORS(동일 출처 정책) Error

2) HTML5 드래그 앤 드롭

[쉽게 해보는 HTML5] 드래그 앤 드롭 만들기!