디자인 요소 확인

고급 반응형 이미지 슬라이더

전체 코드

전체 코드 확인하기

고급 반응형 이미지 슬라이더

<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}

main {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.item {
width: 200px;
height: 300px;
list-style-type: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
background-position: center;
background-size: cover;
border-radius: 20px;
box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

&:nth-child(1), &:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: none;
border-radius: 0;
box-shadow: none;
opacity: 1;
}

&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 220px); }
&:nth-child(5) { left: calc(50% + 440px); }
&:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
}

.content {
width: min(30vw,400px);
position: absolute;
top: 50%;
left: 3rem;
transform: translateY(-50%);
font: 400 0.85rem helvetica,sans-serif;
color: white;
text-shadow: 0 3px 8px rgba(0,0,0,0.5);
opacity: 0;
display: none;

& .title {
font-family: 'arial-black';
text-transform: uppercase;
}

& .description {
line-height: 1.7;
margin: 1rem 0 1.5rem;
font-size: 0.8rem;
}

& button {
width: fit-content;
background-color: rgba(0,0,0,0.1);
color: white;
border: 2px solid white;
border-radius: 0.25rem;
padding: 0.75rem;
cursor: pointer;
}
}

.item:nth-of-type(2) .content {
display: block;
animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
0% {
filter: blur(5px);
transform: translateY(calc(-50% + 75px));
}
100% {
opacity: 1;
filter: blur(0);
}
}

.nav {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
user-select: none;

& .btn {
background-color: rgba(255,255,255,0.5);
color: rgba(0,0,0,0.7);
border: 2px solid rgba(0,0,0,0.6);
margin: 0 0.25rem;
padding: 0.75rem;
border-radius: 50%;
cursor: pointer;

&:hover {
background-color: rgba(255,255,255,0.3);
}
}
}

@media (width > 650px) and (width < 900px) {
.content {
& .title { font-size: 1rem; }
& .description { font-size: 0.7rem; }
& button { font-size: 0.7rem; }
}
.item {
width: 160px;
height: 270px;

&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 170px); }
&:nth-child(5) { left: calc(50% + 340px); }
&:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
}
}

@media (width < 650px) {
.content {
& .title { font-size: 0.9rem; }
& .description { font-size: 0.65rem; }
& button { font-size: 0.7rem; }
}
.item {
width: 130px;
height: 220px;

&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 140px); }
&:nth-child(5) { left: calc(50% + 280px); }
&:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
}
}
</style>
</head>
<body>
<main>
<ul class='slider'>
<li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
<div class='content'>
<h2 class='title'>"Lossless Youths"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
<div class='content'>
<h2 class='title'>"Estrange Bond"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
<div class='content'>
<h2 class='title'>"The Gate Keeper"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
<div class='content'>
<h2 class='title'>"Last Trace Of Us"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
<div class='content'>
<h2 class='title'>"Urban Decay"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
<div class='content'>
<h2 class='title'>"The Migration"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
</ul>
<nav class='nav'>
<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
</nav>
</main>

function activate(e) {
const items = document.querySelectorAll('.item');
e.target.matches('.next') && slider.append(items[0])
e.target.matches('.prev') && slider.prepend(items[items.length-1]);
}

document.addEventListener('click',activate,false);
</script>

웹사이트 제작 문의하기

코드 기초 설명)

해당 코드는 이미지 슬라이더를 만드는 HTML, CSS 및 JavaScript로 구성되어 있습니다. 코드를 이해하기 위해 다음과 같은 단계로 설명하겠습니다.

1. HTML 구조 설명:
– 코드는 `<html>` 요소로 시작하여 `<head>`와 `<body>`를 포함합니다.
– `<head>` 내부에는 스타일 시트와 JavaScript 라이브러리를 로드하는 `<style>` 및 `<script>` 태그가 있습니다.
– `<body>`에는 이미지 슬라이더를 구성하는 `<main>` 요소가 있습니다.
– `<main>` 안에는 이미지 목록을 감싸는 `<ul class=’slider’>`과 좌우 화살표를 포함한 네비게이션 `<nav class=’nav’>`이 있습니다.
– 각 이미지는 `<li class=’item’>` 안에 있으며, 배경 이미지와 내용을 포함하는 `<div class=’content’>`가 있습니다.

