2022-07-05
클론 코딩
첫 포스팅에 클론 코딩에 대한 개념을 쓰지 않은 것 같아 간단히 써봄
선정한 웹사이트를 처음부터 끝까지 코딩해보는 작업.
복붙하기 보다는 직접 어떻게 동작할지 생각해보면서 나름대로 비슷하게 코딩해보고, 확인하고, 수정하는 과정을 거친다.
어제 정리한 금주 작업분
- 폰트 사이즈 세부 조
- 슬라이드 이미지 간격 주기
- 슬라이드 양끝 화살표 없애기
- 박스 마우스 오버 시 로고 커짐
- 미디어 쿼리로 화면 조정 시 변경되는 값 조정하기
전체구간 : 1500px, 940px, 640px, 430px
개별 구간: 1217px, 767px - 팀원들 작업물 취합하기
- 호스팅 주소 만들기
진행
1) 폰트 세부 조정하기
<style>
/*프로젝트 타이포 타이틀 */
.proj-center h1 {
color: #04088a;
font-size: 2.5rem;
font-weight:bolder;
}
.proj-center h4 {
color: #ee72d8;
letter-spacing: 0.25rem;
margin-top: -1.2rem;
margin-bottom: 4rem;
}
/* slick slider 플러그인 안의 > 각 div 박스 안의 > 콘텐츠 박스 : p태그와 img의 여백 조정을 원할히 하기 위해 추가함 */
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 20px;
height: auto;
word-break: keep-all;
text-align: left;
</style>2) 슬라이드 이미지 간격주기
<style>
/* slick slider 플러그인 안의 > 각 div 박스 : 플러그인이 내용물 div로 인식하는 부분. 나열됨 */
.proj-center .proj-box-wrapper .proj-box{
width: 300px;
height: 300px;
background-color: white;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
position: absolute;
top: 40%;
transition: transform 0.3s ease-in-out;
transform: scale(0.9);
}
</style>3) 슬라이드 양끝 화살표 없애기
<script>
$( 'document' ).ready( function() {
$( '.proj-box-wrapper' ).slick( {
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false, /* 이 부분이 화살표를 없앰 */
</script>4) 박스 마우스 오버 시 로고 커짐
이전에는 img에 마우스를 올렸을 때 로고img가 커지는 효과였는데, 이번에는 박스에만 hover하여도 로고가 커지는 것으로 변경했다. 분명 배웠던 부분 같은데, 막상 쓰려니 생각이 안나서 구글링해서 알아냈다.
<style>
/* 마우스 hover 효과 */
.proj-center .proj-box-wrapper .proj-box:hover img {
transform: scale(1);
}
</style>5) 미디어 쿼리로 화면 조정 시 변경되는 값 조정하기
전체구간 : 1500px, 940px, 640px, 430px
개별 구간: 1217px, 767px
(현란)
<style>
/* -------------------------------------------------------- 1217 미디어 쿼리 */
@media (max-width : 1217px){
/* slick slider > div 박스 > 콘텐츠 박스 - 크기가 */
.proj-center .proj-box-wrapper .proj-box .proj-cont{
width: 200px;
}
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 23px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 55%;
}
}
/* ------------------------------------------------ 940 미디어 쿼리 */
@media (max-width: 940px){
/*프로젝트 타이틀 */
.proj-center h1 {
color: #04088a;
font-size: 1.5rem;
font-weight:bolder;
}
/* slick 부분 */
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 25px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 55%;
}
}
/* ------------------------------------------------ 430 미디어 쿼리 */
@media (max-width: 430px){
.proj-center h4 {
margin-bottom: 2rem;
}
/* slick 부분 */
.proj-center .proj-box-wrapper .proj-box {
margin: 30px;
}
.proj-center .proj-box-wrapper .proj-box .proj-cont{
width: 254px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 40%;
}
}
</style>
<!-- slick 동작 js -->
<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>
<script>
$( 'document' ).ready( function() {
$( '.proj-box-wrapper' ).slick( {
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [{ breakpoint: 940,
settings:{
slidesToShow:3
}
},
{ breakpoint: 680,
settings:{
slidesToShow:2
}
},
{ breakpoint: 431,
settings:{
slidesToShow:1
}
}]
} );
} );
</script>우호호 다 잘된다 뿌듯
6) 최종 모습
1500px 이상
940px
640px
430px
앞으로 작업할 것
- 폰트 패밀리 noto sans 추가
- 팀원들 작업 코드들 취합
- 호스팅 주소 만들기
- 새 기능 추가에 대해 구상하기 - 공지사항 참고
프로젝트를 통해 요구하는 화면과 기능
- 상단 메뉴바 (메인화면) : 마우스를 올렸을 때 펼쳐지는 기능
- 회사소개화면 (소개글, 연혁, 조직도, 오시는길) , 사업현황화면 (프로젝트), 정보마당화면 (공지사항, FAQ)
어려운 점
(저번 주)1. 플러그인 내부 이미지에 마진or패딩이 없다. CSS에서 개별로 주었을 땐 적용이 안된다. 어떻게 주는지 방법을 찾아야하는 상황.
- 미디어 쿼리를 비롯한 모든 세부 조정에 대한 의혹... ... 내가... 잘 하고 있나...? 이게 맞나...? 이렇게 복잡해도 되는 건가...?
해결 방법
- 작업 덜해서 팀원들 보긴 그래서 어제 새벽에 해결함... 알고보니 내가 마진을 줬던 부분은 로고img 부분이었다. 내용물을 전부 감싸는 div 박스에 마진을 줬어야 했는데, 당시에는 거기에 줬다고 생각했나보다. 작업물을 이틀 푹 쉬고 다시 보니 눈에 보이는 매직..
어제 타운홀 미팅을 가는데 일반과정은 클론코딩 홈페이지를 만드신 개발자분과 직접 컨택하여 질응답 시간을 가졌다. 그때 홈페이지 클론코딩하면서 막혔던 부분들에 대해 동기생분들이 각자 질문을 하셨는데, 내가 막혔던 부분을 생각하다 갑자기 번뜩 하면서 질문이 쏙 들어갔음. 혹시...? 하고 집에와서 해보니 적용 잘 됐다.
- 일단 내가 아는 지식 내에서는 최선을 다했다고 생각함... 코드가 살짝 지저분해 보이긴 한데, 나는 최선을 다했다... 다른 팀원분들이 각자 확인하셨는데 작동도 잘 된다고 하심!!
소감
설마 이 한 파트를 맡는 것도 이렇게 시간이 걸릴 줄은 몰랐다. 역시 아직은 홈페이지를 혼자 다 맡기에는 힘든 것 같다. 어제 화상통화로 미팅하신 개발자분의 말로는 프론트엔드는 1인 체제라던데...
가볍게 생각하기로 했으니까 이 마인드를 유지하자.
제로부터 시작하는 프로그래밍&코딩