CSS Horizon&Vertical rendering (수평 수직 정렬 CSS)

날짜 : 2018. 01. 05.(금)

CSS Horizon&Vertical rendering

생각하게 된 계기

• 새로운 프로젝트를 시작하였다.
• 간단한 것을 쉬운것 부터 시작하여 적용해보고 싶은것을 모두 적용하는 것이 목표이다. 자세한 것은 해당 프로젝트에...
• 만난 문제는 CSS에서 수직, 수평 정렬을 하는 것이다.

해결한 내용

1. 이전에 해결한 방법
   • psd 혹은 sketchapp 파일의 UI가이드 그대로 수치를 넣는다.
   • 장점 : 만들기는 쉽다.
   • 단점 : 브라우저 크기에 따라 반응을 할 수 없다.
2. 금번에 작업한 방법
   • poiemaweb 에서 내용을 보고 따라하였음.
   • x, y 축으로 비율계산을 하여 움직이는 방법.
   • 장점 : 브라우저 호환성은 좋다. 브라우저 크기에 반응을 한다.
   • 단점 : CSS 변경작업이 생기면 변경하는 부분 주위의 영향까지 고려해야 한다.
3. 다음 작업 예정 방법
   • Flexbox
   • 예상한 문제 : ie의 브라우저 호환성이 좋지 않은 문제가 있음
   • Javscript 라이브러리로 flexbox 기능을 구현 파일이 존재 하여서. 이를 해결할 수 있음.

참고사이트

• autoprefixer
• caniuse
• poiemaweb.com
• todo webapp 참고사이트