<video> : 동영상 넣기

▶<video src=""></video>

▶<video src="visual.mp4" autoplay loop muted></video>

▶비디오 태그는 이미지 태그처럼 알트로 무조건 써야 하는 강제 속성은 없다.

▶autoplay : 자동재생(크롬 브라우저에선 정책적으로 자동재생 허용X), loop : 무한반복, muted : 소리 끔

▶게임 사이트는 뮤트는 하지 않는다. (사용자들이 즐기기 위해 들어오기 때문에) : 사이트 특성마다 조금씩 다를 수 있음.

 

<a> : 링크 기능

▶<a href=""></a>

▶herf : 이동할 페이지의 URL 주소설정 (이동시킬 웹 주소가 될 수도 있고, 다른 파일이 될 수도 있다.)

▶ex) <a href="https://www.naver.com/">네이버로 보내쥬세요!!</a>

▶ex) <a href="INDEX.html">안녕하세요</a> : 다른 html 문서로도 이동 가능

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12

<img> : 이미지 태그, 그림 넣기

▶<img src="" alt="">

▶닫는 태그가 없다. 열린 태그 하나만 있다.

▶<img> 외에 속성이 따라오는데 <src=이미지 경로를 쓰는 속성> <alt=이미지를 설명하는 속성>

▶동일 폴더 내에서 찾을 수 있는 경우 파일의 이름+확장자명을 적으면 불러올 수 있다.

▶alt : 이미지 설명이 필요한 이유 = 접근성! 스크린 리더기로 읽을 때 설명이 필요함. 

이미지 포맷 확장자 특징
JP(E)G .jpg / .jpeg 사진 이미지에 많이 사용되는 손실 압축, 고화질을 유지하면서 고압축 가능. 다른 압축 방식에 비해 파일 크기를 작게 할 수 있다.
PNG /png 무손실 압축, JPG에 비해 압축 효과율은 떨어지나 휴대폰 등에서 이미지 확대 시 고화질 유지. 최근 가장 많이 사용.
GIF .gif 무손실 압축, 사용가능한 컬러 수가 다른 포맷에 비해 제한적. 컴퓨터 그래픽 이미지에 많이 사용, 파일 크기가 작음.
SVG .svg 압축 포맷이 아닌 벡터 그래픽 포맷. 이미지 확대 시 화질의 손상이 전혀 없음. 웹 상에서 도형이나 그래프를 그리는데 多사용
상대경로 절대경로
URL 주소를 기술할 때 HTML 문서가 존재하는 위치. 즉, 현재 폴더를 기준으로 경로를 설정하는 방식을 말함.
ex) <img src="./img/test/fish3.jpg">		 http://로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL주소를 의미. 해당 파일이 존재하는 인터넷 상의 유일무이한 위치.
ex)

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<table> : 테이블(표, 항목)  (0) 2023.03.12
<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
HTML 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12

HTML 태그

Tag Usage Definition Summary
<html> <html> ... </html>  
<head> <head> ... </head> 머리말
<body> <body> ... </body> 본문
<title> <title> ... </title> 웹페이지(문서)제목
<meta> <meta ... /> metadata에 대한 정보(information)
<div> <div> ... </div> 문서영역 또는 섹션의 분할 정의
<a> <a href=" ... " target=" ... "> ... </a> (Anchor) 링크연결, inline요소
<script> <script type=" "> ... </script> 클라이언트 사이드 스크립트를 정의할 때 사용
<link> <link rel="stylesheet" href="..."> 스타일시트(등 의) 링크 적용
<img> <img src="..." > 이미지삽입
<p> <p> ... </p> 줄바꿈, 단락
<span> <span> ... </span> inline요소들을 그룹화
<li> <li> ... </li> (List) 리스트화
<ul> <ul> ... </ul> (Unordered List) 리스트를 그룹으로 묶음, 순서X
Tag Usage Definition Summary
<ol> <ol> ... </ol> (Ordered List) 리스트 그룹 자식들 앞에 숫자 넘버링, 순서O
<br> <br> </> 줄 바꿈, break
<style> <style ...> ... </style> CSS 스타일 정의
<h1>~<h6> <h1> ... </h1> 제목(heading), 글씨 크기(+굵기)
<input> <input type="...">  
<from>    
<strong> <strong> ... </strong> 글씨를 두껍게 강조
<table> <table> ... </table> 표 사용
<tr> <tr> ... </tr>  
<td> <td> ... </td>  
주석 <!-- ... --> 주석을 사용할 때 (Ctrl+/)
<hr> <hr> 단락 구분, 문서의 구분선
<caption> <caption> ... </caption> summary역할
<colgroup> <colgroup> ... </colgroup> 열 그룹
<u> <u> ... </u> 글씨에 밑줄(underline)

 

 

'코린이 개념잡기 > HTML' 카테고리의 다른 글

<video> : 동영상 넣기, <a> : 링크 기능  (0) 2023.03.12
<img> : 이미지 태그  (0) 2023.03.12
DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag)  (0) 2023.03.12
태그의 속성 (블록속성과 인라인속성)  (0) 2023.03.12
인코딩, 디코딩  (0) 2023.03.12

+ Recent posts

티스토리툴바