codestates / codestates/FilmStorage
[DevLog] 정다인 / 2022-04-10
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
- 반응형 레이아웃 구현(헤더/ 메인/ 필름토크 게시판)
- 헤더 토글 버튼으로 레이아웃 구현
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 화면이 작아졌을때 margin 과 padding 을 하나하나 조절하는게 힘들었습니다
- 토글 버튼을 이용해 메뉴 카테고리를 반응형으로 구현하고, 적절하게 배열하는 것이 힘들었습니다
```js
// menu ul component
@media screen and (max-width: 1024px) {
display: ${(props) => (props.isToggled ? "flex" : "none")};
text-align: center;
width: 100%;
padding: 0px;
position: absolute;
top: 70px;
right: 0px;
flex-direction: column;
background: #fff;
}
// menu li component
@media screen and (max-width: 768px) {
display: block;
padding: 30px 0;
}
...
setIsToggled(!isToggled)}>
// 컴포넌트에 state 값을 전달해주면 css에서 조건문에 isToggled를 이용해 속성을 줄 수 있다
...
```
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 반응형 레이아웃 추가 구현
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.