728x90
sliderType page 만들기
이미지나 컨텐츠를 슬라이드 형태로 보여주는 슬라이드 타입의 웹페이지 틀을 만들어 보겠습니다.
코드블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 타입01</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.blind {
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
.mt0 {margin-top: 0px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff7c7c;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* slider__wrap */
.slider__inner .slider {
height: 600px;
background-image: url(../asset/img/sliderType01_01@2x.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
z-index: 1;
}
.slider__inner .slider::after {
content: '';
width: 100%;
height: 100%;
background-color: rgba(224, 217, 88, 0.1);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.slider__info {
padding: 100px 0;
}
.slider__info .small {
display: inline-block;
padding: 1px 30px;
background-color: #fff;
color: #000;
font-size: 16px;
border-radius: 50px;
text-transform: uppercase;
margin-bottom: 10px;
}
.slider__info .title{
font-size: 80px;
color: #fff;
margin-bottom: 40px;
margin-left: -5px;
}
.slider__info .desc{
font-size: 18px;
line-height: 1.5;
color: #fff;
width: 50%;
word-break: keep-all;
}
.slider__info .btn{
margin-top: 100px;
}
.slider__info .btn a {
width: 180px;
background-color: #fff;
font-size: 16px;
display: inline-block;
text-align: center;
padding: 12px 0;
margin-right: 4px;
}
.slider__info .btn a:last-child{
background-color: #000;
color: #fff;
}
.slider__arrow a{
position: absolute;
top: 50%;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px;
width: 30px;
height: 56px;
display: block;
margin-top: -28px;
}
.slider__arrow a:first-child {
left: 20px;
}
.slider__arrow a:last-child {
right: 20px;
background-position: -52px 0;
}
.slider__dot{
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
.slider__dot a{
width: 16px;
height: 16px;
display: inline-block;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px;
margin: 0 3px;
}
.slider__dot a.dot {
background-position: -101px -1px;
}
.slider__dot a.active {
background-position: -121px -1px;
}
.slider__dot a.play {
background-position: -141px -1px;
}
.slider__dot a.stop {
background-position: -161px -1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.slider__inner .slider {
background-image: url(../asset/img/sliderType01_01@2x.jpg);
}
}
</style>
</head>
<body>
<div class="slider__warap nexon">
<h2 class="blind">메인 슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">EVENT</span>
<h3 class="title">오사카 여행</h3>
<p class="desc"> 휴식과 낭만 그리고 즐거움을 찾으러 오사카로 떠나는 이들을 위한 여행가이드 페이지
관광지, 맛집, 카페등 오사카여행지와 관련된 정보를 공유합니다. </p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#">상담신청</a>
</div>
</div>
<div class="slider__arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="blind">첫번째 이미지</span> </a>
<a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span> </a>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div> -->
</div>
</div>
</body>
</html>보충설명
| .blind | 웹페이지에서 시각 장애인을 위한 웹 접근성을 높이기 위해 사용되는 CSS 클래스명 중 하나. 일반적으로, 시각 장애인들은 스크린 리더(Screen Reader)라는 도구를 사용하여 웹페이지를 이용한다. 스크린 리더는 웹페이지에서 텍스트 정보를 읽어주는 도구인데, 이때 ".blind" 클래스를 사용하면 시각적으로 숨겨진 컨텐츠를 스크린 리더가 읽어주지 않도록 설정할 수 있고 시각적으로는 보이지 않지만 대체 텍스트가 제공되는 경우에는 ".blind" 클래스를 사용하여 해당 컨텐츠를 시각적으로 숨길 수도 있다. |
| margin-top: 0px !important | 요소의 위쪽(margin-top) 마진을 0으로 설정 "!important" 키워드는 다른 규칙에서 적용된 스타일을 덮어쓰는 경우나, 스타일 우선순위를 변경하고 싶을 때 사용한다. 그러나, 무분별한 사용은 코드를 복잡하게 만들고 유지보수를 어렵게 만들 수 있으므로 주의해서 사용해야 한다. |
| transform: translateX(-50%) | 해당 요소를 수평 방향으로 이동시키는데 사용한다. "translateX" 함수는 요소를 수평 방향으로 이동시키는 함수이며, 괄호 안의 값은 요소가 이동할 거리를 지정한다. 값이 음수인 경우 왼쪽으로 이동하며, 양수인 경우 오른쪽으로 이동한다. -50%는 요소의 가로 너비의 50%만큼 왼쪽으로 이동하겠다는 의미이다. |
| @media | 미디어 쿼리를 사용하여 특정 화면 크기나 장치 유형에 대한 스타일을 지정할 수 있다. 또, 고해상도(Retina) 디스플레이 등과 같이 픽셀 밀도가 높은 디바이스에서는 고해상도 이미지를 로드하거나, 폰트 크기를 더 크게 설정하여 더 선명한 화면을 제공할 수 있다. |
| (-webkit-min-device-pixel-ratio: 2) | 웹킷(Webkit) 브라우저(예: 크롬, 사파리)에서 픽셀 밀도가 2 이상인 디바이스에 적용될 스타일을 지정한다. |