/* 노말라이즈 */
* {
margin: 0;
padding: 0;
list-style:none;
box-sizing: 0;
}
/* 전체 슬라이드 */
.slide-div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 50%;
background-image: url(./background_image.jpg);
background-size: cover;
background-repeat: no-repeat;
/* 슬라이드 */
.slideshow-container {
position: relative;
margin: auto;
width: 550px;
height: 300px;
border: 2.5px solid #ccc;
/* '<', '>' 모양 버튼 */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -49%;
padding; 16px;
color: #aaa;
font-size: 4rem;
border-radius: 0 3px 3px 0;
user-select: none;
&:hover {
color: white;
}
}
/* 본문 */
.text {
color: black;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 58px;
width: 100%;
text-align: center;
line-height: 65px;
font-weight: bold;
background: transparent;
}
/* 팀원 이름 */
.name {
font-size: 35px;
background: transparent;
}
/* 팀원 관심사 */
.details {
background: transparent;
}
/* 숫자 텍스트 (1/5 ~) */
.numbertext {
color: black
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
font-weight: bold;
background: transparent;
}
/* 동그라미 버튼 감싸는 div */
.btn-containter {
background-color: transparent;
}
/* 동그라미 버튼 */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin 0 2px;
color: black;
border-radius: 50%;
display: inline-block;
border: 2px solid black;
/* 클릭된 동그라미 버튼 */
.active,
.dot: active {
background-color: #aaa;
}
'프로젝트로 배운 공부 > 팀프로젝트' 카테고리의 다른 글
| 검색 텍스트 박스에 넣을만한 기능 (0) | 2024.08.02 |
|---|---|
| 자바스크립트로 <div> 만들기 (0) | 2024.07.26 |
| 로그인 기능 구현하기 (0) | 2024.07.25 |
| 한글 입력 제한하기 (0) | 2024.07.24 |
| 글래스모피즘 css (0) | 2024.07.19 |