이번주 WIL

실전 프로젝트 진행하며 어려웠던 기술 및 해설

이번주 내가 맡고 했던 부분 :

이번주는 역할 분담을 하여 내가 Styled Component를 기반으로 한 CSS 총괄을 맡아서 진행했다. 다소 가볍게 봤던 CSS 기술이 생각보다 하다 보니 어려운 점이 많았고 하다 보니 들어가는 세심하게 주의를 기울여야 하는 기술이 많다는 것을 깨달았다.

1. space-between

상단 배너를 만들다 보니 자주 쓰게 된 것이었다. justfy-content를 이렇게 많이 쓸 줄은..

//MyPageUpdate의 Head 파트

const HeadContainer = styled.div`
display: flex;
justify-content: space-between;
span{
  font-size: 18px;
}
margin-bottom: 40px;
`

이 파일 외에도 다양한 곳에서 사용했다. 자주 쓰다보니 margin 값 지정 등 세심하게 살펴볼 것들이 많아져서 응용하기 좋았다. ->e.g. 값이 2개인데 왼쪽으로 두 개를 가운데, 왼쪽으로 몰아야 할 때 등

2. div값에 따른 margin과 padding

(따로 코드를 첨부하진 않을 예정)

• div가 어떻게 감싸져 있느냐에 따라 margin과 padding을 어떻게 줘야 예쁘게 잘 나오는지 관건인게 많았다.

• margin은 주로 바깥 여백, padding은 주로 안쪽 여백으로 주는 것은 당연히 알고 있었으나 div가 여러겹 겹치다 보니 너무 헷갈렸다.

• 실제로 하나 하나 값을 넣어보며 px을 조정해보고 값이 어떻게 변화하는지 눈으로 관찰하다보니 감이 잡혔다.

3. 디자이너 시안을 보는 눈

• 디자이너가 괜히 사이즈나 폰트까지 정해주는 것이 아닌 가 싶었던게 실제 하다보니 내 마음데로 만들었던 내용물이 결과물과 전혀 다를 때 그 차이를 알게 된 다음이었다.

• 피그마를 통해 수치, 심지어 border-radius까지 확인하는 과정을 거치고 나니 눈에 들어오는 부분이 많았다.

• 디자이너를 믿고 있는데로 만드는 연습을 해야겠단 생각이 들었다.