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

CSS를 예제를 중심으로 직관적으로 리스팅되고 있어 공부 혹은 작업시 도움이 될듯합니다. 위 리스트중 하나를 클릭하면 예제와함게 소스 라이브예제 팁등 다양한 내용이 있습니다.

css를 이용하여 컨텐츠가 있는 박스의 그림자 효과를 넣을수 있습니다. 기본적인 박스 디자인에 아래와 같은 스타일로 다양한 그림자 효과를 적용할 수 있습니다. 응용하여 마우스 오버시 박스에 그림자 효과를 주어 컨텐츠에 포커스 되게 할 수 있습니다.

Three Dots는 특정 class로 3개의 점을 이용한 로딩 애니메이션을 구현할 수 있는 css입니다. 사이트에 가보시면 14종류의 로딩 애니메이션을 확인 하실 수 있으며, 각 애니메이션들은 class를 통하여 쉽게 표현 할 수 있습니다. [링크] 에서 파일을 다운받으시거나 첨부파일을 다운받아 보시면 dist폴더의 three-dots.css파일로 로딩애니메이션을 적용할 수 있습니다. 위 와 같이 div태그에 사용할 애니메이션 효과 class를 적용하여 사용하시면 됩니다. 사용할 수 있는 class 목록은 위와 같습니다.

Trendy CSS Text Shadows 는 css의 text-shadow효과를 이용한 다양한 샘플들을 정리해 놓은 사이트합니다. 간단한 그림자 효과부터 각양각색의 그림자 효과를 확인하실 수 있습니다. 또한 css코드를 확인하고 복사 할 수 있어 샘플과 동일한 효과를 쉽게 적용해보실 수 있습니다. 사이트에 있는 각 샘플 우측상단 view css를 클릭하면 사용된 css를 확인하실 수 있습니다. 샘플과 동일한 font를 사용하시고 싶으실 경우, css아래에 있는 google fonts를 클릭하시면 이미지에 사용된 폰트 페이지로 이동합니다. 복사한 css를 하나의 class에 붙여넣고 적용하고 싶은 부분에 class를 주면 샘플과 동일한 text-shadow효과를 쉽게 주실 수 있습니다.

코딩할 때, 여러개의 배경이미지를 중첩으로 사용해야 하는 경우가 종종 발생하게 됩니다. 이때, 기존에는 Div를 여러가지로 중첩시켜 각개의 DIV 마다 background 이미지를 설정하였었습니다. 하지만, 콤마를 활용하게 되는 경우에는 하나의 Class에 여러개의 배경이미지를 동시에 적용할 수 있습니다. .bgstyle {background:url(../img/background1.png) no-repeat, url(../img/background2.png) no-repeat;} 위와같이 기존에 익히 알고있는 배경이미지선언에서 콤마만 입력해줘도, 다중으로 사용이 가능하게 됩니다. 이로써 비교적 소스가 간편해질수 있습니다. 단. html5에서 사용가능합니다.

css 만으로 제작된 편집이 가능한 패턴 소스 css 를 수정하여 색상 및 크기 투명도 등 다영하게 변경이 가능합니다 응용을 하면 라인 패턴도 쉽게 css 만으로 구현이 가능합니다

폰트어썸이 5 버전으로 업데이트 되었습니다. 기존 4 버전보다 아이콘은 많아지고 사용법은 단순해졌습니다. https://fontawesome.com/start 위의 링크에 방문하여 위의 css 를 참조하고 https://fontawesome.com/icons?d=gallery 위의 링크에서 원하는 아이콘을 찾아 위와 같이 복사해서 넣어 쓰시면 됩니다.

css 소스를 이용하여 탭메뉴를 만들 수 있습니다. 아래소스만으로 위 이미지와 같은 탭 메뉴 출력을 할 수 있습니다. 탭을 라디오 버튼으로 만들어주고 스타일을 씌워 탭메뉴 모양으로 만들어줍니다. 탭메뉴에 마우스를 올렸을때 글자색은 label:hover 안에 있는 color 값을 수정해주시면 됩니다.

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

CSS만으로 마우스 오버시 반짝이는 모션이 들어가는 텍스트를 나타내는 기능으로, text-shadow 와 transition 을 사용하여 멋진 효과를 확인해보세요. JS와 gif 같은 이미지 없이도, Hover기능과 Transition을 활용하여 마우스 오버한 A태그에 빛이 나도록 변경해볼께요 html 해피CGI 위와같이 A태그에 a_style이라는 클래스를 지정해주세요. 그리고 나서 아래와같이 CSS를 선언해주세요. CSS .a_style { color: yellow; text-decoration: none; transition: 1s; } .a_style:hover { text-shadow: 0 0 .1em, 0 0 .3em; } color가 폰트 색상이고, 해당색상 기준으로 글자 옆으로 반짝반짝 효..