2022-07-01
클론 코딩
6명이 팀으로 실무프로젝트를 진행!
5번째 조인데 5늘의코딩->투데이코딩-> 팀명 toco가 됨
팀장님이 혼자선 버거우시다고 두 번째로 많은 표를 받은 내가 부팀장이 됨(헐)
작업 구역 선정
아무래도 코딩이 여러 사람이 동시다발적으로 같은 공간을 이용할 순 없는 노릇이라, 팀원들 내에서도 2명씩 조를 짜서 상단, 중앙, 하단을 쪼개어 작업 결정.
중앙을 맡은 나는 그중에서도 '프로젝트' 영역을 맡았다. 이미지 박스가 자동 슬라이드 되어 넘어가는 부분이다.
파악하기
자동으로 박스가 넘어가는 슬라이드 효과인 것 같은데...
슬라이드 효과에 대해서 강의 중에 언급이 잠깐 있었지만 구체적으로 들어가진 않아서 궁금증 해소를 위해 개발자모드로 들어갔다.
slick이라는 처음보는 플러그인을 사용.
플러그인이라고 다 적용하기 쉬운 건 아니었다.
진행
1) html 뼈대 만들기
바디의 중간 클래스 명을 뭘로 줄까 하다가 시멘틱 태그(의미있는 태그)의 중요성을 배운 게 생각이 났다.
콘텐츠 영역을 아무 이름도 없는 <div>가 아닌 <section>을 주기로 했다.
<!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>Resoft-center</title>
</head>
<body>
<section class="proj-center">
<h1>프로젝트</h1>
<h4>RESOFT PROJECTS</h4>
<div class="proj-box-wrapper">
<div class="proj-box">
<p><strong>송파구청 송파둘레길 비대면 걷기대회</strong></p>
<img src="./resoft_image/resoft_center_cardlogo/logo_songpa.png" alt="">
</div>
<div class="proj-box">
<p><strong>대구인문사회대학</strong></p>
<img src="./resoft_image/resoft_center_cardlogo/logo_inmun.png" alt="">
</div>
<div class="proj-box">
<p><strong>제15회 달서 하프 비대면 마라톤대회</strong></p>
<img src="./resoft_image/resoft_center_cardlogo/logo_Dalseo.png" alt="">
</div>
<div class="proj-box">
<p><strong>제8회 한성백제 비대면 마라톤대회</strong></p>
<img src="./resoft_image/resoft_center_cardlogo/logo_Great-Beakje.png" alt="">
</div>
<div class="proj-box">
<p><strong>2020대구 마스크 쓰GO 코로나 극복 레이스</strong></p>
<img src="./resoft_image/resoft_center_cardlogo/logo_colorful-DAEGU.jpg" alt="">
</div>
</div>
</section>
</body>
</html>2) css 가볍게 넣기
css도 가볍고 폭넓게 우선 구성을 잡아놓아야 눈으로 파악하기 쉽다. 세부 조정은 차차 해나갈 생각이다.
<style>
html, body{
font-size: 100%;
font-family: sans-serif;
line-height: 1.15;
margin: 0;
box-sizing: border-box;
background: rgb(240, 240, 240);
text-align: center;
}
.proj-center .proj-box-wrapper .proj-box img {
max-width: 100%;
height: auto;
}
.proj-center h1 {
color: #04088a;
}
.proj-center h4 {
color: #ee72d8;
}
.proj-box-wrapper {
width: 800px;
margin: 0px auto;
background-color: aqua;
}
</style>3) slick 플러그인 넣기
(여기서 진짜 많이 헤맸다)
웹을 만들기 때문에 외부 서버로부터 콘텐츠를 빠르게 전송 받아오는 CDN(콘텐츠 전송 네트워크) 방식을 선택했다. 따로 파일을 받을 필요 없이 링크를 넣는 것 만으로 작동 확인 가능! (대신 캐시 파일을 열심히 정리해야겠지만...)
해당 링크를 각각 헤드에 추가하고
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
바디 태그 최하단에 <script>를 추가하여 해당 동작을 하는 플러그인 함수를 넣었다
<script>
$( 'document' ).ready( function() {
$( '.proj-box-wrapper' ).slick( {
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
} );
} );
</script>원래는 이미지 하나씩만 넘기는데,
slidesToShow : 4 로 한 슬라이드 화면에 최대 4개까지 보여줄 수 있는 옵션을 추가로 넣는다
slidesToScroll : 1 넘어가는 블럭의 수를 정할 수 있다. 1은 한 블럭씩 넘어가고, 보여줄 내용이 많아서 한꺼번에 넘기고 싶으면 보여주는 블럭 수 만큼(여기선 4)을 넘기면 된다.
autoplay : 슬라이드가 자동으로 넘어간다
autoplaySpeed : 슬라이드 속도를 조정할 수 있음! 수치를 보아하니 js에서 속도 조정 단위로 쓰던 ms(밀리세컨즈)인 것 같다.
4) 최종 모습
현재 이 정도가 나왔다
앞으로 작업할 것
- 폰트 사이즈 세부 조정
- 슬라이드 이미지 간격 주기
- 슬라이드 양끝 화살표 없애기
- 박스 마우스 오버 시 로고 커짐
- 미디어쿼리로 화면 조정시 변경되는 값 지정하기
개발자 모드로 직접 들어가서 확인해보았다.
전체 미디어 쿼리 구간
1500px
940px
640px
430p
개별 미디어 쿼리 구간
1217px - 헤드, 하단 리소프트 로고~고객사 로고까지
767px - 중앙 카드(앱개발~XR콘텐츠구현)/프로젝트
- 팀원들 작업물 취합하기
- 호스팅 주소 만들기
또 있나..?
어려운 점
- 플러그인 적용이 처음에 꽤 어려웠다.
- 플러그인 내부의 이미지에 마진or패딩이 없다. CSS에서 개별로 주었을 땐 적용이 안된다. 어떻게 주는지 방법을 찾아야하는 상황.
해결 방법
- 알고보니 이용할 플러그에 맞는 CDN 주소를 넣어줘야했음. 다행히 구조는 잘 파악하고 맞춰서 넣었다.
- 언뜻 검색한 바로는 class에서 바로 값을 줬던 것 같은데 시도 해봐야겠다. 추후 내용 업뎃할 예정.
소감
처음에는 홈페이지 하나를 다 코딩한다했을 때 눈 앞이 까마득했다. 하지만 팀원별로 구역을 나누고 거기서 내 파트를 다시 잘게 쪼개어 나누니 생각보다 해볼만하다는 생각이 든다. 어...? 이거 이 정도면 해볼만하다...!
팀원들도 각자 못하든 잘하든 자기들이 하는 진행상황을 올려주니 아, 그래도 고민 하고 계시는 구나, 뭔가 하고 계시구나 하는 느낌을 줘서 나도 힘내게 된다.
++
그리고 뭐든 쉽게 가볍게 할 수 있다 생각하고 우선은 행동해야 한다는 걸 깨달았다. 모두에게 해당되는 말은 아니지만 나처럼 생각이 너무 많아서 괜히 복잡하게 머리 굴리고 작업 늦는 사람들은 진짜 쉽게쉽게 가볍게 생각해야 된다. 그래야 진행도 빨리 되고 직접 해보면서 뭐가 부족한지 파악할 시간이 나온다.
