728x90 반응형 Web Programming/CSS16 CSS / 통통 튀는 애니메이션 w e b - b l o g ! 통통 튀는 텍스트 애니메이션 효과 / CSS-공유 자료실 See the Pen Skewed title text by Paul Noble 통통 튀는 텍스트 애니메이션 효과 / CSS-#통통튀는글자 #텍스트애니메이션 #CSS효과 #CSS소스 #코드펜 #CODEPEN#민트다이어리 #민트공유자료실 #공유자료실#MINTDIARY mintdiary.com 2021. 9. 7. CSS / transform:scale() / 마우스 오버(hover) 시 확대되는 이미지 사이트에서 상품이나 게시글의 썸네일이미지에 마우스를 올리면 이미지가 확대되는 효과를 사용하는 방법입니다. transform속성을 사용하는데 transform(변형)은 HTML의 모양, 크기, 위치 등을 변경할 수 있습니다. transform의 메소드로는 translate(), rotate(), scale(), skew(), matrix() 가 있으며 이미지의 크기가 변경하는 메소드는 scale()로 이번 글에서 사용방법을 정리해보았습니다. 의 이미지 상자 부분 부트스트랩을 사용했습니다. 위 CSS부분에서는 아래 코드의 div의 box class와 img태그에 적용된 부분입니다. 이미지 마우스 오버시 이미지 확대 2021-07-22 . . . 사용방법 1. overflow:hidden 2.object-fi.. 2021. 7. 22. CSS / 문자가 두줄 이상되면 ...으로 처리하기 제목이 두줄이 되면 한줄로 표현해주고 ...으로 처리해주는 CSS를 적용해줬다. 아래와 같이 게시판을 작성하면 미리보기 해주는 기능을 만들었다. 제목이 길어지면 두줄이 되면서 높이가 맞지 않아. 제목이 두줄이 넘으면 한줄로 표시됩니다 한줄...으로 표시됩니다. 행사시작일~행사종료일 위의 태그에 아래와 같이 CSS를 적용하면 두줄이 이상의 제목은 한줄 + ... 으로 변경된다. 반응형 웹에서도 아래와 같이 잘 적용이 되는 것을 확인 할 수 있다. 에서의 말줄임 https://bonggugu.tistory.com/16 table태그에서 말줄임 사용하기 table 태그에서 말줄임 사용하는 방법 table {table-layout: fixed;} 말줄임이 필요한 셀렉트 {white-space:nowrap; te.. 2021. 7. 5. CSS / object-fit 이미지 비율 유지하면서 채우기 object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다 CSS img { width: 100px; height: 100px; border: 1px solid #000 // object-fit: fill ; // object-fit: cover; // object-fit: contain; // object-fit: none; // object-fit: scale-down; } fill : 대체되는 요소의 내용이 지정된 너비와 높이에 따라 크기가 확대(scale up) 혹은 축소(down), 늘어나거나(stretch) 움츠러든다(shrunk). 요소를 .. 2021. 6. 23. 이전 1 2 3 4 다음 728x90 반응형
