728x90
반응형
Figma
피그마를 이용해 만들고자하는 슬라이드 유형의 페이지를 작업했습니다.
슬라이드 유형 페이지 안에 넣은 아이콘을 만들어 jpg파일로 저장해주었습니다.
HTML 코드
<!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>
</head>
<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 class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
</body>
</html>html 영역별 설명
- <h2> : 제목을 적어줍니다.
- <div class="slider__inner"> : 내용을 담을 구역을 만들어 줍니다.
- <div class="btn"> 영역 안에는 <a>,<button> 등의 버튼태그를 만들어 줍니다.
- slider__arrow, slider__dot라는 클래스명을 가진 태그를 넣습니다.
- <div class="slider__arrow"> 영역 안에는 피그마 이미지 양 옆에 있는 아이콘이 들어갈 링크형 버튼 태그를 넣어줍니다.
- <div class="slider__dot"> 영역 안에 피그마 이미지 하단에 있는 5개의 아이콘이 들어갈 링크형 버튼 태그 5개를 넣어줍니다.
CSS 코드
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
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;}
/* 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: #c95353;
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__wrap {}
.slider__inner {}
.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(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;
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: -100px 0;
}
.slider__dot a.active {
background-position: -121px 0;
}
.slider__dot a.play {
background-position: -141px 0;
}
.slider__dot a.stop {
background-position: -163px 0;
}
@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>이전에 만들었던 페이지 유형과 똑같이 공통 reset css 와 common css 효과를 적용시켜줍니다.
각 영역에 클래스별 css를 사용하여 화면을 꾸며줍니다.
@media ... 영역은 미디어 쿼리를 사용한 속성으로 저밀도 디스플레이 장치에 적용됩니다.
디바이스의 물리적 해상도가 2dppx이상인 경우에만 해당 스타일이 적용되는 것입니다.
고밀도 디스플레이에서 더 높은 해상도의 이미지를 표시할 수 있으며 이미지의 선명도를 향상 시킬 수 있습니다.
CSS 속성 정리
| 속성 | 설명 |
| clip | 요소의 특정 부분만 나오도록 할 수 있습니다. auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
| clip : rect( top, right, bottom, left) | position 속성값이 absolute 또는 fixed일 때만 적용됩니다. top : 위를 기준으로 시작하는 위치 right : 왼쪽을 기준으로 끝나는 위치 bottom : 위를 기준으로 끝나는 위치 left : 왼쪽을 기준으로 시작하는 위 |
| overflow | 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. hidden : 넘치는 부분은 잘려서 보여지지 않습니다. scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) |
| background-size | 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다. 백분율을 사용할 수도 있습니다. cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다. contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
| background-repeat | 배경 이미지의 반복 여부와 반복 방향을 정합니다. repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
| text-transform | 대문자로 또는 소문자로 바꾸는 속성입니다. 한글에서는 의미가 없는 속성입니다. none : 입력된 그대로 출력합니다. capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다. uppercase : 모든 글자를 대문자로 바꿉니다. lowercase : 모든 글자를 소문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
| transform | 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. scale() : X 또는 Y축으로 확대/ 축소 rotate() : 지정 요소 회전 translate() : 지정 요소 X 또는 Y축으로 이동 skew() : 지정 요소 X 또는 Y축으로 기울이기 |
| word-break | 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : 단어 기준으로 줄바꿈합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
완성된 슬라이드 유형 페이지
