Lpla 개발 블로그

JavaScript/실전

Swiper 예제 - 활성화된 슬라이드 이미지 띄우기

아래 swiper 예제를 만들어보겠다. 이 슬라이더의 특징은 가운데 슬라이드, 다른 말로 활성화된 슬라이드는 위쪽으로 떠 보이는 효과가 있다. 덕분에 활성화된 슬라이드에 집중할 수 있 수 있고 간단한 트렌지션 효과로 심심하지 않다는 장점이 있다. 단순할 것 같지만 이 같은 슬라이더를 만드려면 한 가지 난관에 부딪힌다. .swiper-slide-active { margin-top: -100px; } 활성화된 슬라이드는 .swiper-slide-active 클래스를 가진다. 이 클래스에 마진을 -100px 만큼 주면 가운데 이미지만 위쪽으로 올라가긴 하지만 슬라이더 바깥으로 벗어나지 못한다. 바로 swiper 전반에 걸쳐 overflow: hidden; 이 적용되어 있기 때문이다. 그렇다고 overflow:..

JavaScript/실전

[JavaScript] Swiper 마지막 슬라이드에서 페이지 스크롤

22-07-21 수정 기존 코드보다 더 좋은 코드를 작성했습니다. 마지막 슬라이드 뿐만 아니라 첫번째 슬라이드에서 위로 스크롤도 되고, 모바일에서 스냅도 적용됩니다. 스크롤을 막는 것은 releaseOnEdge 파라미터를 사용했고 터치를 막는 것은 touchReleaseOnEdges 파라미터를 사용했습니다. See the Pen Swiper snap & scroll when last slide - new by lpla (@lpla) on CodePen. 마땅한 문장이 떠오르지 않아서 '마지막 슬라이드에서 페이지 스크롤' 이라고 적어놨지만, '마지막 슬라이드에서 마우스 휠 이벤트 제어'가 가장 정확하고 'Swiper 마우스 휠 기능 정지' 도 나쁘지 않은 문장 같다. Swiper로 세로 스크롤(Vertic..

HTML&CSS

[CSS] 형광펜 효과

1. 가상 요소 선택자 (:before, :after) 가상 요소 선택자를 사용하여 형광펜 효과 내기 p {font-size: 26px; position: relative; display: inline-block;} span {position: relative; display: inline-block;} span:before {content:""; display:inline-block; width: 100%; height: 10px; display: inline-block; background: #FFD84B; position: absolute; bottom: 0; left: 0; z-index: -1;} 2. box-shadow p {font-size: 26px; position: relative; d..

etc

VSCode CSS, SCSS 코드 한줄로 정렬하는 플러그인

비주얼 스튜디오 코드(Visual Studio Code)는 사용자의 취향에 따라 다양한 플러그인을 설치할 수 있다. 오늘은 그 중에 CSS와 SCSS에서 사용할 수 있는 Formatter를 추천하려고 한다. Formatter란 코드를 더 깔끔하고 가시성과 가독성이 좋게 자동정렬해주는 기능으로 대표적으로 Beautify와 Prettier 등이 있다. 나도 두 플러그인을 모두 사용해봤지만 Prettier는 내 취향과는 다른 형태로 강제 적용되다 보니 Beautify를 선호한다. Beautify를 한동안 쓰면서 큰 불편함은 없었지만 몇 달전부터 내 코드 정렬 방식에 변화가 생기면서 문제가 생겼다. .main_news_section .main_news_container { max-width: 1280px; ma..

그누보드

그누보드 로컬 설치하기

먼저 구글에 bitnami wamp를 검색하여 다운로드받는다. 글 작성일 기준으로 8.0.0-0이 최신버전이다. 하지만 8.0.0-0은 아직 그누보드에서 제대로 검증되지 않았다. 나는 모르고 8.0.0-0을 설치했다가 그누보드에서 관리자페이지에 접속할 수 없는 문제를 겪고 다시 7.4.13-0을 설치했더니 잘 해결됐다. 이 글에는 8.0.0-0을 설치한 것으로 나오니 헷갈리지 않도록 주의하길 바란다. 따라서 하단에 있는 7버전을 다운로드 해야 한다. 뉴스레터를 받을 수 있도록 로그인 하라고 하는데 필요 없으므로 하단에 No Thanks를 클릭한다. 체크해제 할 수 있는 것은 모두 해제하고 경로는 앞으로 자주 들어갈테니 눈에 익혀둔다. 데이터베이스의 패스워드를 설정해야하는데 나는 123456으로 정했다. ..

JavaScript/기초

[JavaScript] 반복문 (for in / for of)

1. for문 let data = [1, 2, undefined, NaN, null, ""] for(let i=0; i