728x90
1. 화면분할
- height 62px
- left 60% / 배경 #333
- right 40%/ 배경 #f6f5ef
- h2 / size 17px / weight 700 / margin-right 20px
- 아이콘 사이즈 30px
2. swiper로 공지사항 리스트 만들기
1. 화면 분할
(힌트)
더보기
더보기
section안에
1) notice-line 자식 요소로 bg-left, bg-right, inner 생성
2) inner 자식요소로 inner__left, inner_right 생성
<section class="notice">
<div class="notice-line">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="inner">
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container"></div>
<a href="javascript:void(0)" class="notice-line__more">
<div class="material-icons">add_circle</div>
</a>
</div>
<div class="inner__right">
<h2>스타벅스 프로모션</h2>
<div class="toggle-promotion">
<div class="material-icons">upload</div>
</div>
</div>
</div>
</div>
</section>.notice .notice-line {
position: relative;
}
.notice .notice-line .bg-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.notice .notice-line .bg-right {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #f6f5ef;
}
.notice .notice-line .inner {
height: 62px;/*부모에 높이값이 없고, 기본값이 세로로 줄어들려고 하기때문에 */
display: flex;
}
.notice .notice-line .inner__left {
width: 60%;
height: 100%;
background-color: #333;
display: flex;
align-items: center;
}
.notice .notice-line .inner__left h2 {
color: #fff;
font-size: 17px;
font-weight: 700;
margin-right: 20px;
}
.notice .notice-line .inner__left .swiper-container { /*중요*/
height: 62px;
flex-grow: 1;
}
.notice .notice-line .inner__left .swiper-slide {
height: 62px;
display: flex;
align-items: center;
}
.notice .notice-line .inner__left .swiper-slide a {
color: #fff;
}
.notice .notice-line .inner__left .notice-line__more {
width: 62px;
height: 62px;
display: flex;
justify-content: center;
align-items: center;
}
.notice .notice-line .inner__left .notice-line__more .material-icons {
color: #fff;
font-size: 30px;
}
.notice .notice-line .inner__right {
width: 40%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.notice .notice-line .inner__right h2 {
font-size: 17px;
font-weight: 700;
}
.notice .notice-line .inner__right .toggle-promotion {
width: 62px;
height: 62px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.notice .notice-line .inner__right .toggle-promotion .material-icons {
font-size: 30px;
}
2. swiper사용해 수직으로 올라가는 공지사항 리스트 만들기
(힌트)
더보기
더보기
1) swiperjs사이트에서 css, js링크 함께 연결
2) js에서 direction, autoplay, loop 속성 부여
*사이트의 demo에서 다양한 예제 확인 가능
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)">연말연시 영업시간</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">크리스마스 기간 이벤트 안내</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">당첨자 발표 2021 플래너 증정</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)">어플리케이션 버전 업데이트 안내</a>
</div>
</div>
</div>
<a href="javascript:void(0)" class="notice-line__more">
<div class="material-icons">add_circle</div>
</a>
</div>// swiper
// new Swiper(선택자, 옵션)
new Swiper('.notice-line .swiper-container', {
direction: 'vertical',
autoplay: true,
loop: true
});728x90
'FE' 카테고리의 다른 글
| 섹션 안에 버튼 삽입 (0) | 2021.10.17 |
|---|---|
| JavaScript 토글 보이기 숨김 기능 / 슬라이드 페이지네이션, 네비게이션 스타일 추가하는 방법 (0) | 2021.10.17 |
| 이미지 순차적으로 나타나기, 기본 버튼 css에서 스타일주기 (0) | 2021.10.15 |
| 메인메뉴 상단 고정, 따라다니는 배지 스크롤하면 사라지기 (0) | 2021.10.13 |
| 메인메뉴와 하위 드롭메뉴 만들기 (0) | 2021.10.12 |
