본문 바로가기
728x90
반응형

분류 전체보기298

반응형 이미지 태그 <picture> - 화면크기에 따라 다른 이미지를 보여줄 때 사용 https://wit.nts-corp.com/2021/02/04/6293 picture elements 사용하기 | WIT블로그 프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다. 해당 스펙 wit.nts-corp.com 2022. 8. 25.
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.
다양한 css 애니메이션/레이아웃 참고 사이트 https://freefrontend.com/css-code-examples 2022. 8. 23.
글자 영역 밖으로 벗어나면 자르기 글자가 영역밖으로 벗어났을 때 자르는 방법 특정 줄수 맞추기 원하는 줄수 넘어가면 자르기 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.
728x90
반응형