유명 사이트나 블로그처럼 세련되고 깔끔한 소셜 아이콘 버튼 모음을 구현하고 싶었으나 쉽게 만드는 방법을 몰라 궁금하셨다면 이 글을 통해 공유해 드리는 무료 소셜 아이콘 생성 서비스가 그 답이 될 것이다. 깔끔하고 산뜻한 소셜 아이콘 버튼 모음을 웹사이트나 블로그에 적용하는 것은 스타일시트(CSS)나 웹 지식이 얕은 일반 사용자들에게 다소 어렵고 부담될 수 있다. 하지만 이제는 그런 어려움이나 부담감은 안드로메다로 날려 보내도 될 듯하다. 퍼펙트 아이콘을 이용하면 아주 간단하고 편리하게 사용자의 기호대로 세련되고 멋진 소셜 아이콘 버튼 모음을 생성하고 구현할 수 있다. 퍼펙트 아이콘은 사용자가 원하는 SNS 아이콘을 선별해서 크기, 형태, 간격, 색상, 동작 효과 그리고 소셜 채널 URL까지 일괄적으로 설..

Design Information/HTML5 and CSS3 2015. 3. 13. 09:43

HTML5와 CSS3의 훌륭한 예제와 코드 소스들이 잘 정리되어 있는 hongkiat.com 블로그의 튜토리얼 섹션입니다. HTML5와 CSS3를 학습하고자 하는 분들과 웹퍼블리싱 실무자들에게 많은 도움이 될 정보들을 담고 있습니다.hongkiat.com 는 해당 주제별 활용예제와 적용방법 웹브라우저별 지원여부도 정리되어 있어 웹퍼블리셔가 프로젝트 사이트 작업 시 해당 코드 소스를 적용할 지 여부를 결정짓기 쉽도록 합니다.또한 데모(demo) 페이지를 별도로 마련하여 실제 적용 모습을 확인할 수 있어 더욱 도움이 되기도 할 것입니다. 최근 들어 HTML5 / CSS3를 활용한 웹사이트들을 많이 접하게 되는데 틈틈히 새로운 표현과 기능들을 익혀 두면 실전에서 웹사이트 콘텐츠 디자인을 최적화하는데 많은 도움..

Design Information/HTML5 and CSS3 2013. 7. 13. 14:31

한국어도비시스템즈는 지난 11월 16일 크리에이티브 더 웹 코리아(Creative the Web Korea)를 개최하고 디자이너와 개발자들이 HTML5, CSS3 및 JavaScript 등과 같은 최신 웹 기술을 이용해 보다 손쉽게 강력한 웹 사이트, 디지털 콘텐츠, 모바일 앱을 개발할 수 있도록 돕는 혁신적인 에지(Edge) 툴과 기법을 공개했다. 오전 커스터머 세션에 이어 오후에 미디어 세션을 가진 자리에서 어도비의 크리에이티브 솔루션 부문 아시아 태평양 지역 에벤젤리스트인 폴 버넷(Paul Burnett)이 기조연설을 통해 에지 틀 및 기법을 소개했으며, 어도비 에지 애니메이트 1.0(Adobe Edge Animate 1.0), 어도비 에지 인스펙트(Adobe Edge Inspect 1.0), 어도..

Design Information/HTML5 and CSS3 2012. 11. 18. 19:00

작년 년말 쯤 양용석 님의 첫 저술서인 'HTML5&CSS3 제대로 배울 수 있는 실전지침서'를 소개한 적이 있는데 4개월 지난 지금 그 뒤를 이어 알찬 내용으로 구성된 실전서인 'HTML5&CSS3 사이트제작의 모든 것'이 출간되었다. 저자인 유지아빠 양용석 님은 개인적으로 친분을 갖고 있는 분이지만 정말 부지런하고 노력파여서 늘 배울 점이 참 많은 저자이기도 하다. 먼저 'HTML5&CSS3 사이트 제작의 모든 것' 출간을 축하하며, 예비 웹디자이너 및 실무 웹디자이너 그리고 HTML5와 CSS3에 관심을 높은 이들에게 간략한 서평을 소개하려고 한다. 작년 년말 쯤 소개했던 양용석 저. 'HTML5&CSS3 제대로 배울 수 있는 실전지침서'는 HTML5&CSS3의 개념정립과 준비를 위한 실전 지침이었..

