HTML - 웹 슬라이드 데스크

웹 슬라이드 데스크 소개

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 흥미로운 여정을 시작하여 HTML의 세계로 나아가 우리만의 웹 슬라이드 데스크를 만들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 여러분이 코드를 한 줄도 작성한 적이 없더라도 이 과정을 안내해 드리는 것을 기쁘게 생각합니다. 그럼 seat belt를 하고 뛰어들어 보세요!

HTML - Web slide Desk

웹 슬라이드 데스크는 무엇인가요?

코딩을 시작하기 전에 우리가 만들고자 하는 것을 이해해 보겠습니다. 웹 슬라이드 데스크는 웹 브라우저에서 실행되는 프레젠테이션입니다. PowerPoint와 비슷하지만, HTML을 사용하여 스кра치로 만들어서 더 cool합니다! 이는 인터넷이 연결된 곳이면 어디서나 접근할 수 있습니다.

HTML 문서 설정

우리의 HTML 문서의 기본 구조를 시작해 보겠습니다. 처음에는 이게 무서울 수 있지만, 단계별로 설명해 드릴 테니 걱정 마세요.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 멋진 웹 슬라이드 데스크</title>
<style>
/* 나중에 CSS를 여기에 추가할 거예요 */
</style>
</head>
<body>
<!-- 우리의 슬라이드가 여기에 들어갈 거예요 -->
</body>
</html>

이를 해부해 보겠습니다:

<!DOCTYPE html>는 브라우저에게 이가 HTML5 문서임을 알립니다.
<html lang="ko">는 우리의 HTML 페이지의 루트 엘리먼트로, "ko"는 한국어를 지정합니다.
<head> 섹션은 문서에 대한 메타 정보를 포함합니다.
<meta charset="UTF-8">는 문서의 문자 인코딩을 지정합니다.
<meta name="viewport"...>는 모바일 장치에서의 적절한 렌더링을 보장합니다.
<title>는 우리의 웹 페이지의 제목을 설정합니다.
<style> 태그는 나중에 CSS를 추가할 곳입니다.
<body>는 우리의 슬라이드 데스크의 가시적 콘텐츠가 들어갈 곳입니다.

첫 번째 슬라이드 만들기

이제 우리의 첫 번째 슬라이드를 만들어 보겠습니다. 우리는 각 슬라이드를 정의하기 위해 <section> 태그를 사용할 것입니다.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>내 웹 슬라이드 데스크에 오신 것을 환영합니다!</h1>
<p>[당신의 이름]에 의해 만들어졌습니다</p>
</section>
</div>
</body>

여기서 우리는:

<div> 태그를 추가하여 모든 슬라이드를 담을 "slideshow-container" 클래스를 지정했습니다.
첫 번째 슬라이드를 정의하기 위해 "slide" 클래스를 가진 <section> 태그를 생성했습니다.
슬라이드에 <h1> 제목과 <p> 문단을 추가했습니다.

더 많은 슬라이드 추가하기

이제 우리의 데스크에 두 개 더 슬라이드를 추가해 보겠습니다:

<div class="slideshow-container">
<section class="slide">
<h1>내 웹 슬라이드 데스크에 오신 것을 환영합니다!</h1>
<p>[당신의 이름]에 의해 만들어졌습니다</p>
</section>

<section class="slide">
<h2>다루는 내용</h2>
<ul>
<li>HTML 기본</li>
<li>CSS 스타일링</li>
<li>간단한 JavaScript</li>
</ul>
</section>

<section class="slide">
<h2>감사합니다!</h2>
<p>질문이 있으신가요?</p>
</section>
</div>

우리는 두 개 더 슬라이드를 추가했으며, 각기 다른 콘텐츠 구조를 가지고 있습니다. 두 번째 슬라이드는 무序列표 <ul>을 사용하여 항목을 나열합니다.

슬라이드에 스타일 추가하기

이제 우리의 슬라이드에 스타일을 추가해 보겠습니다. 이를 <head> 섹션의 <style> 태그에 넣을 것입니다:

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

이 CSS를 해부해 보겠습니다:

body와 html은 전체 높이로 설정되고 기본 마진이 제거됩니다.
.slideshow-container은 플렉스박스를 사용하여 레이아웃하고 scroll-snap-type을 사용하여 부드러운 슬라이딩을 설정합니다.
각 .slide는 전체 너비와 높이로 설정되며 콘텐츠가 중앙에 맞춰집니다.
scroll-snap-align을 사용하여 슬라이드가 스냅되도록 합니다.
각 슬라이드에 다른 배경색을 설정합니다.

导航按钮添加

우리의 슬라이드 데스크를 더 사용자 친화적으로 만들기 위해,让我们添加一些导航按钮：

<body>
<div class="slideshow-container">
<!-- ... slides here ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ 이전</button>
<button class="next" onclick="changeSlide(1)">다음 ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

우리는 다음을 추가했습니다:

"이전"과 "다음" 버튼에 onclick 이벤트를 추가했습니다.
JavaScript의 changeSlide 함수를 추가하여 네비게이션을 처리합니다.

이 버튼들을 스타일링해 보겠습니다:

<style>
/* ... 이전 스타일 ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

최종 터치

우리의 네비게이션이 부드럽게 작동하려면, 슬라이드에 ID를 추가해야 합니다:

<section id="slide1" class="slide">
<h1>내 웹 슬라이드 데스크에 오신 것을 환영합니다!</h1>
<p>[당신의 이름]에 의해 만들어졌습니다</p>
</section>

<section id="slide2" class="slide">
<h2>다루는 내용</h2>
<ul>
<li>HTML 기본</li>
<li>CSS 스타일링</li>
<li>간단한 JavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>감사합니다!</h2>
<p>질문이 있으신가요?</p>
</section>

결론

축하합니다!你现在使用HTML、CSS和一点JavaScript创建了自己的网络幻灯片。这只是开始 - 你现在可以尝试不同的样式，添加更多的交互元素，甚至融入动画。

记住，web开发是关于实践和创造力的。不要害怕调整代码并看看会发生什么。谁知道呢?你可能会发现一些惊人的东西！

未来的web巫师们，快乐编码！

Credits: Image by storyset