scss (2) 썸네일형 리스트형 SCSS 활용 팁 2. @if/@else를 포함한 @mixin으로 텍스트 말줄임 쉽게 처리하기 한정된 공간에서 너무 긴 텍스트를 보여주게되면 로딩속도와 가독성이 떨어지는 것은 물론이고 디자인의 일관성까지 해치게 됩니다. 그래서 중요한 텍스트만 간결하게 보여주고 필요시 상세페이지로 유도하기 위해 말줄임 처리: ellipsis를 사용하게 되는데요. css에서 ellipsis 처리하는 방법도 간편하긴 하지만, 여러군데에 처리가 필요한 경우에는 관리가 힘들어질 수 있습니다. 그래서 scss @mixin을 활용하여 반복 사용이 가능한 코드를 만들어 처리해 보려고 합니다.🚨주의사항🚨본 게시물의 예제에서는 코드의 변환된 모습 위주로 보여주기 위해 생략했지만, 텍스트 말줄임을 처리하기 위해서는 고정된 width값이 반드시 필요합니다. width가 지정되지 않을 경우 말줄임이 동작하지 않습니다.@mixin@m.. SCSS 활용 팁 1. @function을 활용하여 px을 rem으로 쉽게 변환하기 디바이스의 다양화에 대응하고 사용자의 브라우저 설정을 존중하는 유연한 디자인을 제공하기 위해, 현업에서도 고정값인 px(픽셀)보다 em이나 rem과 같은 비율로 크기 조정이 가능한 단위들을 자주 사용하게 되었는데요. 이 중에서도 특히, 루트 html의 폰트사이즈를 기준으로 하는 rem을 자주 사용하게 되는 것 같습니다.1rem = ?1rem은 html에서 설정한 font-size의 값과 동일합니다. html의 font-size가 16px 일 때, 1rem은 16px이 되고, html의 font-size를 14px로 설정하면 1rem은 14px이 됩니다. 직접적인 부모 요소의 영향을 받는 em과 달리, rem은 html font-size의 영향만 받으므로 예측하기 쉽고, 미디어쿼리를 사용해 html의 폰트.. 이전 1 다음
