반응형 Web16 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. SASS(SCSS) Nesting 기능과 사용법 Nesting은 중첩이라는 뜻입니다. SASS에서 부모선택자를 기준으로 자식 선택자를 사용하여 하나의 스타일 규칙을 다른 규칙 안에 중첩하는 기능을 말합니다. 즉 Nesting을 사용하면 부모 선택자의 반복을 피하고 자식(=후손) 셀렉터를 간단하게 작성할수 있습니다. Nesting을 사용하는 이유는 다음과 같습니다. css셀렉터는 많이 사용하다보면 소스가 복잡해지는데,그러다 보면 어떤 요소를 꾸미는지 제대로 파악하기 어렵게 됩니다. 예시) div.container h1.headTitle > span > a:hover 이때 중첩을 이용하면 가독성과 유지관리가 쉬워집니다. nesting 문법 다음 코드는 css로 작성했을 때와 scss로 작성했을 때입니다. scss는 셀렉터 대신에 nesting을 이용하여.. 2022. 12. 29. VScode로 쉽게 Sass(Scss) 설치, 세팅하기 sass란 css의 단점을 보완하기 위해 만든 CSS전처리기(Preprocessor)입니다. 큰 프로젝트를 하다보면 css의 코드가 길어지고 가독성이 떨어지게 됩니다. 또한 유지보수도 불편하게 됩니다. 이럴때 sass를 사용한다면 코드의 양을 줄일수 있고, 변수나 함수를 이용하여 코드의 재활용이 가능합니다. SASS개발환경 세팅하기 npm으로도 설치하여 사용할수 있지만 VScode툴을 이용하면 쉽게 sass를 이용할수 있습니다. 1. VScode 에디터가 없다면 먼저 설치해줍니다. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, .. 2022. 12. 29. 이전 1 2 3 4 다음 반응형
