반응형 Web16 SASS(SCSS) 재활용 하기 @mixins, @include sass에서 mixin은 스타일시트 전체에 걸쳐 스타일 블록을 정의하고 재사용하게 해 줍니다. 즉 반복되는 규칙을 따로 만들어서 사용하는 것입니다. 똑같은 규칙을 반복하여 작성하는 것보다는 mixin을 사용하여 한번만 스타일 그룹을 정의하고, 필요할 때 참조하여 사용합니다. scss파일 위쪽 부분에 @mixin지시자를 이용하여 mixin을 정의합니다. 정의된 스타일을 넣고자 하는 곳에 @include지시자를 이용하며 믹스인을 참조할 수 있습니다. @mixin을 사용하여 선언 : @mixin 이름 (arguments) { ... } @include를 이용하여 사용 : @include 이름 (arguments) /* scss */ @mixin title-style { // mixin 정의 margin: 30.. 2023. 1. 13. 무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기 프리텐다드(pretendard) 폰트는 inter와 본고딕(Noto), M PLUS 1p를 바탕으로 결합하여 서로의 단점을 보완하여 만든 폰트입니다. 다국어를 지원하므로 다국어 타이포그래피에서 이용 시 자연스러운 글꼴을 만나볼 수 있습니다. 그리고 window와 ios 둘다 지원이 가능하여 어디서든 동일환 환경에서 글꼴을 서비스할 수 있습니다. SIL 오픈 폰트 라이선스로 배포되며, 글꼴 단독 판매를 제외한 모든 상업적 행위나 수정, 재배포 가능할 글꼴입니다. CDN서비스(jsDelivr, cdnjs, UNPKG)를 이용하여 프리텐다드 웹폰트를 사용할 수 있습니다. jsDelivr, cdnjs, UNPKG 중 원하는 CDN을 사용하시면 됩니다. 총 9가지의 굵기로 제공되며, 가변 글꼴도 지원합니다. HT.. 2023. 1. 12. SASS(SCSS) @extend를 이용한 공통 스타일 적용하기 sass는 타 선택자의 css를 그대로 상속하여 공유가 가능합니다. 공통으로 사용하는 속성을 모아 일부분만 동일하게 가져가고 부분적으로 다른 스타일을 정의하는 경우가 있습니다. 이럴 경우 보통 공통 속성이 사용되는 클래스를 만들고, 다른 속성이 사용되는 클래스 하나를 더 만들어 css 스타일을 입히는 방법을 사용합니다. 하지만 scss에서는 @extend를 사용하면 편리합니다. 예를 들어 여러 가지 버튼을 만들 때 사용하면 쉽게 작업할 수 있습니다. /* scss */ .btn { // 기본 그레이 버튼 display: inline-block; padding: 10px 20px; color: #fff; background-color: silver; } .btn-green { // 그린 버튼 @extend.. 2023. 1. 9. css만으로 로딩(스피너) 애니매이션 만들기 : css animation 사이트에 접속 시 화면이 나오기 전에 아이콘이 뱅글뱅들 돌고 있는 화면을 종종 볼 수 있습니다. 이것을 로더/로딩(loader/loading) 또는 스피너(spinner)라고 합니다. 로딩화면은 페이지를 불러들일 때 자연스러운 화면 전환을 위해 사용합니다. 그리고 데이터를 불러들이는 중임을 나타내는 표시로 사용자로 하여금 '뭔가 진행은 되고 있구나'라는 상황을 인지하도록 해줍니다. 하지만 너무 잦은 로딩이 표시되면 오히려 사이트가 느리다는 인상을 줄 수 있습니다. 적절히 사용하는 것이 좋겠습니다. css만을 이용한 로딩을 구현이 가능한데, 어떻게 하는지 알아보도록 하겠습니다. @keyframes 애니메이션 이름 : @keyframes는 애니메이션의 시작부터 종료까지 시간의 순서대로 동작을 지정할 수 있습.. 2023. 1. 9. 이전 1 2 3 4 다음 반응형
