본문 바로가기
HTML

슬라이드 유형 페이지 만들어보기!!

by dongjin6539 2023. 3. 15.
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
반응형