WEB (50) [CSS] 마우스 오버시 이미지 확대 마우스 오버시 이미지가 확대되는 효과입니다. 이미지 출처 : Unsplash의 Mae Mu 1. CSS .img_list { list-style: none; width: 100%; overflow: hidden; }.img_list li { float: left; width: 33.3%; padding: 2%; box-sizing: border-box; }.img_list li:nth-child(3n+1) { clear: both; }.img_list li a { display: block; position: relative; width: 100%; height: 0; padding-top: 75%; border-radius: 20px; overflow: hidden; }.img_list li a.. [CSS] 2줄 이상 말줄임 2줄 이상의 텍스트를 생략하는 CSS 코드입니다. div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 나타낼 텍스트 행 수 */ text-overflow: ellipsis; overflow: hidden;} [CSS] 로딩 애니메이션 효과 로딩 애니메이션 효과를 CSS로 간단하게 표현하는 방법입니다. 로딩 중 1. CSS .loading_box { position: relative; width: 60px; height: 20px; line-height: 20px; }.loading_box span { display: inline-block; width: 10px; height: 10px; margin-left: 25px; background: #d1d3d7; border-radius: 50%; font-size: 0; animation: loading_ani 1s infinite linear alternate; animation-delay: 0.5s; }.loading_box span::before, .loading_box span:.. [CSS] div 위로 올라오는 애니메이션 효과 페이지 실행시 해당 요소가 아래에서 위로 올라오는 애니메이션을 CSS로 구현합니다. Content 1. CSS .content { position: relative; animation: fade_up 1s; }@keyframes fade_up { 0% { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); }} 2. HTML Content [CSS] 텍스트 마우스 오버시 밑줄 애니메이션 효과 텍스트에 마우스를 올리면 밑줄이 그려지는 애니메이션 효과입니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 1. CSS .menu { width: 90%; margin: 0 auto; } .menu li { position: relative; float: left; width: 20%; text-align: center; } .menu li a { display: block; padding: 20px 0; font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu li a:hover { color: #0026dd; } .menu li::after { content: ''; display: .. [jQuery] TOP(맨 위로 이동) 버튼 만들기 200px 이상 스크롤을 내리면 우측 하단에 버튼이 나타나며, 버튼 클릭 시 스크롤이 부드럽게 맨 위로 올라가는 코드입니다. 맨위로 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 맨위로 3. CSS .btn_top { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #0026dd; border: 0; border-radius: 50%; color: #fff; } 4.. jQuery $(function() { $(window).scroll(function() { var scrollPosition = $(this).scrollTop(); if (scrollPosition > 200.. [CSS] 글자에 테두리 효과 주기 1. webkit-text-stroke 글자에 테두리 효과를 주기 위해 간단하게 webkit-text-stroke 속성을 이용하는 방법이 있습니다. 그러나 해당 속성은 IE 브라우저에서 지원하지 않습니다. .text { -webkit-text-stroke: 1px #000; text-stroke: 1px #000; } 테두리 2. text-shadow 위 방법이 IE 브라우저에서는 지원되지 않으므로, 크로스 브라우징을 위해 text-shadow 속성을 이용하여 테두리 효과를 줄 수도 있습니다. .text { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } 테두리 [jQuery] 항상 제이쿼리 최신 버전 사용하기 항상 최신 버전의 제이쿼리를 사용하려면 태그 안에 아래 코드 중 하나를 넣어줍니다. /* 비압축 */ /* 압축 */ 이전 1 2 3 4 ··· 7 다음
