일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 해피CGI
- #CSS
- 솔루션
- 웹솔루션
- 홈페이지제작
- #홈페이지
- jquery
- happycgi
- #cgimall
- #image
- php
- #해피CGI
- #뉴스
- javascript
- #쇼핑몰
- 홈페이지
- #이미지
- 쇼핑몰
- #홈페이지제작
- 사이트제작
- 해피씨지아이
- #업종별
- #happycgi
- CSS
- #솔루션
- #동영상
- CGIMALL
- 게시판
- #jQuery
- #웹솔루션
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CSS1 element element div p {color:#fff;} 후손 선택자 CSS1 element > element div > p {color:#fff;} 이웃 선택자 CSS2 element + element div > p {color:#fff;} 자식 선택자 CSS2 element ~ element div ~ p {color:#fff;} 형제 선택자 CS..
CSS3 그라데이션을 손쉽게 만들어주는 CSS생성 사이트 몇번의 클릭만으로 원하는 색상의 그라데이션 CSS를 생성해 주는 사이트입니다. 해당 사이트에는 투명도,위치, 컬러값, 그라데이션 기준값, 크기, 등등 다양한 항목의 값을 몇번의 클릭으로 선택하여 CSS 생성이 가능합니다. 또한 생성된 CSS는 위와 같이 손쉽게 복사할 수 있도록 제공되네요. 복잡하게 만들지 않고 손쉽게 만들고 쓸수 있어서 좋네요.
HTML5 가이드 소개 HTML5 가이드는 HTML5 소개 및 마크업, CSS3, HTML5 APIs 및 iPhone에서의 웹 앱 개발등 5장으로 구성되어 있으며, 웹 개발자들이 HTML5의 기본 개념을 배우고 모바일 웹에서 실질적으로 사용할 수 있도록 하기 위해 제작되었습니다.
8가지의 로딩 애니메이션 효과와 직접 적용할 수 있는 소스도 함께 제공하고 있습니다. 화면이 상당히 깔끔한 느낌을 주고 있으며 다양한 로딩효과로 기다림이 지루하지 않을 것 같습니다. 상단 중앙에 source를 클릭하면 팝업형식으로 창이 뜨고 HTML과 CSS 소스를 분할해서 제공하고 있습니다. 참고로 IE 브라우저에서는 source를 클릭하면 바로 팝업창이 뜨지 않는 경우가 있네요. 크롬이나 사파리 브라우저에서는 바로 뜨니 참고하시면 됩니다.
페이지 클릭클릭시마다 인상적인 화면전환효과 또는 인트로 효과를 적용해볼 수 있습니다. 데모페이지에서 하단 하얀색 화살표를 누르면 화면전환 효과와 함께 페이지가 변경됩니다. 이동된 페이지에서 상단 메뉴중 아무거나 클릭하면 페이지가 변경되면서 하단 화살표가 출력되는 페이지로 다시 이동됩니다. 그때 하단 화살표를 누르면 또 다른 인트로 효과를 볼 수 있습니다. 이런식으로 데모사이트내에서 여러가지 효과를 볼 수 있습니다. 압축파일을 다운받으실 경우 압축파일 내에는 html css fonts img js 등의 파일을 확인하실 수 있습니다.
border-image 속성으로 간편하게 테두리 효과를 줄수 있는 CSS border-image 속성으로 간편하게 테두리 효과를 줄수 있는 CSS생성기입니다. 원하는 배경이미지를 업로드 하고 원하는 위치대로 마음대로 지정해서 생성하면 됩니다. 다양하게 이용이 가능하며, 브라우져별 주의 사항에 따라서 이용하시면 좋습니다. 고해상도 이미지를 쓰실려면 이미지 영역값만 두배로 설정해서 하시면 됩니다. border-image의 Offset값이 10으로 세팅있으면, border-width는 그대로 두고 Offset값만 20으로 설정하면 됩니다.
스크립트와 css를 이용한 반응형 탭 소스입니다. 브라우저의 가로 크기에 따라 탭의 디자인이 변경됩니다. 가장 큰 사이즈는 아이콘과 텍스트 동시에 출력됩니다. 중간 사이즈는 아이콘만 출력됩니다. 가장 작은 사이즈는 아이콘만 출력되고 탭사이트 간격이 없어집니다. 탭의 가로사이즈는 자동으로 조절이 됩니다. 해당 웹사이트에서 소스를 다운로드 받으실 수 있습니다.
구글에서 정말 간단히 웹사이트에 번역기를 달수 있도록 제공하고 있습니다. 영문과같은 부분은 오류가 있을 수 있지만. 어순이 같은 일본어와같은 곳은 괜찮을듯 합니다 ^^ 위 주소로 접속을 하시게되면 아래와같은 이미지를 확인하실 수 있습니다. 웹사이트에 지금 추가 버튼을 누르시면 웹사이트 정보 페이지로 이동을 하며 적용할 사이트의 url 그리고 웹사이트 언어를 설정할 수 있으며 설정 후 다음 버튼을 누릅니다. 번역할 언어를 모든언어, 특정언어를 골라서 선택할 수 있으며. 표시될 검색버튼을 다양한 형태로 변경도 가능합니다. 코드받기를 누르시면 코드를 받으실 수 있으며 위 코드를 사용하실 페이지에 원하는 위치에 넣어주시면 됩니다. 유용하게 사용하실 바랍니다 ^^
이런 말풍선 이쁘나요? 저는 갠찮은거 같아 소개 드립니다. 위치도 , 색깔도, 크기도, 액션도 갠찮은것 같습니다. 사용하시려면 우선 다운로드 받으시면.... hint.css 과 hint.min.css 파일이 있습니다. 추측 하셨겠지만 hint.min.css 는 저용량 구동전용파일입니다. 직접 소스를 수정하고 싶으시다면 hint.css를 사용하시면 되겠죠? 사용하시고자 하는 페이지 상단에 요렇게 넣으시고 사용하시면 됩니다. 해볼까요? 코드 테스트 사이트에서 해보았습니다. 이렇게 하니깐 바로 이렇게 나오네요~! 제서버에 서 다시 해볼까요? 코드 테스트 사이트랑 똑같이 나오네욤,,, 요러한 옵션들이 있으니깐 테스트 해 보세요~! Colors - hint--error, hint--info, hint--warni..
웹접근성 적용을 위한 네이버 웹 접근성 체험 사이트 회사에 웹접근성 확인을 위한 스크린 리더기 기타 관련 용품이 없을경우 웹접근성 작업을 위해 미리 체험해 볼 수 있는 네이버 체험 사이트 입니다. 웹접근성 규정에 맞춘 작업을 위해서 미리 체험 할 수 있어서 유용하네요. 체험에는 저시력 시각장애, 전맹 시각장애, 손운동장애, 증중 운동장애 관련 웹접근성 체험이 가능합니다. 체험해보니 웹접근성 작업에 많은 도움이 되고, 웹 사이트 제작외에 다양한 경험을 한거 같아서 좋습니다.