일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #솔루션
- 솔루션
- #CSS
- CSS
- #웹솔루션
- php
- #쇼핑몰
- #happycgi
- #업종별
- 홈페이지
- #이미지
- #cgimall
- #홈페이지제작
- 게시판
- jquery
- 해피씨지아이
- #뉴스
- #image
- #홈페이지
- 사이트제작
- CGIMALL
- #jQuery
- #해피CGI
- happycgi
- 홈페이지제작
- #동영상
- javascript
- 쇼핑몰
- 해피CGI
- 웹솔루션
- Today
- Total
목록웹프로그램밍 자료실 (2644)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
ddMap은 개발자가 사용자 정의 가능한 대화형 반응형 Yandex 지도를 웹 페이지에 포함할 수 있는 경량 jQuery 플러그인입니다. 위도/경도 좌표 및 팝업 콘텐츠를 포함한 마커 데이터 배열을 전달하면 ddMap이 지도에 표시합니다. 마커가 두 개 이상인 경우 모든 마커에 맞게 맵의 크기를 자동으로 조정합니다. 사용자 지정 콘텐츠로 마커를 사용자 지정하고, 확대/축소 버튼과 같은 지도 컨트롤을 설정하고, 다른 Yandex 지도 옵션을 통과할 수 있습니다. 플러그인은 맵 초기화를 처리하므로 상용구 코드를 작성할 필요가 없습니다. 사용방법은 아래와 같습니다.
SplitLines는 상자의 너비 또는 함수에 전달된 너비를 기반으로 특정 html 태그를 사용하여 텍스트 블록을 별도의 줄로 분할할 수 있는 경량 jQuery 플러그인입니다. 그런 다음 각 선의 스타일을 개별적으로 지정하고 애니메이션을 적용할 수 있습니다. 첨부된 파일의 압축을 해제하고, demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 작동원리는 아래와 같습니다. 1). 내용을 단어로 분할하여 원래 Html 태그를 유지합니다. 이 태그는 *each* 단어에 해당 단어가 있는 태그와 함께 태그를 지정하므로 래핑이 시작될 때 태그는 그대로 유지됩니다. 이것은 스타일에 영향을 미칠 수 있습니다 (예 : 여백이 있으면 각 단어가 해당 스타일을 상속합니다). 2). 단어를 공백으로 나눕니다. ..
mixkit는 전세계 재능있는 제작자가 제작한 고품질 동영상, 이미지, 음악등을 무료로 제공하는 사이트입니다. mixkit는 화려한 효과의 영상소스, 음원까지 한곳에서 다운로드 가능하며, 영상의 경우 4k의 고화질도 제공합니다. 소스에 따라 대부분은 무료이나, 출처표시 등 요구 조건도 있으니, 확인 후 영상 제작 소스로 활용해보세요.
1. Generate Artwork 버튼을 클릭하세요. 이동되는 사이트에서는 회원가입이 필요합니다. 2. Prompt 입력창에 생성 키워드 또는 문장을 입력하세요. 3. 입력한 후 아래 " Generate Image " 버튼을 클릭하세요. 4. 시간이 지나면 위 이미지처럼 이미지가 출력됩니다. 5. 생성된 이미지 우측 버튼을 통해 이미지를 수정할 수도, 다운로드 할 수 도 있습니다. 디스코드를 이용해서 AI 이미지 생성이 가능하며, 방법은 조금 다르지만 충분히 쉽게 이용이 가능합니다. 업로드하는 사진은 여러 사용자가 공유하며, AI 학습에 이용된다고 합니다. 여러모로 활용도가 높은 AI 이미지생성기 bluewillow 입니다.
회전하는 이미지 디자인 입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.
HTML Home About Info Contact Show me more CSS body { margin: 0; padding: 0; background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #menuToggle a:..
닫혀있는 상태 열려있는 상태 체크박스 버튼 닫혀있는 상태의 버튼 css 열려있는 상태의 버튼 css
웹페이지에서 사이드메뉴, 사이드바 또는 컨텐츠 안의 또다른 영역에 스크롤바가 있을경우 해당부분을 스크롤 하다가 스크롤이 더 이상 안되는 부분에서 스크롤이 부모 요소로 전달되는 것을 방지하고 싶을때 사용합니다. overscroll-behavior: auto | contain | none; atuo : 기본값, 스크롤이 부모에게 전달된다 contain : 스크롤이 자식에게 전달된다. none : 스크롤이 전달되지 않는다. overscroll-behavior: auto none; overscroll-behavior: contain contain; overscroll-behavior: none none; x,y 별도 지정이 가능합니다.
Javascript 를 이용하여 이미지의 필터를 설정할 수 있는 프로그램을 소개합니다. # 장점 1. 대화형 CSS 이미지 필터 편집기를 만들 수 있습니다. 2. 버튼과 슬라이더를 사용하여 다양한 이미지 필터를 적용할 수 있는 사용자 친화적인 인터페이스가 제공합니다. 3. 밝기, 대비, 채도와 같은 매개변수를 조정하여 이미지를 창의적으로 수정할 수 있습니다. 4. 슬라이드를 통해 즉각적인 적용 효과를 확인할 수 있습니다. # 사용법 압축파일 해제하시면 index.html , index2.html 파일이 있습니다. index.html 파일은 데모로 제공되는 파일입니다. index2.html 파일은 간략하게 축소한 버젼의 파일 입니다. 실제로 사용해보니 필터를 자주 사용하시는 경우 사용하면 좋을것 같습니다...
소스코드 및 문서를 비교하여 다른 곳을 찾아 알려주는 사이트입니다. Original Text - 비교 대상 1 Changed Text - 비교 대상 2 비교할 텍스트들을 모두 작성하고 하단의 Find difference 버튼을 눌러 비교할 수 있습니다. 서로 다른 내용일 때 Original Text 내용은 녹색으로 Changed Text 빨간색으로 표시하여 내용을 비교해주는 유용한 사이트입니다.