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

선택한 부분만 배경이미지가 블러처리되는 연출방법입니다. 배경이미지 원본과 블러처리된 배경이미지 2개를 사용하여 특정영역의 뒷 배경이미지 부분만 블러처리 된 것 처럼 연출하는 방법입니다. 해당 사이트에서 소스및 데모확인이 가능합니다. 첨부파일에 관련 html.css 파일이 첨부되어 있습니다.

bttn.css는 버튼에 스타일을 간편하게 적용할 수 잇는 css입니다. 스타일 시트에 포함된 각 클래스명을 해당태그에 부여하여 쉽게 디자인을 적용 할 수 있습니다. 홈페이지 또는 파일을 다운받으시고 압축을 푸시면 dist폴더에서 bttn.css 또는 bttn.min.css 파일을 사용할 html 파일에 연결하시고 아래와 같이 클래스명을 적용하시고 사용하시면 됩니다. 클래스명 또는 css 소스는 bttn사이트에서 쉽게 찾고 예제를 확인하실 수 있습니다. 현재 총 13개의 버튼스타일을 제공하고 있으며 상단부분에서 컬러, 크기, block, outline을 설정하시고 확인하실 수 있습니다 적용 할 버튼을 하나 선택하시면 1번 부분에서 사용된 css코드를 확인하실 수 있고 2번 부분을 클릭하시면 적용할 htm..

수평적 중앙에 컨텐츠 배치는 margin:0 auto; 소스로 간단하게 배치가 가능하지만 수직적 중앙에 컨텐츠 배치는 잘 되지 않습니다. 자바스크립트 없이 아래 css 소스로 해결할 수 있는 방법 입니다. .container { width: display: table-cell; vertical-align: middle; } 예) 안녕하세요^^

가로 화면 텍스트 대응 모바일 사용시 화면을 가로로 눕힐 경우 폰트사이즈가 변형되는데 이것을 막고자 할때 *{-webkit-text-size-adjust:none;} 버튼 모양 대응 모바일 기기에 버튼디자인을 별도로 설정하지 않으면 자동으로 디자인css가 삽입되어있는데, 이를 사용하지 않고자 할때 input {-webkit-appearance: none;-webkit-border-radius: 0;} 전화번호 링크 대응 모바일코딩시, 번호만 입력을 해도 자동으로 전화번호로 인식 하고 전화 링크가 걸리는것을 막고자 할때

디자인작업시, 그림자 효과를 내고 싶을때 기존에는 shadow느낌의 gif나 JPG를 반복패턴으로 영역 내에 배경이미지로 넣었습니다. 하지만 CSS로 간편하게 삽입이 가능합니다. #example2 { box-shadow: 5px 10px #888888; } 위와같이 box-shadow 기능을 이용하면 쉽게 가능합니다. 참고로 그림자를 넣게되면, 별도의 영역을 차지 하지 않으면서 그림자효과를 낼 수 있어, 가로와 세로너비에 신경쓰지 않아도 되 편리합니다. 속성을 보면, 그림자의 우측, 하단의 사이즈와 컬러를 지정한다는것을 알 수 있습니다. 활용예시 :

빈영역에 div를 위치시킬때 컨텐츠를 세로 및 중앙 정렬을 할 수 있는 팁입니다. 영역내에 빈 div 공간을 위치 시킴으로써 출력하기 위한 블럭의 vertical-align:값 을 조정하여 컨텐츠 내용을 상하로 조절할 수 있습니다. 그리고 background영역의 text-align을 조정하여 좌우 정렬을 조정할 수 있습니다. HTML 내용 CSS .background{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; text-align:center; } .background .inner_block{display:inline-block; *display:inline; *zoom:1; width:0; height:10..

CSS에서 와일드카드라 불리우는 것으로, 모든 요소에 스타일을 적용하겠다는 의미입니다. 페이지에 일괄적으로 패딩이나 마진을 주고자 할 경우에 유용하게 사용가능한 팁입니다. * { margin: 0; padding: 0; } 모든 HTML 요소의 여백과 채우기를 0으로 재설정합니다. 일부 브라우저는 이미 기본 작업을 수행 할 수 있지만, 작업을 수동으로 다시 설정하는 것이 좋습니다. CSS에는 스타일 외에도 모든 웹 페이지에 적용되는 기본 스타일이 있습니다. 이러한 기본 스타일은 , , , 등의 요소에 대해 특정 padding 및 margin 값을 정의 , , , . 성가신 점은 페이지를 올바르게 보이게하려면이 스타일을 재정의해야하는 경우가 종종 있습니다. 모든 브라우저 제조업체가 기본값에 동의하는 것은 ..

CSS3에서 사용할 수 있는 기능으로, padding 또는 border를 주게 되면서 사이즈 미스로 인해 번거로운 상황을 해결할 수 있는 clac 입니다. 흔히 width값을 사용할때 퍼센티지 또는 px를 많이 사용하는데 예로, 가로 100%에서 1px만 빼면 디자인적으로 완성될 수 있는 환경이라면 clac 를 활용하기에 용이합니다. div {width:clac(100% - 10px);} 원하는 가로너비에서 특정값을 빼주는 식을 작성하면 됩니다. 단, 아래의 버전표식을 잘 보고 브라우저별 호환성을 확인한 후 사용하시기 바랍니다.

소개 태그는 무비 클립이나 다른 비디오 스트림과 같은 비디오를 지정합니다. 현재 요소에는 MP4, WebM 및 Ogg와 같이 3 가지 지원되는 비디오 형식이 있습니다. 예시 MP4 = H264 비디오 코덱 및 AAC 오디오 코덱이있는 MPEG 4 파일 WebM = VP8 비디오 코덱과 Vorbis 오디오 코덱이있는 WebM 파일 Ogg = Theora 비디오 코덱과 Vorbis 오디오 코덱이 포함 된 Ogg 파일 브라우저별 지원여부 속성 Autoplay (자동재생) Your browser does not support the video tag. Controls (비디오 컨트롤러) Your browser does not support the video tag. heigh..

SVG 및 anime.js로 재미있는 툴팁 모양과 애니메이션으로 다양한 툴팁 소스를 제공하고 있습니다.. 12종의 툴팁을 제공하고 있으며 데모사이트에서 소스를 다운로드하여 사용하실 수 있습니다. 사이트 제작에 많음 도움이되길 바랍니다 ^^