[개발 일지 61일차] toco 프로젝트2 - 사이트 리뉴얼(12)

MSJ·2022년 8월 2일

project 개발일지

PROJECT

목록 보기

21/34

2022-08-02

오늘 진행 사항

1) 오전10시 멘토링

2) 조모임

3) 개별 작업

1) 멘토링

슬릭 슬라이더 라이브러리의 버튼은 이미지 양옆에 존재하는데, 그걸 버튼 이미지 위치에 옮겨서 실제로 버튼이 동작하게 만드는 방법을 멘토링에서 물었다.

다른 라이브러리 찾아보기
슬릭 슬라이더는 오픈소스니까 함수 찾아서 자체적으로 함수 만들어보기
블로그 참고 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=2z00&logNo=221181847251

3) 개별 작업

헤더 화면에 있는 글자를 이미지 바깥으로 빼고,
글자가 어느 화면 크기에서도 반응할 수 있는 상태를 만들고 싶은데 포지션을 지정햇을 경우 글자가 아예 못박혀버리는 상태 때문에 그걸 해결하는 중이다

요것만 끝나면 미디어 쿼리 작업할 수 있을 것 같은데,,, 결국은 미디어 쿼리 작업할때도 손을 많이 안대도 알아서 반응하도록 만드는 중이라 시간이 걸리는 것 같다

/* 헤더 */
.main-header {
    /* width: 100%; */
    /* height: 900px; */
   position: relative;
}
.main-header .header-wrap{
    /* position: absolute; */
    margin: 0 auto;
    /* border: 2px solid red; */
    width: 1440px;
    /* z-index: 1; */
    /* height: 900px;  */
    /* position: relative; */
    /* position: absolute; */
    /* z-index: 1; */
}
.main-header .head-box img{
    width: 100%;
    height: 900px;
    object-fit: cover;
    filter: brightness(55%);
    z-index: -1;
}
.main-header .slick-header-wrap{
    position: static;
    z-index: 1;
    width: 100%;
    height: 900px;  
}
.main-header .header-wrap h1, .main-header .header-wrap p{
    color: rgb(240, 240, 240);
   
}
.main-header h1 {
    width: 450px;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 4rem;
    border: 2px solid blue;
}
.main-header p {
    width: 700px;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 2rem;
    bottom: 250px;
    border: 2px solid blue;
}
/* <-> 버튼 */
.main-header .slick-button-wrap {
    position: absolute;
    z-index: 1;
    top: 750px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    border: 2px solid red;
}
.main-header .slick-button-wrap img{
    padding: 1rem;
    /* border: 1px solid red; */
    cursor: pointer;
}