728x90 반응형 CSS/CSS 기초62 [zoom] 글씨크기를 더더 줄이고 싶을때 글씨크기가 크롬에서는 10px 이하로는 설정이 안된다... 근데 더 작게 쓰고 싶을때 아래처럼 써주면 10px을 0.8배 축소 시켜준다! 반대로 크기를 더 키우고 싶으면 배수만큼 써주면 된다! 너무 작게 설정하면 너무 작아서 안보임..ㅋㅋ .text{ font-size: 10px; zoom: 0.8; } 참고 https://blog.mydepot.kr/20221007_656#gsc.tab=0 [CSS] font-size를 10px 이하로 적용이 안될 때 – webDev 크롬 외 일부 브라우저는 브라우저 설정으로 최소 폰트 사이즈를 지정하고 있다. 각자 브라우저 설정을 하면 원하는 결과를 얻을 수 있겠지만 그게 불가능 할 경우에는 아래와 같이 적용하면 된 blog.mydepot.kr 2023. 2. 9. position sticky로 floating 버튼 만들기 자기 위치에 있으면서 따라다니기 floating 버튼을 만들때 유용한 sticky 일단 해당 원하는 위치에 배치한 후 position:sticky; bottom: 30px; top 또는 bottom을 통해 붙을 위치를 정해준다 bottom : 30px 을 주면 스크린 기준으로 밑에서 30px 떨어진 위치에서 따라다니다가 자기 위치가 되면 돌아간다 See the Pen Untitled by gahyun (@gahyun) on CodePen. position:sticky; top: 30px; top : 30px; 을 주면 본래 위치에 있다가 본래위치보다 스크롤이 내려가면 top:30px 에 위치해서 따라다닌다 See the Pen sticky by gahyun (@gahyun) on CodePen. 2022. 8. 24. 글자 영역 밖으로 벗어나면 자르기 글자가 영역밖으로 벗어났을 때 자르는 방법 특정 줄수 맞추기 원하는 줄수 넘어가면 자르기 1줄로 자르기 -webkit-line-clamp: 1; 2줄로 자르기 -webkit-line-clamp: 2; 3줄로 자르기 -webkit-line-clamp: 3; css 를 확인하세요! See the Pen Untitled by gahyun (@gahyun) on CodePen. [CSS/CSS 기초] - [CSS]글자가 영역밖으로 넘어갔을 때 text-overflow [CSS/CSS 기초] - [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) 2022. 8. 23. 이미지 비율 맞추기 .img-box::after 또는 ::before를 통해 width:100%; padding-bottom:100%; 또는 padding-top:100%; 로 가로세로 높이를 1:1로 맞춘다 이미지는 absolute를 통해 top:0;left:0;에 위치시킨다 (::after 또는 ::before의 패딩과 겹쳐지도록) .img-box의 width - height 를 100%로 크기를 꽉채운다 See the Pen Untitled by gahyun (@gahyun) on CodePen. object-fit 을 모른다면 [CSS/CSS 기초] - [CSS]Object-fit 이미지나 비디오 크기에 맞춰 자르는 방법 2022. 8. 22. 이전 1 2 3 4 ··· 16 다음 728x90 반응형