2. CSS 스타일 설명:
– 스타일은 모든 요소에 대해 초기화하는 일반적인 스타일이 있습니다.
– 이미지 슬라이더는 그리드를 사용하여 화면 중앙에 배치됩니다.
– 각 이미지 요소는 절대 위치로 배치되며, 스타일을 전환하여 애니메이션 효과를 적용합니다.
– 이미지 내용은 기본적으로 표시되지 않으며, 필요할 때 애니메이션을 사용하여 표시됩니다.
– 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃이 조정됩니다.

3. JavaScript 기능 설명:
– JavaScript는 이전/다음 화살표를 클릭했을 때 이미지를 전환하는 기능을 제공합니다.
– `activate` 함수는 클릭 이벤트를 감지하고, 해당 이벤트에 따라 슬라이더 아이템을 이동시킵니다.

4. 이미지 및 텍스트 변경:
– 각 이미지와 해당 이미지에 대한 설명은 실제 이미지 URL과 텍스트로 변경될 수 있습니다.
– 디자인을 개선하기 위해 이미지와 텍스트를 사용자 정의할 수 있습니다.

이렇게 코드를 분석하고 설명하면 비전공자도 이해하기 쉽습니다. 코드의 주요 구성 요소와 기능에 대한 설명을 제공하여 코드를 이해하는 데 도움이 되었기를 바랍니다.

상세 설명)

CSS 스타일 설명:

1. `*` 선택자:
– `* { margin: 0; padding: 0; box-sizing: border-box; }`: 이 부분은 페이지 내 모든 요소에 대해 여백과 패딩을 제거하고, `box-sizing` 속성을 `border-box`로 설정하여 요소의 크기가 요소의 내부 여백과 테두리를 포함하도록 설정합니다.

2. `body` 요소:
– `body { height: 100vh; display: grid; place-items: center; overflow: hidden; }`: 페이지를 수직 방향으로 전체 높이만큼 채우고, 그리드를 사용하여 내용을 가운데 정렬합니다. `overflow: hidden;`은 페이지 내용이 너무 클 때 스크롤이 생기지 않도록 합니다.

3. `main` 요소:
– `main { position: relative; width: 100%; height: 100%; box-shadow: 0 3px 10px rgba(0,0,0,0.3); }`: 슬라이더 컨테이너인 `main` 요소는 페이지 전체를 채우도록 설정되며, 그림자 효과가 적용됩니다.

4. `.item` 클래스:
– 이미지 아이템의 스타일을 정의합니다. 각 이미지는 `position: absolute;`로 배치되며, 초기에는 리스트의 중앙에 위치합니다.
– `transition` 속성은 변경되는 속성들에 대한 전환 효과를 설정합니다.

5. `.content` 클래스:
– 이미지 내용을 감싸는 `div` 요소의 스타일을 정의합니다. 초기에는 표시되지 않습니다.
– 내용은 텍스트와 버튼으로 구성되며, 글꼴과 색상, 텍스트 그림자 등이 지정됩니다.
– `@keyframes`를 사용하여 내용이 나타날 때 적용되는 애니메이션 효과를 정의합니다.

JavaScript 기능 설명:

1. `slider` 변수:
– `.slider` 클래스를 가진 요소를 찾아 변수에 할당합니다. 슬라이더의 전체 영역을 나타냅니다.

2. `activate` 함수:
– 클릭 이벤트를 감지하고, 이벤트가 발생한 요소가 이전 또는 다음 버튼인지 확인합니다.
– 다음 버튼을 클릭한 경우, 첫 번째 아이템을 슬라이더의 맨 뒤로 이동시킵니다.
– 이전 버튼을 클릭한 경우, 마지막 아이템을 슬라이더의 맨 앞으로 이동시킵니다.

3. `document.addEventListener`:
– 문서 전체에서 클릭 이벤트를 감지하여 `activate` 함수를 호출합니다.

4. Ionicons 라이브러리:
– 화살표 아이콘을 표시하기 위해 Ionicons 라이브러리를 사용합니다.
– `ion-icon` 태그를 사용하여 이전과 다음 버튼을 표시합니다.

이렇게 하여 CSS는 슬라이더의 스타일을 정의하고, JavaScript는 슬라이더의 동작을 제어합니다. 코드의 각 부분이 어떤 역할을 하는지 이해하는 데 도움이 되었기를 바랍니다.