반응형 전체 글39 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. css를 사용하여 이미지 원하는 부분보여주기 : object-fit 다양한 사이즈의 이미지가 있는데, 특정 사이즈로 보여주고 싶을 경우 css로 조정할 수 있습니다. 실무를 하다 보면 이미지 비율을 1:1로 가이드했음에도 제각각 등록할 경우가 있습니다. css로 이미지 영역이 틀어지지 않도록 요청 하는 경우가 많은데요. 이때 사용하면 좋은 css 속성이 있습니다. 바로 object-fit입니다. object-fit object-fit을 이용하여 나 의 사이즈를 정해진 크기에 맞추어 일부만 보여준다거나 비율에 맞게 줄여준다거나 등 옵션에 따라 이미지 크기를 조절할 수 있습니다. 익스플로러에서는 지원되지 않는 속성입니다만 이제는 지원이 종료되었죠. 사용해도 무방할듯합니다. object-fit의 속성은 다음과 같습니다. fill - 기본값이며, 주어진 크기에 따라 화면에 이미.. 2023. 1. 5. SASS, SCSS 변수(variables) - scope, !global, !default sass에서 변수를 사용할 수 있는데 $ 표시를 앞에 붙이면 변수를 선언할 수 있습니다. 반복적으로 사용되는 값을 변수로 지정하여 사용하면 반복을 줄이고, 복잡한 계산도 가능하며 라이브러리 구성 등의 작업이 가능합니다. 즉 유지보수를 쉽게 만들어줍니다. 값이 여러번 반복되면 미리 변수로 만듭니다. 값을 기억하지 않고 변수명만을 가지고 스타일 가능합니다. 예를 들면 #272d4f 라는 컬러값은 기억하지 어렵지만 $blue : #272d4f 라고 선언하면 $blue만 기억하면 되므로 사용하기 쉽습니다. sass에서의 변수는 $ 를 사용하고 css규칙과 똑같이 정의하면 됩니다. 반복되는 값을 미리 변수로 정의하면 스타일링하기에 편합니다. /* use */ $변수이름 : 속성값; /* scss */ $base-.. 2023. 1. 3. 이전 1 2 3 4 5 6 7 ··· 10 다음 반응형
