HTML BASIC
1. 멀티미디어
1) IMG
: 이미지 삽입할 때 사용하는 태그 (빈 태그로, 닫는 태그 필요 없음)
i) src 속성
: 필수로 포함해야 하는 속성으로, 이미지의 URL 포함
=> 단위 : px(❌) w(⭕) x(⭕)
ii) alt 속성
: 필수로 포함해야 하는 속성 - 이미지가 출력되지 않는 환경에서 img를 대체해 출력될 대체 텍스트
<body>
<img src='./images/heropy.png" alt="HEROPY">
</body>iii) 크기 - width, height 속성
- width나 height 중 하나만 값을 설정하는 경우, 비율은 유지한 채 설정한 크기에 맞게 자동으로 조절됨
- CSS로 img라는 태그에 대해 크기를 설정할 수 있음
iv) 반응형 웹사이트 - srcset, sizes
: 각각 src, alt 와 같은 기능이되, 반응형 웹에서 미디어쿼리를 사용할 때 사용됨 (이게 사용될 땐 src와 alt는 사용되지 않음)
- srcset: 이미지의 경로와 크기를 나열해 작성하면, 브라우저의 크기에 맞춰 적절한 크기의 이미지가 출력됨
- 단위: px(❌) w(⭕) x(⭕)
- 2장 이상 활용할 때 사용
- sizes: 미디어조건과 최적화출력크기를 나열해 작성하면, 해당하는 조건의 브라우저의 크기에 해당하는 크기로 출력됨
- 단위: px(⭕) w(⭕) x(⭕)
- min-width: 가로 너비가 해당 px 이상일 때
- 미디어조건은 생략 가능 -> 생략시, 뷰포트 너비와 상관없이 최적화출력크기에 해당하는 srcset의 이미지가 출력됨
<body>
<img srcset="images/heropy_small.png 400w, // ~400
images/heropy_medium.png 700w, // 401~700
images/heropy_large.png 1000w" // 701~
sizes="(min-width: 1000px) 700px"
src='./images/heropy.png"
alt="HEROPY">
</body>v) 단위 - W, X
- w: 이미지의 원본 크기 - 가로 너비 기준
: 이미지 원본이 400x300(px) 이면 이미지의 w 값은 400w - x: 이미지의 비율 - 배수 정의
: 400w 대신 1x, 700 대신 1.5x 등
2) AUDIO
: 소리 콘텐츠를 삽입하는 경우 (mp3)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio
i) autoplay 속성
: 접속시 바로 재생
ii) controls 속성
: 일시정지 등 제어 메뉴 표시
iii) loop 속성
: 반복재생
iv) 기타 속성
: preload, src, muted
<body>
<audio src="https://주소.mp3"
controls autoplay loop muted
></audio>
</body>3) VIDEO
: 소리 콘텐츠를 삽입하는 경우 (mp3)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio
i) autoplay 속성
: 접속시 바로 재생
ii) controls 속성
: 일시정지 등 제어 메뉴 표시
iii) loop 속성
: 반복재생
iv) poster
: 동영상 썸네일의 이미지 주소
v) 기타 속성
: crossorigin, preload, src, muted
4) FIGURE, FIGCAPTION
: 이미지와 관련된 텍스트임을 명시하기 위한 태그
- figure : 이미지의 영역을 설정
- figcaption : 설명 작성
<body>
<figure>
<img src="images/heropy.png" alt="HEROPY">
<figcaption>HEROPY 이미지입니다!</figcaption>
</figure>
</body>2. 내장 콘텐츠
1) IFRAME
: 다른 HTML 페이지를 현재 페이지에 삽입 (유튜브 등)
- Inline 요소이므로 위에 작성된 코드들과 나란히 보여짐
- div 태그로 감싸면 분리해 볼 수 있음
i) src
: 외부 페이지의 주소
ii) name
: 프레임의 이름
iii) allowfullscrean
: 전체 화면 모드 사용 여부
iv) 기타 속성
: frameborder, sandbox
<body>
<div>
<p>이건 일단 내 페이지</p>
<img src="images/sprite.png" alt="SPRITE">
</div>
<div>
<iframe src="https://naver.com"
frameborder="0"
width="700px"
height="400px"
style="border: 4px solid red;">
</iframe>
</div>
</body>2) CANVAS
: 그래픽이나 애니메이션을 랜더링 (Canvas API 또는 WebGL API 사용)
<body>
<canvas id="canvas" width="200" height="150"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgb(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
</script>
</body>3. 스크립트
1) SCRIPT
: JS 내용을 삽입하거나 SRC를 이용해 외부의 내용(보통 CSS)을 가져올 때 사용
https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
-
js 문서를 가져오는 경우
- body 문서의 id에 관한 동작을 실행하고 싶을 때
head 부분에 script가 정의됐다면, 아직 읽은 범위 안에 특정 id가 없음
따라서 body 맨 하단에 script가 있는 경우도 있음 - 이런 오류를 제어하기 위한 게 defer 태그 (다 읽고 난 다음에 실행하라는 명령)
- body 문서의 id에 관한 동작을 실행하고 싶을 때
i) src
: 외부 스크립트의 주소 -> 이게 있으면 그냥 script 태그 안에 작성된 내용은 무시됨
ii) defer
: 실행의 시점을 제어
iii) 다른 속성
: async, type
<head>
<link rel="stylesheet" href"css/main.css">
<script src="js/main.js" defer></script>
</head>2) NOSCRIPT
: 스크립트(JS)가 지원하지 않는 경우에 삽입하고 싶은 html을 정의
(요새는 다 스크립트가 지원돼서... 잘 안 씀)
4. 표 콘텐츠
1) TABLE
: 데이터 표를 생성할 때 사용하는 태그
https://developer.mozilla.org/ko/docs/Web/HTML/Element/table
- 행 :
을 통해 생성 - 열 :
,를 통해 생성
i. TH 태그
: 머리글 칸을 지정하는 태그
- 주로 맨 상단에, 어떤 정보를 서술하는지 설명하는 칸
- 속성 : abbr, headers, colspan, rowspan, scope 등
ii. TD 태그
: 일반 칸을 지정하는 태그
- 머리글 칸 아래에, 각각의 구체적인 '정보'가 서술되는 일반적인 칸
- 속성 : headers, colspan, rowspan 등
2) CAPTION
: 표의 제목을 설정
- 하나의 TABLE 당 하나의 CAPTION만 사용 가능
- TABLE 태그 내에서 맨 상단에 작성
3) COLGROUP, COL
- COLGROUP : 표의 열을 묶는 그룹
- COL : 표의 열을 나타내는 태그로, COLGROUP 내에 작성됨 (닫는 태그 없음)
SPAN 속성
: 총 몇 개의 열이 묶이는지 제시
<table>
<colgroup>
<col>
<col span="2" class="teenager">
<col span="2" class="adult">
</colgroup>
</table>4) THEAD, TBODY, TFOOT
: 각각 표의 머리글, 본문, 바닥글을 지정
5. 양식
1) FORM
: 웹 서버에 정보를 제출하기 위한 양식 범위를 정의하는 태그
- 중첩 불가
- 로그인창과 같은 기능
i. METHOD
: 서버로 전송할 http 방식 지정 (GET, POST)
2) INPUT
: 사용자에게 입력받을 데이터 양식을 정하는 태그
-> 관련 속성이 많으므로 사이트 참고
3) LABEL
: 라벨 가능 요소에 제목을 지정하는 태그
- 라벨 가능 요소: BUTTON, INPUT, PROGRESS, SELECT, TEXTAREA
i. FOR
: 라벨 가능 요소를 참조하거나 콘텐츠로 포함 가능
4) BUTTON
: 버튼을 생성하는 태그
5) TEXTAREA
: 여러 줄의 일반 텍스트를 생성하는 태그
i. ROWS
양식의 줄 수를 지정하는 속성으로, 기본값이 2
6) FIELDSET, LEGEND
: 각각 같은 목적의 양식을 그룹화하고, 제목을 지정
7) SELECT, DATALIST, OPTGROUP, OPTION
: 사용자에게 옵션의 선택메뉴나 자동완성을 제공하는 태그
- OPTION: 옵션 생성
- OPTGROUP: 옵션을 그룹화
- SELECT: 옵션의 선택메뉴 제공
- DATALIST: 미리 정의된 옵션을 바탕으로 자동완성 기능 제공
(각각 태그에 대한 주요 속성은 사용시 검색하며 학습 가능)
<select>
<optgroup label="Coffee">
<option>Americano</option>
<option>Caffe Mocha</option>
<option label="Cappuccino" value="Cappuccino"></option>
</optgroup>
<optgroup label="Latte" disabled>
<option>Caffe Latte</option>
<option>Vanilla Latte</option>
</optgroup>
<optgroup label="Smoothie">
<option>Plain</option>
<option>Strawberry</option>
<option>Banana</option>
<option>Mango</option>
</optgroup>
</select>8) PROGRESS
: 작업의 완료 진행률 표시
6. 전역 속성
1) CLASS
: 요소의 별칭을 지정해, CSS 나 JS에서 명칭을 사용해 요소로의 선택 접근이 가능
2) ID
: CLASS와 유사하나, '고유'한 이름을 사용함이 특징
3) STYLE
: HTML 내에 CSS를 작성하고 싶을 때 사용
4) TITLE
: 요소의 정보(설명) 지정
5) LANG
: 요소의 언어 지정
6) DATA
: 사용자 정의 데이터 속성을 지정 (JS에서 이용할 수 있는 데이터 저장)
7) DRAGGABLE
: Drag and Drop API 사용 가능한지 여부
8) HIDDEN
: 요소 숨김 처리
9) TABINDEX
: 탭 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
7. 기타
1) 절대 경로와 상대 경로
i. 절대 경로
: 다른 폴더에서 호출해도 경로 달라지지 않는 것
ex) 'http', '/'
ii. 상대 경로
: 경로가 달라질 수 있는 것
ex) './', '../'
2) 주석(COMMENT)
: drag + ctrl + / => 주석처리 완료
3) 특수기호(ENTITES)
i.
: 띄어쓰기를 연속처리 할 때 사용
ii. < >
: 태그를 출력할 때 사용 (<> 대신)
