Day 37 - 2022.01.25

Note

어제 그리드에서 여백 생긴 버그를 해결했다.

import React from 'react';
import styled from 'styled-components';

const GrayWrap = styled.div.attrs(({ height, width }) => ({
  row: height,
  col: width,
}))`
  height: ${(props) => props.row};
  width: ${(props) => props.col};
  background-color: #f9f9f9;
  border: 1px solid #d6d6d6;

  /* margin-left: 172px; */     여기서 여백을 주고 있었음
`;

function Graybox(props) {
  const { width, height } = props;
  return <GrayWrap height={height} width={width} />;
}

export default Graybox;

 

grid는 height의 길이가 같을 때 주로 사용한다. 따라서 여기서 grid를 사용하는 것은 적절하지 않기 때문에 grid를 사용하지 않고 flex를 사용해서 조절하기로 했다!

레이아웃을 화면에 그릴 때는 안에 요소를 먼저 그리지 말고 가장 겉에 있는 큰 요소들로 하나씩 그려본다. 안에 요소는 겉에 있는 요소들 레이아웃을 다 그린 후 그린다.

html 다 작성하고 css 넘어간 것처럼 하는 것이 아니라 하나씩 확인하면서 그리기