일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #image
- #cgimall
- #이미지
- php
- 웹솔루션
- CSS
- #동영상
- 솔루션
- 홈페이지제작
- #해피CGI
- #홈페이지
- 해피CGI
- 홈페이지
- #쇼핑몰
- #웹솔루션
- CGIMALL
- #솔루션
- 해피씨지아이
- #happycgi
- #CSS
- #jQuery
- 쇼핑몰
- #뉴스
- 게시판
- happycgi
- jquery
- #홈페이지제작
- 사이트제작
- #업종별
- javascript
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
셀렉트박스 디자인을 쉽게 할수 있는 디자인셀렉트박스 생성기입니다. 관련 HTML, css, 자바스크립트 웹브라우저에서 바로 작성하고 확인 및 소스 복사도 가능합니다. 여러가지 디자인의 셀렉트박스를 손쉽게 만들고 이용가능해서 좋네요. 라운드형, 직각박스형, 화살표 아이콘도 변경이 가능하니. 다양하게 이용이 가능하겠네요.
처음 들어갔을때는 자료를 보고 너무 적은거 아니야? 라는 생각이 드는데요. html 작업시 기초가 되는 부분을 자세히 설명해준 홈페이지라서 초보자분들도 쉽게 공부할수 있는 유용한 사이트입니다^^ 예제 및 설명이 보시는 이미지처럼 잘되어 있어, 누구나 손쉽게 접근하고 사용이 가능하실것입니다. 모두 열공하시길 바랍니다*_*
HTML5로 들어오면서 새롭게 생겨난 속성입니다. 기존에 인풋박스에 placeholder와 같은 속성을 이용하려면 자바스립트나, jquery를 이용하여 이미지 또는 텍스를 이용하여 복잡하게 설정해야만 했지만. placeholder는 간단히 태그입력후 alt나 title속성입력하는것과 같이 원하는 문구를 적어주면 됩니다. 위와같이 사용할수도 있으며 인풋태그에 간단히 설명을 입력할 수 도 있습니다. 사용방법은 예시 html5로 업그레이드되면서 새롭게 생긴속성이라서 구버전 익스플로러에서는 사용이 되지 않습니다. ie의 같은경우는 10버전에서 일부의 html5를 지원하기때문에 9이하로는 무용지물이 됩니다. 아래의 링크를 통해서 개발자가 만들어둔 jquery소스를 이용해 placeholder를 ie9이하에도 사용..
하나의 화면에서 반투명한 레이아웃을 CSS로 구현할 수 있습니다. [제작화면] HTML과 CSS, JS를 하나의 화면에서 확인할수있습니다.
다양한 형태의 마우스 오버 효과입니다. 이미지. 타이틀, 서브타이틀 같은 정보가 나오는 곳에 효과적으로 사용이 가능합니다. 해당 사이트에서 소스를 다운로드 받으실수 있습니다. html과 css에 대한 자세한 설명이 있습니다.
모바일 홈페이지 코딩과 반응형웹 코딩시 최적화되어 있는 툴입니다. 모바일 디바이스별로 선택하여 기기와 데스크탑 화면을 동시에 볼수 있는부분이 장점입니다. 먼저 위 사이트 링크를 클릭하시거나 아래의 링크를 통해서 실행파일을 먼저 다운로드 받으셔야 됩니다. 실행파일을 다운로드 받으시고 실행시키시면 윈도우 실행창에 아래와같은 아이콘이 생성됩니다. 위 아이콘을 눌러 실행을하면 아래와같은 화면이 뜨고 주소창에 주소를 입력하시면 모바일기기기와 pc화면이 분리되어 있는 화면을 확인하실 수 있습니다. 좌측의 휴대폰기종을 선택하여 디바이스를 변경할 수 있으며 변경시에는 ctrl-r을 이용하거나 새로고침을하여 적용을 시켜줘야 하는점이 좀 번거로울수도 있습니다. 실제 휴대폰을 들고 확인해본바 글꼴랜더링 이외에는 모든부분이 ..
페이스북이나 각종 SNS 웹페이지에서 주로 보여지고 있는 둥근 프로필 이미지를 포토샵없이 CSS만으로 가능한데요, 바로 border-radius 를 이용하면 됩니다.. 만약 이미지 크기가 100px * 100px 라면 img { width: 100px; height:100px; border-radius: 50px; /* 이미지 반크기만큼 반경을 잡기*/ } 2. 레이어에 백그라운드 이미지 깔고 border-radius 사용 #radius-box { width: 100px; height: 100px; background-image:url("배경이미지경로"); border-radius: 150px; /* 레이어 반크기만큼 반경을 잡기*/ display: table-cell; vertical-align: mi..
1. 사이에 메타태그 삽입 2. 수동으로 전화번호/SMS/이메일 등 링크 걸기 전화걸기 SMS문자 보내기 메일보내기
사이트 제작시 요즘에는 커서모양에 관심있으신 분들이 많습니다. 상단의 데모링크를 통해서 확인하실 수 있습니다. 커서형태별로 적용가능 브라우저 그리고 각 형태별 영역에 올리면 커서모양을 확인하실 수 있습니다. 다양한 커서형태 (약 36가지)를 확인하실 수 있으며. 사이트의 컨셉에 맞게 커서를 적용하실 수 있습니다. 이미지에서는 보이지 않지만. 사이트에 접속해보시면 이미지 영역에 마우스를 올리시면 각 코드에 따른 커서 형태를 확인하실 수 있습니다.
HTML을 입력하면 HTML구조에 맞춰 css를 컨버팅 해주는 사이트를 소개해드립니다. 코딩시 구조가 복잡해질수록 css구조가 복잡해지지만 위 컨버팅 사이트를 이용하면 보다 편하게 이용이 가능한거 같습니다. 간단히 예제로 html코드를 작성해보니 우측에 css영역에 html을 입력한 계층구조로 컨버팅되는 이미지를 확인하실 수 있습니다. 체크박스를 통하여 필요없는 클래스 또는 아이디명을 삭제할 수 있으며 사이트 방문필요없이 아래의 태그를 복사하셔서 아이프레임으로 퍼가기도 가능합니다 ^^ 코딩을 주업이신 퍼블리셔 분들꼐 도움이 되었으면 좋겠네요~~^^