📚HTML, CSS/이론 정리

html (멀티미디어 태그, 시멘틱 태그, 글로벌 속성)

하얀성 2023. 1. 19. 10:36

<멀티미디어 태그>

<audio src="./Rinne - Lost voice.mp3" controls></audio> : 오디오 출력, 제어가능서
 <video src="./sample.mp4" controls ></video> : 비디오 출력, 제어가능서식

 

<audio controls>
    <source src="./Rinne - Lost voice.mp3" type="audio/mp3">
    지원하지 않는 브라우저 입니다.
  </audio>

이런식으로 audio 태그 안에 source태그로 지원하는 파일형식을 보여주고

지원하지 않을 때는 저렇게 글자가 나타나도록 할 수 있다.


 <시멘틱 태그>

<header></> : 헤더 영역 ( 로그인, 메뉴들 같은 웹의 최상단 부분을 나타내줌)

<nav></> : 내부의 다른 영역, 외부의 다른 영역과 연결되는 부분을 나타내줌

<section><> : 웹 페이지에서 논리적 부분, 영역을 표시할 때 사용 (<hn> 태크를 한 개 이상 사용 권장)

<article><> : 웹페이지에서 독립적으로 구분할 것들에 사용

<aside><> : 웹페이지의 사이드 영역에서 정보를 나타낼 때 사용(광고 베너, 로그인 등 우측의 다양한 부분)

<footer><> : 웹페이지 마지막 부분들

<main><> : header와 footer 사이의 중요한 부분들을 나타낼 때 사용

<figure><> : 이미지 그룹화

<figcaption><> : 이미지에 대한 설명


<글로벌 속성> : 일부 태그에만 짝지어서 쓰는 속성이 아닌 전체에서 사용 가능 속성들

 

class - 같은 값을 여러번 쓸수 있다. 

id - 한 개의 html파일에서 값을 한번만 쓸 수 있다.

style - css 코드 적기 위한 속성

title - 출력된 요들에 마우스를 가져가면 부가 설명 창을 띄움

hidden - 화면의 html 요소를 감춰줌 

lang - 출력된 글자가 무슨 언어인지 알려줌(영어, 한국어, 일어, 프랑스어 등)

data-ㅇㅇ 내가 원하는 속성을 임의로 지정해서 비공식 속성 만들 수 있음