웹솔루션개발 25년 노하우! 해피CGI의 모든것

크로스 브라우징 작업시 IE 버전에 따른 조건부 주석처리를 해야 할 경우가 종종 생깁니다. 그때 유용한 기능으로 아래의 내용을 보고 조건부별로 진행해보세요. Html 조건부 사용되는 기호 :! : 아니다(not) - 예) [if !ie] ie가 아니라면lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다() : 우선처리& : 그리고(and) - 예) [if (..

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. CSS 결과 위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. CSS 결과 그 외 더욱 다양한 효과를 보고싶다면 아래의 링크로 활용해보시기 바랍니다. 더욱 다양한 효과 활용하기

하이라이트 되는 애니메이션 메뉴 CSS3 입니다. 익스플로러 10 이상, 크롬, 파폭에서 실행이 가능한 소스입니다. 첨부파일에 해당 html 파일과 css 파일이 첨부되어있습니다.

css 만으로 작동하는 이미지 툴팁입니다. 텍스트에 마우스 오버시 이미지 툴팁이 보여집니다. 특징으로는 이미지뒤에 배경을 컨트롤 할수 있는 소스가 있습니다. 이미지가 배경위에 올려져있고 뒤 배경의 투명한 보더을 조절하여 배경이미지의 사이즈를 줄일수 있습니다. 사이즈를 줄임으로써 좀더 입체적인 효과를 낼수 있습니다.

원하는 버튼을 결정하신후 클릭하면 버튼의 사이즈 테두리 모서리 그림자효과 등등 자유롭게 설정이 가능합니다. 버튼의 설정이 완료가 된 후 Copy code 버튼을 클릭하면 코드가 복사됩니다. 편집프로그램을 열어 Ctrl + v를 하면 복사된 코드를 확인하실 수 있습니다.

a 태그의 속성의 위치를 파악하여 스크롤 효과를 줄수 있는 원페이지형 레이아웃입니다.. 간단히 a태그를 추가 그리고 박스 영역을 설정한 후 클릭만으로 이동이 가능한 레이아웃입니다. 크롬에서 테스트를 하였으며, 압축파일 하나에 모두 설정이 되어 있으니 쉽게 확인하셔서 사용하실 수 있습니다 ^^

픽셀부다는 원 페이지 사이트를 만들 수 있는 무료 템플릿을 제공해 주는 사이트입니다. http://pixelbuddha.net/freebie/freebie-white-one-page-html-template http://pixelbuddha.net/freebie/freebie-forkio-one-page-html-template 등 메뉴에서 GIF, ICONS, PHOTO 등 디자인이 상당히 좋습니다. 유료가 있습니다만, 무료로 등록된 이미지도 확인 하실 수 있습니다. http://pixelbuddha.net/freebie/modern-flat-preloader-free-set http://pixelbuddha.net/freebie/hi-res-photo-set-2

이미지에 아무스 오버했을때 사용할수 있는 css 만으로 디자인된 오버레이 효과 다양한 예제화 함께 사이트에서 효과를 바로 확인할수 있습니다. try it yourself 버튼을 클릭해서 해당 예제의 소스코드를 확인 할 수 있습니다.

가로메뉴가 짝수일때는 상관없지만, 홀수일때 가로 100% 맞아떨어지지가 않는다. ex) 메뉴1 메뉴2 메뉴3 해결방법 css li{width:33%} li:last-child {width:34%} 33%로는 떨어지지 않아서 마지막 li에는 34%로 주면 가능합니다. 반대로 li:first-child 로 해줘도 됩니다. 가상선택자는 여러가지가 있으니 링크타고 참고해주세요. http://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes 출처: http://blog.webmini.net/797 [웹미니 블로그]

모바일에서 보다 편리하게 값을 입력하기 위한 코딩으로, input을 어떻게 설정하냐에 따라 아이폰의 키보드 배열방식이 달라지게 됩니다. type=text type=email type=tel type=url