2023.05.18 / 내일배움캠프[Node.js] - 4일차
| mainvisual 작업 (슬라이드) |
메인페이지에 문구를 보여주는 기능을 추가했다.
문구는 슬라이드로 버튼 클릭을 하면 다음 문구나 이전 문구로 이동하는 방식이다.
mainVisual.html
<!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>슬라이드</title>
<link rel="stylesheet" href="/static/css/mainVisual.css">
</head>
<body>
<div id="slideShow">
<ul class="slides">
<li>
<div class="mtxt">
<h3>Team.Nivea
Be the Learner,Be the Challenger
-Team.NIVEA?</h3>
<p> 나무보다는 숲을! <br>
미래지향적인 사고를 추구하는 iNtution(직관)형 MBTI를 가진저희가 뭉쳤습니다!
4조 Nㅣ베아가 궁금하지 않으신가요?👀✨
</p>
</div>
</li>
<li>
<div class="mtxt2">
<h3>-우리의 약속:글씨를 쓰는 손:</h3>
<p>
내 시간이 소중한것처럼 팀원들의 시간도 소중해요 <br>
→시간 약속을 반드시 지킵니다.불가피한 상황에선 반드시 연락해서 팀원들에게 미리 알려요!
아직은 시작단계! 누가 언제 수정했는지 알면 혼선이 덜 하겠죠? <br>
→git commit 시 수정 날짜와 작성자의 이니셜을 적습니다.<br>
질문하며 배우고 가르치며 성장합니다 <br>
→질문 하는 것에 주저하지 않고, 설명하며 한번 더 배워 같이 성장하는 팀이 됩니다.
</p>
</div>
</li>
<li>
<div class="mtxt3">
<h3>-Team.NIVEA의 목표
팀니베아는 포기 하지 않습니다!
</h3>
<p>
서로 서로 이끌어가며 이번 팀 프로젝트를 무사히 마무리하고, <br>
4개월 후에는 한층 성장한 모습으로 다시 만나는 것이 저희의 목표입니다. <br>
</p>
</div>
</li>
<li>
<table class="table">
<th>이름</th>
<th>내용</th>
<tr>
<td class="name">김재혁:</td>
<td>탄탄한 기본기를 다져 한발 더 앞서 나가자!</td>
</tr>
<tr>
<td class="name">배병일:</td>
<td>낙오되는 사람 없이 서로 도우며 성장하자!</td>
</tr>
<tr>
<td class="name">장두혁:</td>
<td>함께 배우면서 목표하는 바로 발전시켜 나가자 !</td>
</tr>
<tr>
<td class="name">오준석:</td>
<td>같이 공부하며 끝없이 배워나가자!</td>
</tr>
<tr>
<td>조윤주:</td>
<td>서로 이끌고 격려하여 포기말자!</td>
</tr>
</table>
</li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표
&rang: 오른쪽 방향 화살표 -->
<span class="prev">⟨</span>
<span class="next">⟩</span>
</p>
</div>
<script src="/static/js/mainVisual.js"></script>
</body>
</html>
해당 코드들은 인터넷을 통해 쉽게 구할 수 있었고 코드를 가져와 프로젝트를 진행하기 위해 필요한 부분들을 수정 해주었다.
|
<li>
<div class="mtxt">
<h3>Team.Nivea
Be the Learner,Be the Challenger
-Team.NIVEA?</h3>
<p> 나무보다는 숲을! <br>
미래지향적인 사고를 추구하는 iNtution(직관)형 MBTI를 가진저희가 뭉쳤습니다!
4조 Nㅣ베아가 궁금하지 않으신가요?👀✨
</p>
</div>
</li>
|
여기서 기존 코드는
<li><img src="image/flower.jpg" alt=""></li>
이거 였다. img src 를 이용해서 이미지를 불러오는 방법인데 우린 이미지가 아니라 텍스트를 불러오기위해
각 항목들을 div로 묶어주었다.이 div를 이미지처럼 불러주기 위해 css를 활용하였다.
mainVisual.css
* 초기화 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style-type: none;
}
/* 보여줄 구간의 높이와 넓이 설정 */
#slideShow{
width: 500px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden;
/*리스트 형식으로 이미지를 일렬로
정렬할 것이기 때문에, 500px 밖으로 튀어 나간 이미지들은
hidden으로 숨겨줘야됨*/
}
.slides{
position: absolute;
left: 0;
top: 0;
width: 4000px;
transition: left 1s ease-out;
}
.slides li:nth-child(1) {
background: url();
height: 300px;
width: 300px;
}
.slides li:nth-child(2) {
background: url();
height: 300px;
width: 300px;
}
.slides li:nth-child(3) {
background: url();
width: 300px;
height: 300px;
}
.slides li:nth-child(4) {
background: url();
width: 300px;
height: 300px;
margin-left: 30px;
}
.table {
border: 2px solid #111;
border-radius: 10px;
margin-left: 13px;
padding: 3px;
}
.table th + td {
border: 1px solid #111;
}
.name{
width: 70px;
}
.slides li:first-child{
margin-left: 63px
}
/* 슬라이드들 옆으로 정렬 */
.slides li:not(:last-child){
float: left;
margin-right: 100px;
}
.slides li{
float: left;
}
.controller span{
position:absolute;
background-color: transparent;
color: black;
text-align: center;
border-radius: 50%;
padding: 10px 20px;
top: 50%;
font-size: 1.3em;
cursor: pointer;
}
/* 이전, 다음 화살표에 마우스 커서가 올라가 있을때 */
.controller span:hover{
background-color: rgba(128, 128, 128, 0.11);
}
.prev{
left: 10px;
}
/* 이전 화살표에 마우스 커서가 올라가 있을때
이전 화살표가 살짝 왼쪽으로 이동하는 효과*/
.prev:hover{
transform: translateX(-10px);
}
.next{
right: 10px;
}
/* 다음 화살표에 마우스 커서가 올라가 있을때
이전 화살표가 살짝 오른쪽으로 이동하는 효과*/
.next:hover{
transform: translateX(10px);
}
.mtxt{
margin: 0 auto;
}
.mtxt > h3{
text-align: center;
line-height: 1.7;
}
.mtxt > p{
text-align: center;
line-height: 1.5;;
}
.mtxt2 > h3{
text-align: center;
line-height: 1.7;
}
.mtxt2 > p{
text-align: center;
line-height: 1.5;;
}
.mtxt3 > h3{
text-align: center;
line-height: 1.7;
}
.mtxt3 > p{
text-align: center;
line-height: 1.5;;
}
.mtxt4 > h3{
text-align: center;
line-height: 1.7;
}
.mtxt4 > p{
text-align: center;
line-height: 1.5;;
}
css를 살펴보면 이런 부분이 있다.
|
slides li:nth-child(1) {
background: url();
height: 300px;
width: 300px;
|
해당 코드는 slides 의 첫번째 li 라는 뜻이다.
이 css 덕분에 텍스트를 무사히 나타낼 수 있었다!
mainVisual.js
const slides = document.querySelector('.slides'); //전체 슬라이드 컨테이너
const slideImg = document.querySelectorAll('.slides li'); //모든 슬라이드들
let currentIdx = 0; //현재 슬라이드 index
const slideCount = slideImg.length; // 슬라이드 개수
const prev = document.querySelector('.prev'); //이전 버튼
const next = document.querySelector('.next'); //다음 버튼
const slideWidth = 300; //한개의 슬라이드 넓이
const slideMargin = 100; //슬라이드간의 margin 값
//전체 슬라이드 컨테이너 넓이 설정
slides.style.width = (slideWidth + slideMargin) * slideCount + '30px';
//한번 클릭할때 슬라이드 되는 넓이 설정
function moveSlide(num) {
slides.style.left = -num * 410 + 'px';
currentIdx = num;
}
prev.addEventListener('click', function () {
/*첫 번째 슬라이드로 표시 됐을때는
이전 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==0일때만 moveSlide 함수 불러옴 */
if (currentIdx !== 0) moveSlide(currentIdx - 1);
});
next.addEventListener("click", function () {
/* 마지막 슬라이드로 표시 됐을때는
다음 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==slideCount - 1 일때만
moveSlide 함수 불러옴 */
if (currentIdx !== slideCount - 1) {
moveSlide(currentIdx + 1);
} else if (currentIdx === 3) {
moveSlide(0);
}
});
js 부분에는 주석처리로 다 설명이 되어있기때문에 따로 설명하진 않겠다.
* 우리는 슬라이드가 넘어가다가 마지막 부분에 도달하였을때 한번 더 버튼을 클릭하면 진행 방향 그대로 처음 부분을 보여주면서 이어지기를 원했다..
구글링을 하면서 팀원 전체가 찾아보았지만 해당 기능은 구현하지 못했다..!!
이 기능은 추후에 혼자 찾아보고 수정할 것이다.
'긁적..' 카테고리의 다른 글
| 상세페이지 연결 localStorage / setTime, getTime (0) | 2023.06.05 |
|---|---|
| [1] Team.NIVEA 회고 (1) | 2023.05.19 |
| for반복문 증감식 (0) | 2023.05.19 |
| 동기 와 비동기 (0) | 2023.05.19 |
| 댓글 삭제 기능 (원하는 방법은 아니지만..) (0) | 2023.05.17 |