오늘 한 일

오늘은 글쓰기 페이지의 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;

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

'코딩온(부트캠프 학원) - TIL' 카테고리의 다른 글

22.10.28-TIL  (0) 2022.10.29
22.10.23- TIL  (0) 2022.10.24
22.10.22- TIL  (0) 2022.10.22
22.10.14- TIL  (0) 2022.10.15
22.09.26- TIL  (0) 2022.09.28

+ Recent posts