롤링 슬라이드 배너는 한정된 영역 안에서 여러 개의 이미지나 콘텐츠를 일정 개수만큼 순차적으로 노출하는 사용자 인터페이스(UI, User Interface) 요소다. 웹 페이지의 공간을 효율적으로 활용하면서 여러 시각 자료를 정돈된 형태로 보여줄 때 사용된다. 이 글에서는 HTML로 배너와 이동 버튼의 뼈대를 구성하고, CSS의 플렉스박스(Flexbox)와 넘침 영역 숨김 속성을 활용해 기본 구조를 스타일링하는 과정을 설명한다.
1. HTML 마크업 구조
HTML 코드는 아이콘 폰트 연결, 배너 표시 프레임, 7개의 배너 목록, 좌우 이동 버튼, 그리고 스크립트 라이브러리 호출 태그로 구성된다.
HTML
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<h1>롤링 슬라이드 배너 만들기</h1>
<div id="banner_wrap">
<div id="frame">
<ul id="banner">
<li>
<a href="#"><img src="roll/1.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/2.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/3.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/4.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/5.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/6.png" alt="사진1" /></a>
</li>
<li>
<a href="#"><img src="roll/7.png" alt="사진1" /></a>
</li>
</ul>
</div>
<p>
<a href="#" class="prev">
<span class="material-symbols-outlined"> arrow_circle_left </span>
</a>
<a href="#" class="next">
<span class="material-symbols-outlined"> arrow_circle_right </span>
</a>
</p>
</div>
<script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
HTML 구조 상세 설명
HTML 코드의 주요 구성 요소와 역할은 다음과 같다.
- 구글 마테리얼 심볼(Material Symbols) 연결:
<head>내부의<link>태그는 구글 아이콘 웹 폰트를 불러온다. 클래스명material-symbols-outlined와 텍스트arrow_circle_left,arrow_circle_right를 결합하여 좌우 화살표 아이콘을 렌더링한다. - 계층 구조: 전체를 감싸는
#banner_wrap안에 뷰포트(Viewport) 역할을 하는#frame이 위치하며, 그 안에 실제 아이템 목록인#banner(<ul>)와 개별 아이템(<li>) 7개가 포함된다. 하단에는 이전 및 다음 이동을 위한<p>영역이 배치된다. - 스크립트 로드: 하단의
<script>태그는 콘텐츠 전송 네트워크(CDN, Content Delivery Network)를 통해 제이쿼리(jQuery) 3.7.1 버전을 불러와 추후 슬라이드 동작 제어를 준비한다.
작성 시 주의점: 각 <img> 태그의 src 경로는 roll/1.png와 같이 상대 경로로 지정되어 있으므로, HTML 파일과 동일한 위치에 roll 폴더 및 해당 이미지 파일이 존재해야 정상적으로 화면에 표시된다.
2. CSS 스타일 및 레이아웃 설정
CSS는 요소의 기본 여백을 초기화하고, 플렉스박스를 통해 배너 항목들을 가로로 나열하며, 프레임 바깥으로 벗어난 배너들을 가리는 역할을 수행한다.
CSS
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
ul {
display: flex;
}
h1 {
text-align: center;
}
li {
flex: 0 0 80px;
}
a {
display: block;
}
img {
width: 100%;
}
#banner_wrap {
width: 300px;
padding: 10px 20px;
margin: auto;
background: #dfdfdf;
}
#banner {
width: calc(80px * 7);
background: #ff000055;
height: 80px;
}
#frame {
width: calc(80px * 3);
height: 80px;
position: relative;
background: #10b3ffa1;
overflow: hidden;
margin: 10px auto;
}
CSS 속성 및 계산 원리
배너 레이아웃을 구성하는 핵심 속성과 동작 방식은 다음과 같다.
- 기본 스타일 초기화:
*선택자로 모든 요소의 기본 마진(margin)과 패딩(padding)을 제거하고,box-sizing: border-box를 적용하여 테두리와 여백이 지정한 너비 내에 포함되도록 한다.list-style: none으로 목록의 기본 불릿 기호를 제거한다. - 플렉스박스(Flexbox) 가로 배치:
ul { display: flex; }를 선언하여 수직으로 쌓이던<li>요소들을 한 줄로 나란히 배치한다. - 항목 너비 고정:
li { flex: 0 0 80px; }는 플렉스 증가율(flex-grow) 0, 플렉스 감소율(flex-shrink) 0, 기본 크기(flex-basis) 80px를 의미한다. 화면 너비나 부모 요소 크기에 따라 배너 항목이 줄어들거나 늘어나지 않고 80px의 고정 너비를 유지한다. - 전체 배너 크기 산출:
#banner의 너비는calc(80px * 7)로 계산되어 560px가 된다. 80px 너비의 배너 7개가 일렬로 이어질 수 있는 공간을 확보한다. - 프레임 영역 및 오버플로(Overflow) 제어:
#frame의 너비는calc(80px * 3)으로 240px이며, 이는 한 번에 3개의 배너만 표시하는 뷰포트 역할을 한다.overflow: hidden은 부모 영역을 벗어나는 자식 요소의 콘텐츠를 화면에서 숨긴다. 이는 마치 가림막 창문 뒤로 긴 필름이 지나갈 때 창문 크기만큼만 노출되는 것과 같은 원리다.
자주 발생하는 문제: #frame에 overflow: hidden 속성을 빠뜨리면 560px 크기의 #banner 전체가 프레임 밖으로 삐져나와 가로 스크롤이나 레이아웃 깨짐 현상이 발생한다. 또한 li의 flex-shrink 값이 0이 아닐 경우 프레임 너비에 맞춰 배너 항목들이 강제로 축소될 수 있으므로 고정 크기 지정이 필수적이다.