동영상이 무한 재생되는 화면을 만들어 보았다.
주제는 나름 한국의 관광지를 설명하는 컨셉의 예제로 꾸며보았다.
HTML과 CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화면에 비디오 넣기</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<section class="hero">
<div class="heading">
<h1>HTML+CSS+JS</h1>
<p>HTML+CSS+JS 화면 오버레이 메인 화면</p>
</div>
<video src="../overlay.mp4" autoplay muted loop poster="../overlay.png"></video>
</section>
<section class="contect">
<div class="inner">
<div class="seoul">
<h2>서울</h2>
<p>경복궁, 명동거리, 남산타워(N서울타워), 동대문, 디자인플라자(DDP), 홍대거리, 광화문광장, 청와대(청와대 본관·녹지원 개방), 롯데월드 타워·서울스카이 전망대, 인사동 문화거리, 북촌 한옥마을</p>
</div>
<div class="kyungki">
<h2>경기</h2>
<p>경복궁, 명동거리, 남산타워(N서울타워), 동대문디자인플라자(DDP), 홍대거리, 광화문광장, 청와대(청와대본관·녹지원개방), 롯데월드타워·서울스카이전망대, 인사동문화거리, 북촌한옥마을</p>
</div>
<div class="jeju">
<h2>제주</h2>
<p>성산일출봉, 한라산국립공원, 협재해수욕장, 만장굴, 천지연폭포, 정방폭포, 쇠소깍, 우도, 섭지코지, 애월카페거리, 함덕해수욕장, 용머리해안, 주상절리대, 비양도</p>
</div>
<div class="busan">
<h2>부산</h2>
<p>해운대해수욕장, 광안리해수욕장, 태종대, 자갈치시장, 감천문화마을, 남포동거리, 용두산공원·부산타워, 송도해상케이블카, 동백섬·누리마루APEC하우스, 오륙도스카이워크</p>
</div>
</div>
</section>
</div>
</body>
</html>(여기선 사실 실제로 반응형 웹사이트를 구성하진 않을테니 메타 태그는 빠져도 된다.)
요즘 hero라는 클래스를 많이 사용한다고 한다.
hero는 보통 첫 화면의 메인 강조 구역을 의미하고 가장 큰 영역(큰 배경 이미지 또는 메인 제목과도 같은 영역)을 클래스로 사용할때 content로 많이 사용 했었는데 hero라고 사용한다고 한다.
body{
margin: 0;
font-family: 'Montserrat', sans-serif;
line-height: 1.6rem;
font-size: 18px;
}
/* Section : hero */
.hero{
position: relative;
display: flex;
height: 700px;
align-items: center;
justify-content: center;
overflow: hidden;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
.heading h1,
.heading span{
display: block;
color: crimson;
}
.hero video{
position: absolute;
z-index: -1;
top: 0;
left: 0;
min-width: 100%;
}
/* Section : contect */
.contect{
margin: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
gap: 70px;
width: 1280px;
display: flex;
word-break: break-all;
}주석은 기본중에 기본으로 너무 불필요하게 많으면 안좋겠지만 어느정도 개발자가 확인할 수 있도록 주석을 달아주는 습관을 길르는것은 중요하다.
참고하면 좋은 정보
무료 동영상 사이트 : 놀라운 무료 이미지 - Pixabay
동영상과 이미지를 4K 이미지까지 쉽게 구할 수 있다.
'Front-End > HTML' 카테고리의 다른 글
| HTML - 트위터 클론 코딩 - 1 (1) | 2025.12.13 |
|---|---|
| HTML/CSS - a 태그를 이용하여 자동 스크롤 / 부드러운 스크롤 (0) | 2025.12.12 |
| HTML/CSS - <header> (0) | 2025.11.25 |
| [CSS] Scroll-Snap (0) | 2025.11.23 |
| CSS에 대한 나의 생각과 고찰 (0) | 2025.11.23 |