728x90
반응형
슬라이드 유형 페이지 만들어보기!!
이미지 유형 : https://dongjin6539.tistory.com/28
카드 유형 : https://dongjin6539.tistory.com/31
텍스트 유형 : https://dongjin6539.tistory.com/35
이미지/텍스트 유형 : https://dongjin6539.tistory.com/39
헤더 유형 : https://dongjin6539.tistory.com/44
푸터 유형 : https://dongjin6539.tistory.com/49
지난 번에 이어 또다른 페이지를 만들어보았습니다.
지난 번과 같은 방식으로 시작해보겠습니다.
코드 블럭
<!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>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* 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;
}
.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: #FF0000;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
line-height: 1.5;
}
.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.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.3);
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: 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: #454545;
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: -121px -1px;
}
.slider__dot a.active {
background-position: -100px -1px;
}
.slider__dot a.play {
background-position: -145px -1px;
}
.slider__dot a.stop {
background-position: -167px -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>
<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="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>
</html>
방법
- 지난번에 했던 유형 페이지 의 글꼴과 style 태그의 /* reset */, /* commom */ 에 해당하는 부분은 모든 페이지의 공용으로 사용하기 때문에 그대로 가져왔습니다. 다만, 추가로 바꿔야 할게 있으면 모든 페이지에 추가를 해줘야 합니다.
- 지나번 페이지 만드는 방법과 매우 흡사합니다.
- 이번에는 가운데 정렬과 section 스타일을 사용하지 않기 때문에 body 태그에 section 태그를 주고 class 명을 "slider__wrap nexon"을 입력해줍니다.
- 자식으로 h2 태그로 일단 영역을 표시해주고 class 명을 "blind"로 입력하고 스타일을 계속 사용할 수도 있기 때문에 style 태그의 /* reset */ 부분에 숨기기 위한 스타일 속성을 입력해줍니다.
- h2 태그의 형제로 div 태그를 만들어 class 명을 "slider__inner"로 입력해줍니다. 다시 그의 자식으로 div 태그를 만들어 class 명을 "slider"로 입력해줍니다.
- style 태그로 이동해서 "slider__inner", "slider" class에 각각 원하는 스타일 속성을 입력해주고 확인을 해줍니다.
- body 태그로 이동해서 위 이미지를 보시면 텍스트, 페이지 넘김 화살표, 이미지 버튼을 입력하기 위해 "slider" class의 자식으로 div 태그를 3개 만들어 주고 각각 class 명을 "slider__info container", "slider__arrow", "slider__dot"로 입력해줍니다.
- class명을 "slider__info container"에서 "container"을 준 이유는 style 태그의 /* commom */ 부분의 스타일을 적용하기 위해 중복으로 입력했습니다.
- body 태그로 이동해서 "slider__info container"의 자식으로 span 태그, h3 태그, p 태그, div 태그를 입력하고 각각 class명을 "small", "title", "desc", "btn"을 입력하고 각각 텍스트를 입력하고 div태그의 자식으로 링크를 주기 위해 a 링크 태그 2개를 입력해줍니다.
- style 태그로 이동해서 "slider__info", "small", "title", "desc", "btn" class와 a 링크 태그에 각각 원하는 스타일 속성을 입력해주고 확인을 해줍니다.
- "slider__arrow", "slider__dot"의 버튼 이미지는 스케치 했던 피그마 앱에서 svg 파일로 가지고 와서 각각 원하는 사이즈와 스타일 속성을 입력해줍니다.
- 그러면 원하는 웹 페이지가 만들어집니다.
참고
- 이미지를 컴퓨터 크기와 속성에 따라 화질을 더 좋게 보여줄 수 있습니다.
@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);
}
}- 아직 잘 모르는 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| clip | 요소의 특정 부분만 나오도록 할 수 있습니다. |
| overflow | 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. |
| z-index | 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. |
| word-break | 텍스트가 콘텐츠 상자를 넘칠 때마다 줄 바꿈을 표시할지 여부를 설정합니다. |
| transform: translateX( ) | 요소를 X축으로 움직이는 효과를 줍니다. |
- 이해가 안됐을 경우 이용해 보세요!!
https://www.youtube.com/watch?v=OOrjaMGiChw
https://dongjin6539.github.io/web2023/site/index.html
728x90
반응형
