4주차 - 스크롤바 + 화면에 버튼 고정 시키기 + 퀴즈

스크롤바 움직이는 방법은

      <Top onClick={() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }) }}>
        위로 가기
      </Top>

window.scrollTo()를 사용해서 top과 left를 설정해서 위치를 조정 해주고, behavior은 어떤 느낌으로 움직일지 정해준다.

 

+ 추가 기능 (위로가기 버튼 화면에 고정 시키기)

: position : fixed를 사용하면 화면에 고정 시킬 수 있다. (bottom과 right로 위치 설정)

const Top = styled.button`
  position : fixed;
  bottom : 50%;
  right : 2rem;
  
  background-color: blueviolet;
  color : white;
  border: blueviolet;
  width: 100px;
  height: 50px;
  border-radius: 50px;
`

 

실행영상

---

퀴즈

 

요구조건

1) 버킷리스트 아이템을 추가하면, 리스트 항목이 있는 div에만 스크롤이 생기게 만들기

(키워드 : overflow, max-height, 혹은 div 넘치지 않게 만들기)

 

버킷리스트 styled-component에 max-height를 지정해서 스크롤이 생기도록 설정함

const ListStyle = styled.div`
  display: flex;
  max-height: 400px;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
`;

2) 프로그래스바, 바에 동그라미 만들기

(키워드 : flex, align-items, div 겹치려면?)

// prograsbar.js

    return (
        <ProgressBar>
            <HighLight width={Math.round((count / bucket_list.length) * 100) + "%"}>
                {/* -> Math.round(완료 개수 / 전체 * 100) */}
            </HighLight>
            <Dot></Dot>
        </ProgressBar>
    );
    
    
const ProgressBar = styled.div`
    background-color: #eee;
    width: 100%;
    height: 20px;
    display: flex;
    align-items : center;
`

const HighLight = styled.div`
    background-color: #a673ff;
    transition : 1s;
    // == transition : 1s width;
    width: ${(props) => props.width};
    height: 20px;
    border-radius: 10px;
`

const Dot = styled.div`
    width: 40px;
    height: 40px;
    background-color: white;
    border: 5px solid #a673ff;
    border-radius: 40px;
    margin: 0px 0px 0px -20px;
`

3) input focus일 때 border 색상 바꿔보기

(키워드 : input text focus border 색상 바꾸기)

: &를 사용하면 자기 자신의 요소에 접근 할 수 있고 자식 요소에 접근 할 때는 & > input을 사용하고

focus를 설정 할 때는 input:focus를 사용한다.

// App.js

const Input = styled.div`
  max-width: 350px;
  min-height: 10vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
  display: flex;

  & > *{
    padding: 5px;
  }

  & input:focus{ // & : 자기 자신 요소에 접근
    outline: none;
    border: 3px solid #a673ff;
    border-radius: 10px;
  }

  & input {
    margin-right: 10px;
    width : 70%;
  }

  & button {
    width : 25%;
    color : #fff;
    border : #a673ff;
    border-radius: 10px;
    background-color: #a673ff;
  }
`;