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

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

다양한 버튼 이펙트 100종류를 한곳에서 확인하여 소스까지 확인하실 수 있습니다. 소스를 확인하고 싶은 버튼을 클릭하면 상세페이지로 이동하며 버튼을 확인 후 내용에 출처를 누르면 codepen 사이트로 이동하여 소스를 확인하실 수 있습니다. 코드펜 사이트에서 HTML/CSS/JS를 확인하실수 있으니 참고하여 새롭게 만들거나. 참고하시기 좋은 사이트 입니다. 사이트 제작에 많음 도움 되시길 바랍니다^^

재미있게 css를 접할 수 있는 사이트입니다. 각 사이트 마다 Grid속성 Flex속성 Selector를 체크할 수 있습니다. GRID http://cssgridgarden.com/#ko 좌측의 셀렉터에 속성값을 입력하여 잡초를 제거하면서 공부를 할 수 있습니다. Flexbox frogy http://flexboxfroggy.com/#ko 좌측의 셀렉터에 속성값을 입력하여 개구리를 이동시키면서 공부를 할 수 있습니다. Selector https://flukeout.github.io 움직이는 음식을 체크하여 좌측의 css에디터에 오른쪽의 html또는 상단의 이미지를 확인하여 css 셀렉터를 입력해주면 됩니다. 재미있게 css를 접해보세요^^

CSS의 속성을 통해 애니메이션을 제작할 수 있지만, 능숙하게 다루는 사람이 아니면 쉽게 애니메이션을 만들기 어렵다. 이러한 사람들을 위해 만들어진 사이트로, 손쉽게 애니메이션을 구현 해 낼 수 있도록 마련한 웹사이트로, 크롬에서 접속시 사용이 가능하다. http://Keyframes.app

css 만으로 디자인된 체크박스 입니다. 해당 사이트에서 소스를 확인할 수 있습니다.

css 를 이용하여 마우스 오버시 이미지 패널과 텍스트 패널을 전환시키는 효과 마우스 오버시 이미지 패널이 올라가고 텍스트 패널이 나타나는 마우스 효과 해당 사이트에서 html, css 소스를 확인할수 있습니다.

해외의 대표적인 CSS reset 을 모아둔 사이트 입니다. CSS 리셋이란, 웹표준, html5를 마크업 하게될 때, 크로스 브라우징을 위해 기본적으로 CSS를 설정하는것을 말합니다. 브라우저 마다 요소를 취하는 속성이 각자 조금씩 다르므로 이를 모든 브라우저에서 동일하게 보이도록 기본 요소의 속성을 조금씩 조절하는것을 의미합니다.

기본 폰트가 아닌 웹폰트를 사용하다가 보면 같은 소스와 폰트인데도 불구하고 브라우저마다의 랜더링 차이로 글자가 다르게 보일때가 종종 있습니다. 일반인들은 잘 눈치채기 어렵지만, 웹디자이너들의 눈에는 금방 확인이 되는 부분이죠. -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 이럴때를 대비하여 폰트 안티앨리어싱을 적용할 수 있습니다. 참고로 표준코드는 아니지만, CSS 트릭을 사용하여 포토샵과 같은 부드러운 폰트의 느낌을 나타낼 수 있습니다. -webkit-text-stroke: 0.45px; // or -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1); // or text-shadow: #..

모션 관련 css 를 jquery 을 사용하여 효과를 바로 확인하여 소스를 확인할 수 있어한번에 원하는 효과를 관찰하고 적용하기가 수월합니다. 본 사이트로 접속하면 위 이미지를 이용하여 다양한 Motion CSS 의 구현 소스 및 방식 효과등을 바로 확인할 수 있습니다. http://pavlyukpetr.com/awesome/documentation.html 위 소스에 대한 구동방식은 위 링크를 통해 확인할 수 있으며, html5 용 css3 기반의 소스들로 ie11 이하의 하위버전에선 작동하지 않을 수 있습니다.

arrow navigation styles에서는 다양한 슬라이드의 화살표 스타일을 만나 보실 수 있습니다. slide image bar circle pop round slide split split thumb Flip double flip multi thumb circle slide grow pop diamond fill slide fil path 총 14가지의 화살표 스타일을 만나보실 수 있습니다. hover 효과가 있기 때문에 데모사이트에서 꼭 확인하시길 바랍니다. 또한 사이트에서 소스도 다운받아서 사용해보실수 있습니다.