본문 바로가기

홈페이지제작15

php 마지막 문자 자르기 php 문자열 중에서 마지막 문자 자르기 솔직히 엄청 자주 사용하는 내용인데 가끔 기억이 먹먹해지면서 생각이 안날때가 있어서... ㅎㅎ substr를 이용하면 쉽게 제거할 수 있음. 예> 문자열 : 1,2,3,4,5, 마지막 문자인 "," 콤마 문자를 제거하는 방법 결과 = 1,2,3,4,5​ 2023. 11. 30.
숫자만 입력하는 스크립트 See the Pen Untitled by 진격IT (@zsrcvkwa-the-animator) on CodePen. 반응형 소스라 걍 가져왔는데 중요한건 class 의 onlyNumber 입니다. $(function(){ $(".onlyNumber").keyup(function(event){ // onlyNumber 클래스 가져오고 if (!(event.keyCode >=37 && event.keyCode 2023. 3. 16.
눈 오는 스크립트 이미지를 보면 마치 눈이 오는듯 무언가 내리는 모습을 볼 수 있습니다. 눈 내리는 모습을 홈페이지에 입히고 싶을때 간단하게 작업하면 좋을거 같아서 공유 합니다. 참고 주소는 http://peoplehome.co.kr/test2.html 눈 오는 스크립트 peoplehome.co.kr 위 주소 들어가서 오른쪽 마우스 소스보기 하셔도 되고, 해당 소스는 아래와 같습니다. 2023. 1. 6.
css 글자 애니메이션 효과주기 1선 See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen. 텍스트가 위아래로 통통 튀는? 애니메이션 효과입니다. 2022. 11. 30.
청주 홈페이지 제작 - 오즈컨츄리 오랜만에 홈페이지 제작 관련 블로그를 합니다. 이번 블로기에 올리는 홈페이지는 오즈컨츄리 입니다. 제작은 올 여름쯤 했는데 이제서야 올리네요. 많이 게을러진.... 아무튼 청주에 있는 오즈컨츄리라는 쇼핑몰을 제작했으며, 오즈컨츄리는 핸드메이드 가죽공방 및 가방, 지갑, 파우츠 등 수작업으로 이루어진 작업을 통해서 만들어진 가죽 제품을 판매하는 곳 입니다. 메인화면은 깔끔하게 위 이미지처럼 구성되었고 하단에 인스타그램 연동되게 되어 있는데... 연동이 안되네요. 한번 점검해봐야겠네요! 메뉴 구성은 가방, 지갑, 파우치, 굿즈 등으로 구성되어 있습니다. 세상에 하나밖에 없는 가죽제품이라고 볼 수 있겠네요. 홈페이지 제작을 맡겨주셔서 감사드리며, 오즈컨츄리 사업 무럭무럭 번창하시기 바랍니다!~ 2022. 11. 18.
jQuery 체크박스에 전체 체크하기 사실 잘 안쓰는? 스킬이긴 하지만 아주 간혹 이 기능을 사용할 경우가 생기곤 합니다. 그래서 여기 남깁니다. 바로 체크박스에 전처체크 하기!~ See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 이 기능을 사용할 코딩이 안생기길... ㅋ 아 참고로 " target="_blank" rel="noopener">'http://code.jquery.com/jquery-latest.min.js'> 위 스크립트는 jQuery 항상 최신버전을 가지고 오는 url 입니다. 2022. 11. 4.
css 이미지 수직 정렬 코딩을 하다보면 간혹 이미지를 수직정렬 하는 문제가 생기곤 하는데 이럴때 사용하면 유용할듯하기도 하고 구글링도 귀찮아서 이곳에 남깁니다. 이미지 수직 정렬 방법에는 여러가지가 있는데 첫번째 position 을 이용하는 방법, 두번째는 line-height 를 이용하는 방법, 세번째는 :before / content 를 이용하는 방법, 네번째는 flex를 이용하는 방법이 있습니다. See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 위 소스를 보고 활용하면 좋을거 같습니다. 2022. 10. 26.
css 이미지 가운데 정렬 코딩을 하다보면 가끔씩 이미지 중앙정렬을 검색하게 됩니다. 이게 외워서 하면 좋은데 잘 안외워져서... 걍 이곳에 남김! 첫번째 방법 그런데 위 방법이 간혹 안되는 경우가 있는데 그럴땐 두번째 방법 img { margin: auto; display: block; } margin auto 만으론 중앙정렬이 안됨! 그래서 블록으로 감싸줌 그리고 마지막 세번째 div { display: flex; justify-content: center; } img { width: 60%; } 세 번째 방법은 display flex를 사용하는 것입니다. display flex 만으론 작동하지 않아서 justify-content 라는 추가적인 속성을 줍니다. 우선 수평으로 가운데 정렬이고 담번에 수직 가운데 정렬도 넣어놔야겠.. 2022. 10. 25.
bxSlider 이미지 슬라이드 홈페이지를 제작하다 보면 이미지 슬라이드 기능을 자주 사용하곤 하는데 아주 좋은 bxSlider 입니다. 사용하기도 매우 쉽고 MIT 라이센스로 무상으로 제한없이 누구나 사용 가능하며, 반응형 홈페이지에도 적용되니 이보다 좋을수 없을듯합니다. 참고로 MIT 라이센스는 미국 매사추세츠 공과대학교(MIT)에서 해당 대학의 소프트웨어 공학도들을 돕기 위해 개발한 라이센스입니다. MIT 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋지만 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 합니다. 그리고 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다. 뭐 구글에 bxSlider 검색하면 많이 나오긴 합니다. 아무튼 전 이곳에 남겨 봅니다. 사용법은 Se.. 2022. 10. 21.
css 자동줄바꿈 html 코딩을 하다 보면 text가 width 를 넘어설 경우 css를 이용하여 자동 줄바꿈을 할 수 없을까 라는 고민 대부분 있을겁니다. 항상 구글링에 css 자동줄바꿈 검색해서 사용하곤 했는데 홈페이지 작업하면서 궁금했고 자주 찾았던 내용을 블로그에 남기기로 했습니다. 첫번째 자동 줄바꿈 keep-break keep-break 는 기본적으로 줄이 넘어갈 때는 단어 단위로 자릅니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 keep-break 를 사용해주면 줄바꿈이 가능하게 됩니다. See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen. .keep-break {.. 2022. 10. 19.
css 마우스 오버 버튼 효과들 See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 2022. 10. 11.
CSS 따라다니는 배너 만들기 위 소스는 우측 상단쯤에 항상 따라다니는 배너를 만드는 소스입니다. 홈페이지 제작할때 엄청 많이 사용하곤 하는데 항상 소스를 찾아서 하다가 걍 이곳에 뒀다가 쓰려고 이렇게 블로그에 남깁니다. ㅎㅎ;; 필요하신분들 가져가서 사용하시길요!~ 2022. 10. 7.
CSS 마우스 오버 이미지 확대 Hover Effect 2022. 10. 5.
청주 홈페이지제작 (주)이씨온플러스 이번 포스팅은 저희 피플홈에서 기존에 제작했었는데 다시 리뉴얼을 한 홈페이지 입니다. ​ (주)이씨온플러스는 기업행사, 문화행사, 기념행사, 학교행사, 체육대회 등 이벤트 전문 주식회사 입니다. ​ 사이트 주소는 http://econplus.co.kr/ 홈페이지의 특이점은 스크롤형식의 홈페이지 입니다. 스크롤형식이란 메뉴를 클릭하게 되면 해당 내용으로 한페이지 내에서 이동하는 형식입니다. ​ 하지만 위 홈페이지는 페이지 이동 과 스크롤 형식이 혼합된 홈페이지 입니다. 포트폴리오의 경우 더보기라는 버튼을 두어 페이지를 이동하게 됩니다. ​ 아래 이미지처럼 포트폴리오 페이지를 따로두고 관리자페이지에서 등록하는 방식의 홈페이지 입니다. 그리고 반응형 홈페이지 입니다. 반응형이란 모바일, 태블릿, PC 등의 기.. 2021. 4. 20.
청주 홈페이지제작(서플라이아미 쇼핑몰) 안녕하세요! 바뻐서 블로깅을 거의 하지 못했는데 이제서야 이렇게 새로운 카테고리로 블로깅을 합니다. 사업을 시작한지는 6년째인데 그동안 제작한 홈페이지 홍보도 할겸 겸사겸사 이렇게 블로깅을 시작합니다. ​ 최근에 서플라이아미 쇼핑몰을 제작하였습니다. 서플라이 쇼핑몰 주소는 http://supplyarmy.co.kr/ 입니다. 홈페이지 메인화면의 구성은 메뉴, 슬라이드 이미지, 베스트상품, 신규상품 등으로 되어있습니다. ​ 그리고 해당 쇼핑몰은 반응형으로 제작이 되었습니다. 반응형은 PC, 태블릿, 휴대폰 등 화면의 사이즈가 변경되면 자동으로 화면에 맞춰 디자인 및 프로그램이 재구성 되는 시스템을 말합니다. ​ 서플라이 쇼핑몰은 육군, 해군, 공군, 경찰 등에서 사용하는 약장, 약장 프레임, 뱃지, 스티커.. 2021. 4. 13.