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

클릭 몇번 만으로 반응형 HTML 템플릿을 만들 수 있는 사이트 aperitif 입니다. "LET's GO!" 버튼을 클릭하면 아래이미지와 같은 페이지로 이동합니다. 왼쪽 부분에서 채우고자 하는 칸을 클릭한 후, 오른쪽 부분에서 원하는 디자인을 선택합니다. HEADER, CONTENT, BLOG, FOOTER와 같이 성격에 맞는 카테고리를 선택하여서 디자인을 확인하실 수 있습니다. 원하는 디자인 선택을 완료한 후, 우측 상단에 "GENERATE" 버튼을 클릭하면 'file.zip' 파일을 다운받으실 수 있습니다. zip파일 압축을 풀어보면 html, css, js 파일을 확인하실 수 있습니다. html파일을 브라우저에 띄워보면 위 이미지와 같이 템플릿이 완성된 버전을 확인해 보실 수 있습니다. 소스 수정..

HTML 5를 이용한 그래프 만들기 rgraph.net 입니다. 비 상업적일 경우 무료로 이용이 가능하며, 바차트, 파이차트, 간트차트 등 다양한 모양의 그래프를 지원합니다. 50가지 이상의 차트를 지원하며, 다양한 옵션을 통해 줌 기능, 각종 애니메이션 효과도 있습니다.

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

Zoom In, Zoom Out, Slide, Rotate, Blur, Gray Scale, Sepia, Blur + Gray Scale, Opacity, Flashing, Shine, Circle 다양한 이미지 마우스 오버 효과입니다. 원하는 효과의 클래스만 적용하면 바로 사용이 가능합니다.

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에서 사용가능합니다.

구글을 켠 뒤 옵션 > 도구더보기 > 확장프로그램 페이지 접속을 한 후 Chrome 웹스토어로 접속을 해주세요. 그리고 엡스토어에서 "Window resizer"키워드로 확장프로그램을 검색하신 뒤 내려받아 설치해주세요. 설치가 끝나면, 우측상단에 사이즈를 나타나는 아이콘이 추가로 생김을 확인할 수 있습니다. 이 아이콘을 누르게 되면 - 320 * 568 (iphone5) - 375 * 667 (iphone6) - 1024 * 768 (ipad) - 1440 * 900 (laptop) 등등 디바이스별 사이즈목록이 나타남을 확인할수 있습니다. 원하는 사이즈를 클릭하게 되면 창크기가 자동으로 줄어들거나 늘어나게 되면서, 각 디바이스별로 어떠한 형태로 출력되게 되는지를 미리 확인할 수 있는 장점이 있습니다. 해..

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

일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을 할수 있는 방법입니다. display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를 이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다. 줄이기전 줄인후 사용법은 아주 간단합니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는 유용합니다 ^^ 위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이..