[SITE] 웹사이트 - 슬라이드 유형01

SliderType01

웹페이지 실습을 위한 슬라이드 유형을 실습해보겠습니다! 이번 슬라이드 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다.
그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆

---

< figma : 디자인 하기 >

이번 유형은 슬라이드 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

TIP !
• 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다.
• 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용자 눈에 보이지 않도록 블라인드 속성을 주기 위해 선택자로 블라인드를 설정합니다.
• 이미지 대체 텍스트를 눈에 안보이게 하기 위해 ir효과를 사용합니다.
• 이미지는 css로 넣기 때문에 이미지 안 텍스트 박스 구조로 작업합니다.
• 그 외 이동 아이콘과 dot부분의 아이콘은 각각 하나로 묶어주어서 이미지 | 이동아이콘 | dot 세개의 큰 틀을 잡아줍니다.

<section id="sliderType" class="slider__wrap">
    <h2 class="blind">슬라이드 영역</h2>
    <div class="slider__inner">
        <div class="slider">
            <div class="slider__img">
                <div class="desc">
                    <span>ANIMALS</span>
                    <h3>cUTE ANIMALS</h3>
                    <p>
                        너무 무리하지 말아요! 이미 당신은 잘하고 있고!<br>
                        앞으로도 잘 할 수 있어요! 
                    </p>
                    <div class="btn">
                        <a href="#">자세히 보기</a>
                        <a href="#" class="black">사이트 보기</a>
                    </div>
                </div>
            </div>
            <div class="slider__arrow">
                <a href="#" class="left"><span class="ir">이전 이미지</span></a>
                <a href="#" class="right"><span class="ir">다음 이미지</span></a>
            </div>
            <div class="slider__dot">
                <a href="#" class="dot active"><span class="ir">1</span></a>
                <a href="#" class="dot"><span class="ir">2</span></a>
                <a href="#" class="dot"><span class="ir">3</span></a>
                <a href="#" class="play"><span class="ir">플레이</span></a>
                <a href="#" class="stop"><span class="ir">정지</span></a>
            </div>
        </div>
    </div>
</section>

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
• 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋습니다.
• 각 영역과 섹션에 반복적으로 들어가는 속성들은 공통 속성으로 따로 설정하는 것이 좋습니다.
• 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킵니다.
• span 태그는 display: block를 먼저 설정하여 작업하는 것이 편리합니다.
• text-underline-position: under는 크롬 브라우저에게만 적용되는 속성으로 언더라인과 텍스트의 간격이 조금 생성됩니다.
• 이미지는 background: url()을 이용하여 배경에 삽입합니다.

/* font */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
em,
i,
address {
    font-style: normal;
}
li {
    list-style: none;
}
.blind{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
.gray {
    background-color: #f5f5f5;
}

/* sliderType */
.slider__inner {
    margin-top: 70px;
}
.slider {
    position: relative;
}
.slider__img {
    /* height: 500px;  밑에 세부 영역 잡기 전에 대충 잡아놓은 영역이므로 지우기 */
    background: url(../img/slider_type01_01.jpg) no-repeat center / cover;
}
.slider__img .desc {
    width: 1160px;
    margin: 0 auto;
    padding: 100px 20px;
}
.slider__img .desc span {
    font-size: 16px;
    background-color: #fff;
    padding: 1px 14px 0 14px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}
.slider__img .desc h3 {
    font-size: 110px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-left: -8px;
}
.slider__img .desc p {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 130px;
}
.slider__img .desc .btn {}
.slider__img .desc .btn a {
    font-size: 16px;
    background-color: #fff;
    padding: 11px 50px;
    display: inline-block;
}
.slider__img .desc .btn a.black {
    background: #000;
    color: #fff;
}
.slider__arrow a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 56px;
    background: url(../img/slider_icon.svg);
}
.slider__arrow a.left {
    left: 20px;
}
.slider__arrow a.right {
    right: 20px;
    background-position: -50px 0; /* x축으로 -50px이동해야 나온다. */
}
.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
}
.slider__dot a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../img/slider_icon.svg);
    background-position: -20px -70px;
}
.slider__dot a.active {
    background-position: 0 -70px;
}
.slider__dot a.play {
    background-position: -40px -70px;
}
.slider__dot a.stop {
    background-position: -60px -70px;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기