728x90 반응형 CSS10 [CSS] object-fit 컨테이너에 맞게 이미지 크기 조정하기 HTML 작업을 하다 보면 이미지의 크기가 내 생각과 다르게 뒤죽박죽 해상도도 엉망으로 나오는 경우가 많습니다.이럴 때 object-fit을 사용하여 이미지의 크기와 비율을 조절하여 내가 원하는 크기로 이미지를 깔끔하게 출력할 수 있습니다.이 글에서는 object-fit에 대한 설명과 간단한 예제를 통해 object-fit의 사용방법에 대해 알아보도록 하겠습니다. object-fit이란 무엇일까? css의 object-fit 속성은 컨테이너에 맞게 나 등의 크기를 조정할 때 사용하는 속성입니다.object-fit의 속성을 활용하여 종횡비를 유지하거나 공간에 딱 맞게 이미지를 늘려서 차지하는 등등 여러 가지 일을 할 수 있습니다. obfect-fit의 속성 값 fill: 기본값입니다. 주어진 치수.. 2023. 1. 3. [CSS] 글자와 글자 사이 간격 속성 letter-spacing letter-spacing이란? 여러 홈페이지들을 둘러보다 보면 글자의 간격이 넓어 의도치 않게 다음 줄로 글이 넘어가거나,글의 간격이 좁아서 읽기에 불편한 웹페이지들도 간혹 존재합니다.특히, 모바일 페이지는 각 기종마다 화면의 크기가 다르기에 웹페이지를 만든 사람의 의도와는 다르게 CSS가 어긋날 때도 있습니다. 이러한 상황일 때 사용하기 좋은 css 속성이 letter-spacing입니다.letter-spacing 속성은 입력된 단위에 따라 글자간의 간격을 좁히거나 늘려주는 속성입니다.이번 포스팅에서는 CSS의 속성중 하나인 letter-spacing에 대해서 자세히 알아보도록 하겠습니다. letter-spacing 속성 사용방법 letter-spacing 속성은 css이기 때문에 style에서.. 2022. 12. 17. 이전 1 2 3 다음 728x90 반응형
