The Way To Get Started Is To Quit Talking And Begin Doing.
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 : 부모 요소의 속성값을 상속받습니다. |
완성된 슬라이드 유형 페이지