Design Information/HTML5 and CSS3 2012. 5. 4. 18:28

웹 관련 직업군(웹 기획, 웹 디자인, 모바일 웹)에 관련된 이들에게는 몇해 전부터 HTML5와 CSS3가 큰 관심사로 회자가 되고 관련된 도서는 물론 컨퍼런스들도 자주 개최되고 있다. 특히나 아이폰과 아이패드가 출시되던 시점 전 애플 CEO인 스티브잡스가 어도비 플래시 기술에 대한 반감을 표명하면서 HTML5가 미래의 웹 기술이 될 것이라고 언급하면서 일반인들도 HTML5라는 기술용어를 한 두번쯤 접하게 될 만큼 관심이 높아졌다고 볼 수 있다. 결국 지난 11월 9일 어도비는 모바일용 플래시 플레이어를 더 이상 개발하지 않겠다고 밝혔고, 안드로이드와 블랙베리 플레이북을 위한 플래시 플레이어 11.1 버전을 끝으로 모바일 플래시 개발은 하지 않게되며 HTML5와 PC용 개발에 주력할 예정이라고 밝히는 상..

Design Information/HTML5 and CSS3 2011. 11. 17. 17:23

스마트폰, 태블릿PC 시장의 급성장과 대중화로 '모바일'이란 키워드의 중요성이 모든 산업의 전략수립의 중심에 놓여 있다. 바야흐로 모바일 혁명 시대로 모바일 앱, 모바일 웹이란 단어가 들어가지 않는 곳이 없을 만큼 그 비중이 크다고 할 수 있다. 그런 까닭에 개인은 물론 기업들도 모바일 앱과 모바일 웹사이트 구축에 큰 관심을 보이며 앞다투어 제품 및 서비스 홍보를 위한 발빠른 움직임을 보이고 있다. 이런 추세이다 보니 앞으로 전망이 밝은 직업으로 모바일 앱. 웹 개발자나 디자이너 등 전문 인력시장이 급부상하고 있다. 이런 트렌드에 부응하며 모바일 코딩을 배우고자 하는 사람들이 많아지고 서점가에서도 다양한 모바일 관련 도서들이 봇물터지 듯 쏟아져 나오고 있다. 하지만 대부분 이론 중심의 두꺼운 바이블 서적..

Design Information/HTML5 and CSS3 2011. 11. 15. 12:22

실무 웹표준 지침서, '크리에이티브 디자이너를 위한 웹표준' 근래에 들어 심심찮게 회자되는 단어가 바로 '웹표준'이 아닐까 싶다. 웹2.0 시대가 도래한 이후 다양한 플랫폼이 사용되기 시작했고 그로 인해 웹디자인 분야는 또 한번의 격동기 아닌 격동기를 거치게 된다. 특정 웹브라우저에 비중을 두고 HTML, Java, 플래시 같은 플러그인 요소를 접목해 완성하는 일반적인 웹디자인 스타일만으로는 경쟁력을 갖추기 힘든 시장상황이기도 하다. 비록 웹 환경을 구축하는 큰 맥락은 같을지 모르지만, 사용하는 웹브라우저가 다르고, 모바일 웹페이지 그리고 웹2.0 으로 지칭되는 블로그, SNS, 위젯에 이르기까지 콘텐츠의 효율적인 연동이 요구되는 오늘의 상황에선 어쩌면 웹표준이 필수요소인 것은 부인하기 어려운 까닭이다...

Design Information/HTML5 and CSS3 2010. 6. 4. 13:22

CSS3를 활용, 타이포그래피 삽입 방법을 설명하려고 합니다. 테이블 태그 또는 이미지를 사용하지 않고 css3를 이용하여 박스를 구현하고, 그라데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법은 아래와 같습니다. 참고로 본 예제는 Firefox3.6, Safari 4.0 이상에서 직접 확인할 수 있으며, IE8.0에서 CSS3 이 구현되지 않아 확인이 불가하기에 위의 첨부이미지로 실 적용효과를 대체합니다. CSS3 정의. #insetBgd { width: 500px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top,..

Design Information/HTML5 and CSS3 2010. 3. 22. 00:44