알아 두면 좋은 CSS 속성 3가지

CSS는 계속 바뀝니다.

새로 추가되고, 없어지기도 합니다.

그래서 늘 공부를 해야하지요.

​

새로 추가된 CSS라고 해도, 이미 몇년 전 부터 사용을 한 분들도 많을거예요.

CSS는 표준이 되기 전에 아주 오랜 시간 테스트를 합니다.

브라우저에 적용이 된 후에도 최소 3~4년 이상 검증을 거치지요.

그래서 '난 오래 전부터 썼는데' 싶은 속성도 '새로운' 표준 CSS라고 할 때가 있습니다.

​

정확한 구분은 아니지만, css 속성이나 값 앞에

-moz-, -webkit- 같은 브라우저 표시를 해야 한다면 표준 검토 단계의 속성이라고 보시면 됩니다.

​

최근(이라 해도 2~3년 사이)에 부라우저에서 통합해 사용할 수 있게 된 속성을 3개 소개합니다.

국내 주요 유통사 전자책 뷰어에서 사용 가능한,

전자책 만들 때 아주 유용한 속성들입니다.

* 단, 구형 기기에서는 작동을 하지 않을 수 있습니다.

​

break-inside

​

이 속성은 page-break 라는 속성에서 파생된 속성입니다.

표준으로 확정되기 전에는 page-break-inside 라고 표기를 했는데,

표준으로 확정이 되면서 break-inside로 대체되었습니다.

모든 브라우저에서 break-inside를 적용할 수 있습니다.

​

calc

이건 속성의 값입니다.

width나 height 같이 단위를 값으로 갖는 속성에 사용할 수 있습니다.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사는 모두 지원을 합니다.

이 속성은 1년 전에는 제대로 안먹혔는데, 최근에 다시 테스트를 해 보니 잘 먹히네요.

​

​

Attribute Selectors

이건 좀 오래 된 속성이에요.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사 모두 지원을 합니다.

이미지나 글상자 처럼 비슷한 속성이 여려개 필요할 때 사용하면 아주 좋습니다.

똑같은 속성을 서로 다른 클래스에 무한 반복 시킬 때가 종종 있었는데,

이걸로 한방에 해결했지요.

​

이 3가지 속성을 사용할 때는 다음을 주의하세요.

1. 국내 주요 유통사(교보, 리디, 알라딘, 예스)의 전자책 뷰어에서 확인했습니다.

2. 안드로이드 8 이후 버전에서 테스트 했습니다. 이전 버전에서는 문제가 생길 수 있습니다.