22.10.24- TIL

오늘 한 일

오늘은 글쓰기 페이지의 UI변경을 위한 구현을 하였다.

일단 모바일에서 초록색 배경 테두리 없이 화면에 헤더와 질문폼 버튼이 보이도록 하도록하기 위해서

배경을 흰색으로 변경하였다.

그리고 반응형 구현에 있어서 내가 잘 모르는 부분이 많았는데 팀원분이 도와 주셔서 그 부분을 해결 할 수 있었다. 글로벌 스타일에서 아래 코드와 같이 설정 한 뒤 각 컴포넌트에 넓이를 %단위로 다시 정해주었다.

import { createGlobalStyle } from 'styled-components';
 
const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  ul, ol{
    list-style: none;
  }
 
  a {
    text-decoration: none;
    color: black;
  }
  
  body {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    height: 100vh;
    background-color: white;
 
    @media only screen and (max-width: 700px) {
        width: 100vw;
    }
  }
`;
 
export default GlobalStyle;

아래는 오늘 구현한 결과 이미지이다.