개발자로 홀로 서기

커스텀 화면이나, 애니메이션을 만들고 싶을때가 있다.

태그 조합으로 css 애니메이션, animate 함수를 써도 되지만,

Canvas 객체로 코딩하는 것도 방법이다.

Canvas 객체로 코딩을 하는 도중에 이미지 , 텍스트가 이상하게 깨져 나오는 현상을 접했다.

알고보니, Canvas는 자체 해상도를 가지고 있고, 화면에 그려지는 크기를 따로 가지고 있었다.

위와 같이 해상도는 컴퓨터 해상도로 맞춰주고, 화면에 그려지는 크기를 300px, 300px로 설정했더니,

이미지나 텍스트가 깨져 나오는 현상이 사라졌다.

같은 CSS 명령어 지만, 브라우저 마다 다르게 해석하거나,

지원하는 방법이 틀린 것들이 존재한다.

이는 CSS3의 웹표준이 아직 정해지지 않았기 때문이다.

따라서, 개발자들은 크로스 브라우징을 구현 해야한다.

방법은 브라우저 접두사를 사용하여

다양한 브라우저에 같은 결과를 내게끔 코딩한다.

아래의 접두사를 참고하자.

아래는 column-count라는 속성의 예시다.

브라우저 마다 아직 지원하는 방법이 틀리기 때문에 아래와 같이 사용해야 한다.