반응형 Web/CSS8 css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용 aspect ratios는 화면비(종횡비)라는 뜻으로 디스틀레이의 가로 세로 길이의 비율을 뜻합니다. css최신 기능으로 추가된 aspect-ratio속성으로 이미지 비율을 편리하게 설정할 수 있습니다. 지원 가능한 브라우저는 다음과 같습니다. aspect-ratio는 IE를 지원하지 않습니다. IE를 고려하지 않아도 된다면 aspect ratios를 사용하면 좋을 것 같습니다. 속성값은 다음과 같이 사용할수 있습니다. 컨테이너의 기본 가로 세율 비율은 지정된 width와 height 비율입니다. height와 앞의 슬래시( / ) 문자를 생략하면 높이는 1로 설정됩니다. 기본 종횡비의 크기 계산은 box-sizing으로 지정된 상자의 크기로 계산됩니다. aspect-ratio: 1 / 1; aspect.. 2023. 1. 16. 무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기 프리텐다드(pretendard) 폰트는 inter와 본고딕(Noto), M PLUS 1p를 바탕으로 결합하여 서로의 단점을 보완하여 만든 폰트입니다. 다국어를 지원하므로 다국어 타이포그래피에서 이용 시 자연스러운 글꼴을 만나볼 수 있습니다. 그리고 window와 ios 둘다 지원이 가능하여 어디서든 동일환 환경에서 글꼴을 서비스할 수 있습니다. SIL 오픈 폰트 라이선스로 배포되며, 글꼴 단독 판매를 제외한 모든 상업적 행위나 수정, 재배포 가능할 글꼴입니다. CDN서비스(jsDelivr, cdnjs, UNPKG)를 이용하여 프리텐다드 웹폰트를 사용할 수 있습니다. jsDelivr, cdnjs, UNPKG 중 원하는 CDN을 사용하시면 됩니다. 총 9가지의 굵기로 제공되며, 가변 글꼴도 지원합니다. HT.. 2023. 1. 12. 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. 이전 1 2 다음 반응형
