TIL - 210628 - 6

오늘 한 것

프론트 과제에 앞서 뷰를 만들기 위해 html틀과 css를 만졌다.

어려웠던 것

• 저 보라색 + 버튼이 문제였다. 저 +가 도통 가운데로 가질 않았다.

  	```<button>+<button/>
  	```

  도대체 뭐가 문제인지 text-align, verical-align...line-height... 다 써봤지만 미세하게 가운데가 아니거나 아예 위치를 벗어나버렸다...
  1시간은 고민한 것 같다...이성적으로 다른 거 먼저 해보려고 했지만...저 +가 너무 눈에 띄어서 손을 놓을 수가 없었다. (이것은 자존심 문제였다...전에 분명히 해본 것 같은데...)

  나는 일단 검색을 열심히 했다. 위에서 말한대로 text-align, verical-align...line-height...검색해보고 시도를 해보았지만 안 맞았다.

  • line-height가 그나마 가운데에 오긴 했지만 미세하게 center가 아니었다...

  이건 뭔가 내 코드에 문제가 있다는 뜻으로 알고 열심히 다시 훑어보았다.
  button이라서 텍스트는 자동으로 가운데에 올 것 같은데 뭐가 문제인지 보니 font-size를 조정할 때 문제가 생겼던 것이 생각났다.

  button의 width, height 65px, font-weight 65px 이렇게 맞춰놨었다. 순간적인 생각에 동그래야하니까 width, height는 같게 해놓고, font-weight 크기가 이 정도는 커야 + 모양이 크고 예쁘다고 생각했다....(이게 문제였다...!!)

해결방안

• font-weight를 width, height와 같게 해버리면 +모양이 버튼 바닥에 붙는 문제가 생긴다.
  꼭꼭...button의 가로, 세로 크기를 font-weigth보다는 크게 해야한다...!!
  그러면 딱 가운데에 온다...!!

  다음에는 이런 실수가 없기를 바라며 오늘 TIL, 실수노트 작성을 마친다.....

  const Button = styled.button`
  width: 60px;
  height: 60px;
  
  background-color: #6100FF;  
  
  color: white;
  font-size: 50px;
  font-weight: bold;
  border: none;
  border-radius: 40px;
  `;

6일차 회고

그래도...해결했다...!!