Lpla 개발 블로그

PHP

[PHP] 파일 하나로 여러 개의 페이지 사용하기

(그누보드 관련 포스팅을 할 계획이었는데, 막상 그누보드는 하나도 사용하지 않아서 php로 수정했다.) 일반적으로 웹사이트에서 한 페이지를 제작하기 위해 최소 파일 하나가 필요하다. 가령 index.html 페이지를 화면에 띄우기 위해서는 index.html 파일이 필요하다. 하지만 php와 파라미터를 이용한다면 파일 하나로 여러 페이지를 만들 수 있다. 간단한 예시를 살펴보자. 1번 2번 3번 sub.php 파일을 만들고 위 코드를 입력했다. 그리고 http://도메인/sub.php 페이지로 접속하면 흰 화면만 출력된다. 하지만 내용이 하나도 없는 것은 아니다. 개발자도구를 확인해보면 section 태그가 확인된다. 1번, 2번, 3번 텍스트는 어디로 간 것일까? 나는 위에서 $_GET 을 사용하여 조..

HTML&CSS

[CSS] 16가지 버튼 애니메이션 효과

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 웹사이트를 퍼블리싱할 경우 기획을 바탕으로 디자인한 시안을 그대로 따라서 제작하게 된다. 하지만 기획이나 시안 단계에서는 주로 레이아웃과 컨텐츠 배치에 신경 쓰고, 마우스오버시 어떻게 나타나달라, 클릭시 이런 효과가 있으면 좋겠다라는 요구는 잘 없다. (아예 없진 않다.) 그래서 퍼블리셔의 재량에 따라 버튼 같은 요소에 효과를 추가할 수 있는데 나는 가급적이면 사이트를 새로 제작할 때마다 조금씩 새로운 기능이나 효과를 사용하려고 노력한다. 다음에는 이 codepen에 있는 버튼을 사용해 볼 생각이다.

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에서 보여..

HTML&CSS

[SCSS] Live Sass Compiler 설정

vscode의 Live Sass Compiler를 사용하다보면 느끼는 두 가지 불편사항이 있다. 첫째는 불필요한 map 파일이 생성되고 css 파일 하단에 map 주석이 생성되는 점이다. 두번째는 컴파일된 css파일이 강제로 expanded 스타일로 생성되는 점이다. 다행히 설정에서 이 문제들을 해결할 수 있다. 먼저 vscode의 설정(ctrl + ,)에 들어간다. 그리고 Live Sass Compile를 검색하고 Settings: Generate Map을 settings.json에서 편집한다. 그러면 "liveSassCompile.settings.generateMap" 이 나타나는데 이 값을 false로 저장한다. 처음부터 false로 되어 있다면 그 상태 그대로 다시 저장한다. 그리고 map 파일을..

JavaScript/실전

[JavaScript] Tilt.js 사용하기

1. Tilt.js 소개 Tilt.js 라이브러리를 사용하면 요소에 마우스의 움직임에 따라 변하는 3D 틸트 효과를 부여할 수 있다. 1.71kb로 가볍고 사용법도 간단해서 쉽고 예쁜 효과를 빠르게 구현할 수 있는 장점이 있다. gijsroge/tilt.js A tiny 60+fps parallax tilt hover effect for jQuery. - gijsroge/tilt.js github.com See the Pen Tilt.js by lpla (@lpla) on CodePen. 2. Tilt.js 사용법 Tilt.js 라이브러리를 사용하기 위해서는 제이쿼리와 Tilt.js를 추가해야 한다. 틸트 효과를 부여하는 방법은 두 가지로 첫번째는 해당 요소에 data-tilt를 추가하는 것이다. 두번째..