“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
슬라이더 타입 웹페이지 만들기
슬라이더타입 웹페이지는 주로 웹사이트이 메인 화면에 쓰입니다.
이벤트를 연동하거나 웹페이지의 중요한 이슈를 다루는 슬라이더 타입 웹페이지를 만들어 보겠습니다.
완성화면
Figma작업 화면
코딩은 하나만 작업했지만 실제로 슬라이더는 여러 장 일 때 쓰이므로 디자인 작업은 3페이지를 했습니다.
🏳 소스링크
https://github.com/aimeekwon/web2023/blob/main/site/sliderType/sliderType01.html
HTML
<body>
<section class="slider__wrap 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">이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요.<br>
처음 보는 식물도 잘 키울 수 있어요! </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></span>
<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 class="slider"></div> -->
</div>
</section>
</body>- 먼저 section으로 slider전체를 감싸주고 글씨체를 class로 지정합니다.
- slider_inner로 컨텐츠를 한번더 감싸 컨텐츠의 위치를 지정할 준비를 합니다.
- class='"slide__wrap" 아래에 <h2 class="blind">메인슬라이드영역</h2>으로 페이지 설명을 작성해 넣어 시각장애인과 비장애인의 웹접근성을 고려한 코드를 작성하였습니다.
🔊blind css코드 작성하기
| .blind | 화면에서는 안보이지만 스크린리더기에는 읽혀지게 작성합니다 |
| 스크린리더는 width, height가 0인 속성들은 읽을 수 없으므로 1px씩 적용 합니다. | |
|
.blind {
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
}
|
CSS
/* slider__wrap */
.slider__wrap {}
.slider_inner {}
.slider__inner .slider {
height: 600px;
background-image: url(../asset/img/sliderType01_01.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(0, 0, 0, 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: 16px;
}
.slider__info .title{
font-size: 80px;
color: #fff;
margin-bottom: 45px;
margin-left: -2px;
}
.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{
display: inline-block;
width: 180px;
height: 40px;
line-height: 40px;
background-color: #fff;
font-size: 16px;
text-align: center;
margin-right: 4px;
}
.slider__info .btn a:last-child {
background-color: #000;
color: #fff;
}
.slider__arrow{}
.slider__arrow a {
position: absolute;
top: 50%;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px ;
width: 32px;
height: 58px;
display: block;
margin-top: -29px;
}
.slider__arrow a:first-child {
left: 20px;
}
.slider__arrow a:last-child {
right: 20px;
background-position: -50px 0;
}
.slider__dot{
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
.slider__dot a{
width: 16px;
height: 16px;
background-size: 500px;
display: inline-block;
/* background-color: #fff; */
background-image: url(../asset/img/icon_main.svg);
}
.slider__dot a.dot{
background-position: -101px -1px;
}
.slider__dot a.dot.active{
background-position: -122px -1px;
}
.slider__dot a.play{
background-position: -164px -1px;
}
.slider__dot a.stop{
background-position: -184px -1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
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);
}
}🏳 background-img/ background-position
- 아이콘을 넣을 때는 한장의 페이지에, 적용할 아이콘들을 다 만들어 넣어 , 백그라운드이미지로 적용하여, 각 아이콘의 선택자에 백그라운드 포지션을 이용하여 위치지정을 해주어 적용하였습니다.
.slider__dot a{
width: 16px;
height: 16px;
background-size: 500px;
display: inline-block;
/* background-color: #fff; */
background-image: url(../asset/img/icon_main.svg);
}
.slider__dot a.dot{
background-position: -101px -1px;
}
.slider__dot a.dot.active{
background-position: -122px -1px;
}
.slider__dot a.play{
background-position: -164px -1px;
}
.slider__dot a.stop{
background-position: -184px -1px;
}
-@media 를 이용하여 애플제품 등 기타 고해상도가 필요한 화면에서 슬라이더의 이미지를 더 잘 보여지게 하기 위해 추가로 이미지를 적용합니다. 이미지의 용량이 너무 커지는 것을 방지하기 위하여 이미지 최적화 사이트에서 작업 후 업로드를 해줍니다.
🔈참조 :
이미지 최적화 사이트 : https://imagecompressor.com/ko/
CSS : 기본설정
/* reset */
* {
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: 0!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;}CSS : 공통
/* 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: #0c3934;
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 p {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
}
.section_desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}