[레슨 영상: 녹화 예정]
레슨 1 / 5
HTML5 배너란 무엇인가
HTML5 배너는 HTML, CSS, JavaScript로 만든 작은 웹페이지로, 다른 페이지의 광고 자리 안에 표시돼요. 이미지도 동영상도 아니고, 브라우저가 실행하는 코드예요. 다른 사이트를 실행하는 것과 같아요.
이미지나 GIF와 비교
정적 이미지는 움직이지 않아요. 애니메이션 GIF는 움직이지만 사진을 연속으로 이은 것이라 용량이 크고, 색이 적으며, 확대하면 흐려져요. HTML5 배너는 텍스트와 도형을 코드로 그리기 때문에 화면 밀도와 상관없이 선명하고, 정밀하게 애니메이션되며, 보통 용량이 훨씬 작아요.
무엇으로 이루어져 있나
- 구조와 텍스트가 있는
index.html파일. - 각 요소의 모양을 정하는 스타일(CSS).
- 요소를 움직이고 클릭을 처리하는 코드(JavaScript).
- 있다면
index.html과 함께 두는 이미지와 글꼴.
이 모든 것이 .zip 파일 하나에 함께 담겨요. 배너를 게재하는 플랫폼인 애드 서버가 압축을 풀고 보여줘요.
직접 해 보세요. 아무 웹페이지나 열고 배너를 마우스 오른쪽 버튼으로 클릭한 뒤 “검사”를 선택하세요. HTML5 배너라면 그 코드가 보일 거예요.
진행 상황은 이 브라우저에만 저장돼요.