일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #홈페이지제작
- php
- jquery
- 해피씨지아이
- #happycgi
- #cgimall
- 솔루션
- #뉴스
- #jQuery
- CSS
- 게시판
- 해피CGI
- #쇼핑몰
- #웹솔루션
- 홈페이지제작
- 사이트제작
- CGIMALL
- #홈페이지
- #해피CGI
- #이미지
- #솔루션
- #CSS
- 웹솔루션
- 홈페이지
- #동영상
- #image
- javascript
- #업종별
- happycgi
- 쇼핑몰
- Today
- Total
목록웹프로그램밍 자료실 (2655)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/opqxx/btrRFgRxSLg/fSmKPdpEPCtxnkFKX51aR0/img.jpg)
다양한 분야의 디자인에 어떤 특정 폰트가 사용되었는지 정보를 제공하는 사이트 fonts in use 이미지 썸네일을 클릭시 해당 디자인에 사용된 다양한 폰트 정보가 출력됩니다. 폰트를 클릭시 폰트정보는 물론 해당 폰트로 사용된 다른 작업물 정보도 확인가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/G2V3K/btrRtgR79Bk/BL9giuAXGFrXOudlpExJY1/img.jpg)
클릭시 별아이콘에 에니메이션 효과가 있습니다. css를 수정하여 에니메이션 효과 수정이 가능합니다. html 파일과 JS 파일을 수정하여 텍스트 변경이 가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b0WCXy/btrRnlGB3Kc/s2wXilDkrOcQLpQQhnnJSk/img.jpg)
마이크로소프트에서 나온 무료 개발툴인 Visual Studio Code 에서, php 코딩을 하실 때 편리하게 사용할 수 있는 확장팩을 소개 해드리려고 합니다. 1. PHP Formatter 다운로드는 아래 URL을 참고하세요 https://marketplace.visualstudio.com/items?itemName=Sophisticode.php-formatter - PHP 코드 정렬을 지원합니다. (HTML 혼용 사용은 불가합니다) - 파일 저장 시 포맷을 지원합니다. 2. Format HTML in PHP 다운로드는 아래 URL을 참고하세요 https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php - PHP파일 내에서..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Hgz5/btrRjyqYw4v/Duk33aZQ1m7OeVPl7pSgs1/img.jpg)
SVG 코드를 Insert SVG란에 넣어 출력되는 Css코드를 이용하여 SVG를 백그라운드로 사용할 수 있도록 변환해주는 사이트입니다. Insert SVG에 svg 코드를 넣으면 아래와같이 출력이 됩니다. 아래의 ready for css의 코드부분에서 확인하실 수 있으며 preview에서 결과값도 확인할 수 있습니다. svg를 이용하여 보다 또렷한 아이콘을 출력하세요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b391Ow/btrRdBbpPaf/mnO4BQmuVFhgL7SgfNJyC1/img.jpg)
- 라이센스 MIT - 설치 방법 혹은 압축 파일을 다운로드한 후 서버에 업로드하여 Putty 등 콘솔로 압축을 풀어도 됩니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 언어 JS 파일을 링크합니다. (한국어 : ko) 다른 나라 언어 JS 파일명은 플러그인 사이트를 참고하세요. 3. 에디터에서 사용할 각종 에디터 확장 플러그인을 추가합니다. 각 에디터 확장 플러그인 설명과 데모는 아래 URL을 참고하세요. https://alex-d.github.io/Trumbowyg/documentation/plugins/ 4. 위지윅 에디터를 실행합니다. 5. 에디터와 확장 플러그인의 커스터마이징도 가능하니 해당 문서는 플러그인 사이트를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bAJXm6/btrQTRr1zIE/w6k8PNIiKKoXInFcO9JGtk/img.jpg)
- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 버튼을 출력할 DIV 를 추가합니다. 3. 플러그인을 호출합니다. 4. 불필요한 SNS 공유 버튼을 제거하거나, 원하시는 SNS 공유 버튼을 추가할 수 있습니다. 삭제 및 추가 방법은 플러그인 사이트 링크를 참고하시기 바랍니다. 5. 버튼 커스터마이징도 가능합니다. - 작동 예제
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b9WKRv/btrQNG5ETfx/2vw9Gd4oQnnu6vlL4bz2L1/img.jpg)
데모 확인은 다운로드 받은 파일의 압축을 해제한 뒤 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 길이가 긴 텍스트를 웹브라우저의 화면크기에 따라서 위 그림 처럼 텍스트의 일부는 화면에 표시를 해주고, 나머지 텍스트들은 show more 링크를 눌러보면, 감추어져 있던 텍스트들이 화면에 애니메이션 효과와 함께 표시가 됩니다. 웹브라우저의 크기를 조절을 해보면, 화면크기에 맞춰서 텍스트들을 숨기고, show more 버튼을 눌러보면, 숨어있던 텍스트들이 표시가 되게 됩니다. 사용법은 아래와 같습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vyqh5/btrQMw7Oj0w/mXU9yurEVmcTB21slkKID1/img.jpg)
차세대웹기술지원센터에서 무료 제공중인 홈페이지 통합 진단 클리닉 입니다. 액티브X, 웹표준, 웹연결성, 웹개방성, 플래시 진단이 가능 합니다. https://www.koreahtml5.kr/front/diagnosis/diagnosticInfo.do 페이지로 접속하여 안내사항을 읽어본뒤, 통합진단을 받을 수 있습니다. 진단을 시작하게 되면 진단ID 가 노출이 되는데, 해당 진단ID를 통해 추후 결과를 확인이 가능 합니다. 진단결과 조회 페이지에서는 URL 또는 진단ID로 검색이 가능 합니다. 실제 결과를 조회 해보면 아래와 같이 각 항목별로 탭을 통해 내역 확인이 가능 합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nfJLM/btrQC88Bv0I/cs7FehXiQhdifnddFguLVK/img.jpg)
전세계 사용자들의 검색어 동향을 살펴 볼 수 있는 Google Trends 입니다. https://trends.google.co.kr/ 페이지로 접속시 검색어를 입력 할 수 있습니다. 아래는 "중고차"로 검색을 한 결과 입니다. 검색어 비교 기능도 있으므로 아래와 같이 비교하여 결과물도 확인이 가능 합니다. 결과 아래에는 지역별 통계도 확인이 가능 합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/drnJus/btrQvNXaCPO/kR0Yjk6zwetaabrhHzxQkK/img.jpg)
다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 스크롤을 내리거나, 올릴때 웹페이지의 배경에 시차를 둔 스크롤 효과를 확인해볼 수 있습니다. 스크롤을 내리면 아래의 그림 처럼 웹페이지의 배경이 시간의 차이를 두고 변경이 되는 효과를 확인해볼 수 있습니다. 사용하는 방법은 위 설명을 참고하면 되겠습니다.