실무 필수! HTML5 핵심 태그 마스터: 영상/음악 삽입 꿀팁 대방출!

HTML5, 멀티미디어랑 의미있는 태그들!

1. 멀티미디어, 이제 플래시 없이 쉽게!

옛날에는 웹사이트에 음악이나 영상을 넣으려면 '플래시'라는 프로그램을 써야 했어. 근데 이제 플래시는 안 써! HTML5부터는 audio 태그랑 video 태그가 생겨서 음악이랑 영상을 엄청 쉽게 넣을 수 있게 됐지.

1.1. 음악 넣기 (<audio>)

• src 속성에 음악 파일 경로를 적어주면 돼.
• controls 속성을 추가하면 재생 버튼 같은 게 자동으로 생겨서 음악을 들을 수 있어.
• 이 재생 버튼 같은 건 HTML5에서 알아서 만들어주는 거라 우리가 따로 꾸밀 필요는 없어.

1.2. 영상 넣기 (<video>)

• src 속성에 영상 파일 경로를 적어주면 돼.
• controls 속성을 추가하면 영상 재생 버튼 같은 게 자동으로 생겨.
• 이것도 audio 태그처럼 HTML5에서 알아서 만들어주는 거야.

1.3. 브라우저마다 지원하는 게 달라요! (단점)

근데 문제가 하나 있어. 모든 브라우저가 모든 음악/영상 파일 형식을 다 지원하는 건 아니야. 특히 옛날 브라우저 (인터넷 익스플로러 같은 거)는 지원을 잘 못해.

• 어떤 파일 형식을 어떤 브라우저가 지원하는지 확인하는 방법: caniuse.com 이라는 사이트에서 확인하면 돼.

1.4. 여러 파일 형식 지원하게 하기 (<source>)

이런 문제를 해결하려면 source 태그를 쓰면 돼.

• audio나 video 태그 안에 source 태그를 여러 개 넣고, 각 source 태그마다 src 속성으로 다른 파일 경로랑 type 속성으로 파일 형식을 적어주는 거야.
• 브라우저는 자기가 지원하는 파일 형식을 찾아서 그걸로 재생해줘.
• 만약 아무것도 지원하지 않으면 "지원하지 않는 브라우저입니다." 같은 메시지를 보여줄 수도 있어.

2. 의미를 담은 태그들, 시맨틱 태그!

HTML5에서 또 중요한 변화는 '시맨틱 태그'가 생긴 거야. 옛날에는 그냥 <div>나 <span>으로 내용을 묶기만 했는데, 이제는 태그 자체에 의미가 부여돼서 검색엔진이 웹사이트 내용을 더 잘 이해하게 도와줘.

2.1. 대표적인 시맨틱 태그들

• <header>: 웹사이트 맨 위에 있는 로고, 메뉴 같은 부분을 나타낼 때 써.
• <nav>: 다른 페이지로 이동하는 링크 모음 같은 걸 나타낼 때 써. (네이버 메뉴 같은 거 생각하면 돼)
• <section>: 논리적으로 관련된 내용들을 묶을 때 써. 보통 <h1>부터 <h6> 태그 중 하나를 꼭 같이 써줘야 해.
• <article>: 뉴스 기사처럼, 웹페이지에서 따로 떼어내도 의미가 통하는 독립적인 내용을 나타낼 때 써.
• <aside>: 웹사이트 옆에 있는 광고 배너나 로그인 정보 같은, 본문 내용과 직접적인 관련은 없지만 사이드에 표시되는 내용을 나타낼 때 써.
• <footer>: 웹사이트 맨 아래에 있는 저작권 정보 같은 부분을 나타낼 때 써.
• <main>: 웹페이지의 가장 중요한 내용, 본문 내용을 나타낼 때 써.

2.2. 더 많은 시맨틱 태그들

이 외에도 figure, figcaption 같은 태그들이 있는데, 이건 이미지랑 그 이미지에 대한 설명을 묶을 때 사용해.

시맨틱 태그를 잘 사용하면 검색엔진 최적화(SEO)에도 도움이 되니까 꼭 익혀두자!