line-height 를 해주면 테그 속 텍스트의 세로 정렬이 가능하다. height: 100px; line-height:100px 와 같이 height와 line-height의 값을 똑같이 설정하면 세로 정렬이 된다. 메인 페이지 수정 작업을 시작하였다. 기간이 꽤 타이트 하게 잡혀서 빠르게 작업을 진행해야 한다. 내일 오전까지 늦어도 오후 3시까지는 마무리 하고 에러는 없는지 테스트를 진행하여야 한다. 디자이너와의 첫 협업이라 좀 수정사항이 많긴 하지만 계속 소통하면서 빠르게 진행 해보아야 겠다.

오늘 아이폰에서 크롬으로 접속할 경우도 height이 적용이 안되는 것을 발견했다. 아이폰 모바일 화면 자체가 문제가 되는것 같았다. 제일 최상위에 height: 100% 을 주어서 해결을 했는데 그러면 PC에서 문제가 발생하였다. 이것을 다 대응해 주려면 꽤나 복잡했기에 후에 작업을 진행하기로 하였다. 회원가입 form 통일 작업은 완료 하였고 form 통일 작업 중 button에서 변경사항이 있어서 기존에 적용한 button에서 에러가 나는 부분들을 수정해주었다. 브라우저별로 테스트를 하는데 생각보다 오래 걸렸다. 특히 사파리가 오래걸렸는데 좀 많이 답답하였다... 다음주에 처음으로 디자이너 분과 협업을 진행하는데 디자이너와 협업하는 법에 대해서 읽어 볼 필요가 있을거 같다. 내가 어떠한 것들을 요구..

서클 버튼의 아이콘을 가운데로 정렬을 하는데 IE에서만 정렬이 되지않았다. 버튼에 position: relative를 해주지 않아서 생긴 에러 였는데 처음엔 IE 브라우저의 문제로 생각하고 해결법을 검색 해보았다. 해결법으로는 vendor Prefix를 적용 해주는 것이였다. 크로스 브라우징 이슈를 해결하기 위한 접두사로 크롬&사파리 : -webkit- 파이어폭스 : -moz- 오페라 : -o- 인터넷 익스플로러 : -ms- 각 브라우저 마다 이렇게 붙여 주면 된다. google analiytics 를 적용을 해주는데 ga는 component가 didmount 될 때 해당 페이지가 기록이 되므로 컴포넌트의 최상위인 app에만 설정을 해두면 된다고 한다. 하지만 한 페이지의 어떤 설문 조사같은 단계를 밟아..

BaseButton Component는 기본적으로 모든 버튼 형식을 받고 기본적인 CSS 를 적용해준다. 그래서 부모 컴포넌트에서 CSS를 적용했을 경우 만약 size: 55px 로 지정하고 BaseButton 에서 60px로 지정을 해둔 상태면 BaseButton 의 CSS가 적용이 되었다. 부모컴포넌트의 CSS가 우선 적용이 되는것이 아닌가 라고 생각했는데 그것이 아니였다. 스타일 적용 순위 1. 인라인 스타일 2. 내부 스타일 3. 외부 스타일 4. 브라우저 기본값 위와 같은 순서로 스타일이 적용이 된다. 만약 같은 등급이라면 가장 최종적으로 적용되는 것이 우선시 된다. 만약 강제로 우선 순위를 적용하고 싶다면 !important를 사용하면 된다. (개별 속성에 적용되고 IE6 이전 버전은 인식되지..

css transfrom 요소에 적용할 변형을 지정한다. 나는 transform: translateX translateY 를 사용하여 이미지의 위치를 조정해 주었다. 처음엔 float을 사용하였는데 받는 이미지가 여러가지였다. 그냥 image도 있고 icon 이나 썸네일 등이 있었는데 썸네일의 경우 기본적으로 마진을 받기 때문에 float을 사용할 경우 위치가 살짝 어극 나게 되었다. 그래서 position: absolute; 를 해주고 transform을 사용하여 위치를 고정 시켜 주었다. 아래 처럼 사용하여 이미지를 중앙으로 정렬 시켜 주었다. position: absolite transfrom: translate( -50%, -50%) top: 50% left: 50% 참고 블로그: https://..

회원가입 form 일원화 하는 작업을 계속 진행하였다. 컴포넌트를 다 나누었다고 생각했는데 좀 더 나누어야 되는 부분이 있어 진행을 하였다. 그리고 css 를 작성하는데 sass에 대해서 아직 좀 적응이 안 되어서 많이 헤멘것 같다. 그리고 기존에 작성된 css를 TS로 바꾼 버튼의 css에 적용하려고 하니 차이가 나거나 적용이 안되는 부분들이 있었다. 내일은 css 작업을 마무리 해보려고 한다.