2일차

참고 사이트

스크롤 이동시 fixed
https://m.blog.naver.com/PostView.nhn?blogId=sin_uu&logNo=220456726774&proxyReferer=https:%2F%2Fwww.google.com%2F

슬라이드 이동
https://im-developer.tistory.com/97

메인페이지 레이아웃 잡기

 

1.막힌 부분

스크롤을 내릴때(스크롤위치가 300이상일때)

1. left메뉴가 전체 height를 출력못하고 짤림

2. left메뉴 position이 fixed로 변경되어서  center부분이 왼쪽으로 밀림

  $(document).ready(function(){
    $(window).scroll(function(){
      var scrollValue = $(this).scrollTop()
      if(scrollValue>300) {
        console.log(scrollValue)
        $(".left").css("position", "fixed");
        $(".left").css("top", "50");
        $(".left").css("left", "0");
        // $(".center").css("margin-left", "15%")
      } else {
        // $(".left").css("position", "relative");
        // $(".center").css("margin-left", "0%")
      }
    })
  })

1.문제 해결

1. 스크롤 300이상 일때

center태그 margin-left : 15%   -> position이 fixed로 변경되기때문에

left태그 top : 0   -> left메뉴가 전체 height를 출력못하고 짤리기 때문에

 

2. 스크롤 300이하 일때

center태그 margin-left : 0%로 원상 복귀

left태그 position : relative

  $(document).ready(function(){
    $(window).scroll(function(){
      var scrollValue = $(this).scrollTop()
      if(scrollValue>300) {
        console.log(scrollValue)
        $(".left").css("position", "fixed");
        $(".left").css("top", "0");
        $(".left").css("left", "0");
        $(".center").css("margin-left", "15%")
      } else {
        $(".left").css("position", "relative");
        $(".center").css("margin-left", "0%")
      }
    })
  })

 

2. 막힌부분

메인페이지와 게시물 리스트 페이지에서 출력할 content는 일정 문자열이 지나면 ...으로 표시할려고 했는데

데이터를 만들어두지 않아서 데이터 수정이 필요했습니다.

 

2. 문제 해결

          // axios.get 요청 끝났을때 상황
          if(state.insideData.length == insidePage.length) {

            // inside데이터 최신순으로 바꾸는 과정
            state.insideData.sort()
            console.log(state.insideData)

            // inside데이터 내용 부분 120글자 넘어가면 substr으로 자르기 - 게시물 리스트 페이지에서 사용할거
            state.listInsideData = JSON.parse(JSON.stringify(state.insideData))
            for(var k=0; k<state.insideData.length; k++) {
              state.listInsideData[k][6] = state.insideData[k][6].substr(0, 120)
            }
            console.log(state.listInsideData)

            // 120글자로 자른 데이터를 2개만 출력하는 부분 - 메인페이지에 최신글 2개만 출력하려고
            state.recentInsideData = state.listInsideData.slice(state.listInsideData.length-2,state.listInsideData.length)
            state.recentInsideData.reverse()
            console.log(state.recentInsideData)
          }