[3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기

[3강] 텍스트와 멀티미디어! 생동감 있는 페이지 만들기

"이미지와 비디오로 독자의 시선을 사로잡는 법을 배워봅시다."

안녕하세요! 지난 시간에는 검색 엔진이 좋아하는 시맨틱 태그를 배웠습니다. 오늘은 웹페이지에 생동감을 불어넣는 텍스트 강조 기술과 멀티미디어(이미지, 비디오) 삽입 방법을 알아보겠습니다.

1. 텍스트를 풍성하게 만드는 태그

단순한 글자 나열보다 적절한 강조와 목록을 사용하면 가독성이 훨씬 좋아집니다.

✅ <h1> ~ <h6>: 제목 태그 (중요도에 따라 순차적 사용)

✅ <strong>, <em>: 중요한 텍스트를 굵게 또는 기울임으로 강조

✅ <ul>, <ol>, <li>: 순서 없는 목록과 순서 있는 목록 생성

2. 멀티미디어 삽입하기 (이미지 & 비디오)

웹사이트에 시각적인 요소를 추가할 때 사용하는 핵심 태그들입니다.

• 🖼️ <img> 태그: 이미지를 표시합니다.
  - src: 이미지 경로 / alt: 이미지가 안 나올 때 보여줄 대체 텍스트(SEO 중요!)
• 🎥 <video> 태그: 동영상을 재생합니다.
  - controls: 재생바 표시 / autoplay: 자동 재생 / loop: 반복 재생

3. 텍스트와 미디어 활용 예제 (실습)

아래 코드를 통해 실제 이미지를 불러오고 비디오를 제어하는 방법을 확인해 보세요.

<!-- 텍스트와 이미지 삽입하기 --> <h2>내가 여행한 제주도</h2> <p>제주도는 정말 <strong>아름다운 섬</strong>입니다.</p> <img src="jeju.jpg" alt="제주도 바다 풍경" width="400"> <h3>제주도 여행 코스</h3> <ul> <li>협재 해수욕장</li> <li>성산 일출봉</li> </ul> <!-- 비디오 삽입하기 --> <h3>여행 브이로그</h3> <video src="vlog.mp4" controls width="400"> 이 브라우저는 비디오 태그를 지원하지 않습니다. </video>

시각적인 웹사이트의 완성!

이미지의 alt 속성을 채우는 습관은 검색 엔진 최적화와 웹 접근성의 기본입니다.

다음 4강에서는 사용자로부터 정보를 입력받는 'Form 태그'를 배워볼게요!