“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
figma로 만든 다음의 슬라이드 유형을 코딩으로 만들어 보겠습니다.
간략한 설명:
사진이 전체 배경이고, 사진 위에 글자와 버튼을 올렸습니다.
글자와 버튼들이 잘 보일 수 있도록 사진을 조금 어둡게 했습니다.
EVENT 버튼과 자세히 보기, 상담 신청 버튼들과 페이지를 넘기는 화살표, 그리고 페이지가 넘어가는 것을 알 수 있도록 밑에 표시를 해줬습니다.
이제 body와 style을 나눠서 세부적인 설명을 하겠습니다.
body
<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">이탈리아로 떠나는 여행이 궁금하시지 않으세요? 지금부터 이탈리아로 떠나는 여행이 얼마나 즐거울지 소개합니다.</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>
</section>
</body>각 부분들을 나눠서 class로 이름을 정해주고, style에서 class를 다듬어 주면 됩니다.
전체를 감싸는 div class="slider__inner"와 그 안에 있는 div class="slider"가 있습니다.
영역을 나눠서 공통적으로 적용시키고 싶은 태그들이 있기 때문입니다.
body를 제목이 있는 부분, 페이지 양 끝에 있는 화살표, 그리고 페이지 넘김을 알려주는 표시들로 나눴습니다.
style
<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
}
.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;}
.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__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;
}
.section__small {
font-size: 14px;
color: white;
background-color: #714dff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
border-radius: 50px;
}
/* slider__wrap */
.slider__inner .slider {
height: 600px;
background-image: url(../asset/img/SLIDER-TYPE01_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: 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;
padding: 12px 0;
background-color: #fff;
font-size: 16px;
display: inline-block;
text-align: center;
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/SLIDER-TYPE01@2x.jpg);
}
}
</style>슬라이드 유형도 이전과 마찬가지로 공통적으로 적용되는 부분들은 같습니다.
버튼들은 figma로 이미지를 만들어서 저장한 후에 크기와 위치를 style에서 조정해줬기 때문에 위와 같이 된 것입니다.
웹 접근성이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식입니다.
blind 선택자는 콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우에 사용합니다.
콘텐츠를 숨기는 방법 중에,
display:none과 visibility:hidden, font-size:0, line-height:0, width:0, height:0과 같이 화면에서 영역이 잡히지 않는 속성들이 있지만, 스크린 리더기에 읽히지 않아서 웹 접근성이 좋지 않은 속성입니다.
스크린 리더기는 width, height가 0인 속성들은 읽을 수 없으므로, 사이즈는 최소 1px 이상으로 해야합니다.
position: absolute는 clip 속성이 absolute, fixed 일 경우에만 적용이 가능합니다.
clip 은 top, bottom, left, right의 값이 같으면 요소가 숨겨집니다.
border:0은 border-style을 적용했을 때를 대비해 안전하기 0으로 설정합니다.
overflow: hidden은 overflow된 콘텐츠를 숨깁니다.
z-index 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성입니다.
position(relative, absoulute,fixed)속성이 적용된 요소에서만 작동합니다.
auto는 기본값으로 z-index를 지정하지 않은 것과 같고,
number는 배치 순서를 결정합니다. 숫자가 낮을 수록 뒤에 배치되며 숫자가 높을 수록 앞에 나옵니다.
음수도 가능합니다.
initial은 기본값으로 설정하는 것입니다.
slider__inner에 이 z-index를 설정하고, 배경색을 어둡게 해주기 위해서 rgba(0,0,0,0.2) 를 설정했습니다.
first-child 선택자는 첫 번 째 자식요소를 선택된 요소를 선택한다는 뜻입니다.
last-child 선택자는 마지막 자식요소를 선택한다는 뜻입니다.
slider__arrow를 페이지의 왼쪽과 오른쪽에 위치시켜서 따로 조정해줘야 하기 때문에 **-child로 구분한 것입니다.
@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.