Lpla 개발 블로그

HTML&CSS

[CSS] 버튼 애니메이션 효과 (텍스트가 자연스럽게 나타나는 효과)

dfsdfdsSee the Pen Button Hover Effects by Aaron Iker (@aaroniker) on CodePen. 괜찮은 버튼효과를 찾았다. SCSS를 사용하면 텍스트 애니메이션을 쉽게 만들어 낼 수 있지만 컴파일하면 CSS에서도 사용하는데 무리 없다. 나는 배경색은 투명하게 하고, 테두리 색상이 변하도록 애니메이션 효과를 주고 싶어서 아래처럼 커스텀했다. See the Pen 버튼 오버 애니메이션(테두리, 텍스트) by lpla (@lpla) on CodePen.

JavaScript/실전

[JavaScript] 슬라이더 + 탭 형식 멀티 팝업

업무 중에 팝업 관련 업무도 생각보다 많다. 일반적으로 팝업창 하나에 이미지 한 개가 들어가지만 사이트에 게시되는 팝업 개수가 늘어나면 지저분함은 물론, 일일이 닫는 것도 불편하기 때문에 이럴 경우엔 멀티 팝업을 사용한다. 기존에 만든 멀티 팝업이 몇 개 있지만 이번에 블로그 포스팅용으로 새롭게 만들어보겠다. 1. 미리보기 2. 슬라이더 라이브러리 내가 가장 애용하는 슬라이더 라이브러리는 Swiper다. 하지만 이번에는 Slider Pro를 준비해봤다. 내가 좋아하고 잘하는 라이브러리만 고집하기보다 다른 라이브러리도 경험해보면서 실력을 늘리기 위함이다. 따라서 반드시 Slider Pro일 필요는 없지만 여기선 Slider Pro를 사용하겠다. Slider Pro는 제이쿼리 기반 라이브러리이기 때문에 제이..

HTML&CSS

[CSS] 크롬에서 이미지가 흐릴 때

크롬은 고질적인 이미지 랜더링 문제가 있다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. 이것은 크롬 뿐만 아니라 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타난다. 이 문제를 해결하기 위해 오랜 시간 찾아봤지만 아주 마음에 드는 해결책은 찾을 수 없었고 적정선에서 타협할만한 수준은 몇 가지 알 수 있었다. 1. image-rendering 이미지 랜더링 방식을 바꾼다. image-rendering: -webkit-optimize-contrast; 을 하게 되면 크롬, 사파리 등 브라우저에서 대비를 최적화하여 이미지 랜더링을 하는데 흐린 문제를 많이 해소해준다. 2. translateZ tr..

JavaScript/실전

[JavaScript] 끝말잇기 (2)

[JavaScript] 끝말잇기 (1) 5. 현재 제시어와 이전 제시어 정의 이제 이전 제시어의 마지막 글자와 현재 제시어의 첫 글자의 일치 여부를 확인하여 일치할 경우에 다음 제시어를 변경하고, 일치하지 않을 경우에는 변경하지 않도록 해야 한다. 따라서 현재 제시어를 nowWord, 이전 제시어를 prevWord라는 변수로 정의한다. 변수를 추가한 만큼 기존 코드에도 변수를 입력하여 수정할 필요가 있다. [기존 코드] wordBtn.addEventListener('click', function(){ wordDisplay.textContent = wordInput.value; wordInput.value = ''; }); [수정한 코드] let wordInput = document.querySelecto..

JavaScript/실전

[JavaScript] 끝말잇기 (1)

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. 순서 혼자서 하는 끝말잇기 놀이를 자바스크립트로 구현하려고 한다. 무작정 코드를 작성하기 이전에 먼저 머릿속으로 구상해보자. 필요한 HTML에는 무엇이 있을까? 끝말잇기 제시어를 작성할 input 요소, 작성한 제시어를 제출할 button 요소, 그리고 제출한 제시어를 출력할 div 요소까지 필요하다. 다음으로 필요한 JavaScript에는 무엇이 있을까? 입력한 제시어를 기억하는 변수와 div 요소에 출력하는 코드, 직전에 입력한 제시어의 마지막 값과 방금 입력한 제시어의 처음 값이 일치하는지 판단 여부, 두 값이 일치한다면 div 요소의 값을 바꾸고 일치하지 않는다면 div 요소..

JavaScript/실전

Swiper 예제 - 특정 해상도에서만 사용하기 (반응형)

1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPerView: 2, spaceBetween: 20 } } }); breakpoints는 반응형에 따라 swiper 효과를 다르게 주고 싶을 때 유용하다. 하지만 swiper 기능 자체를 호출(실행)/제거하려면 breakpoints로 해결할 수 없다. 가령 pc 해상도에서만 사용하고 모바일 해상도에서는 사용하지 않으려면 가장 단순무식한 방법은 display: none; 으로 pc에서 보여..