2022-07-05
선정한 웹사이트를 처음부터 끝까지 코딩해보는 작업.
복붙하기 보다는 직접 어떻게 동작할지 생각해보면서 나름대로 비슷하게 코딩해보고, 확인하고, 수정하는 과정을 거친다.
<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>
<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>
<script>
$( 'document' ).ready( function() {
$( '.proj-box-wrapper' ).slick( {
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false, /* 이 부분이 화살표를 없앰 */
</script>
이전에는 img에 마우스를 올렸을 때 로고img가 커지는 효과였는데, 이번에는 박스에만 hover하여도 로고가 커지는 것으로 변경했다. 분명 배웠던 부분 같은데, 막상 쓰려니 생각이 안나서 구글링해서 알아냈다.
<style>
/* 마우스 hover 효과 */
.proj-center .proj-box-wrapper .proj-box:hover img {
transform: scale(1);
}
</style>
전체구간 : 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>
우호호 다 잘된다 뿌듯
1500px 이상
940px
640px
430px
프로젝트를 통해 요구하는 화면과 기능
- 상단 메뉴바 (메인화면) : 마우스를 올렸을 때 펼쳐지는 기능
- 회사소개화면 (소개글, 연혁, 조직도, 오시는길) , 사업현황화면 (프로젝트), 정보마당화면 (공지사항, FAQ)
(저번 주)1. 플러그인 내부 이미지에 마진or패딩이 없다. CSS에서 개별로 주었을 땐 적용이 안된다. 어떻게 주는지 방법을 찾아야하는 상황.
어제 타운홀 미팅을 가는데 일반과정은 클론코딩 홈페이지를 만드신 개발자분과 직접 컨택하여 질응답 시간을 가졌다. 그때 홈페이지 클론코딩하면서 막혔던 부분들에 대해 동기생분들이 각자 질문을 하셨는데, 내가 막혔던 부분을 생각하다 갑자기 번뜩 하면서 질문이 쏙 들어갔음. 혹시...? 하고 집에와서 해보니 적용 잘 됐다.
설마 이 한 파트를 맡는 것도 이렇게 시간이 걸릴 줄은 몰랐다. 역시 아직은 홈페이지를 혼자 다 맡기에는 힘든 것 같다. 어제 화상통화로 미팅하신 개발자분의 말로는 프론트엔드는 1인 체제라던데...
가볍게 생각하기로 했으니까 이 마인드를 유지하자.