제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

css 11

웹에서 사용하는 웹 아이콘 사이트 소개

오래전에 웹에서 사용하는 아이콘들은 전부 비트맵으로 만들어서 사용하고 했습니다. 그때의 개고생이란. ㅠㅠ 하지만 현대 웹에서는 더 이상 그런 비 효율적인 작업을 하지 않죠. 웹 표준 시대와 더불어 아이콘이 웹 폰트 형식으로 세상에 출현한 이후에는 더이상 비트맵 방식의 아이콘은 사용하지 않게 되었습니다. (뭐 지금도 사용하는 경우는 종종 보곤 합니다만.) 특히 부트스트랩의 사용과 더불어 웹폰트 형식의 아이콘이 보편화 되면서 다양하고, 저작권 문제도 없는 웹용 아이콘을 제공하는 사이트들이 있어서 소개합니다. 1. 부트스트랩 아이콘 icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.ge..

부트스트랩 5 베타 버전 출시 Bootstrap v5.0.0-beta1

현재 웹에서 가장 많이 사용하는 CSS 프레임워크이자 대표주자인 부트스트랩이 5.0 베타 버전이 출시되었습니다. 6년만에 블로그를 다시 시작하면서 부트스트랩으로 다시 글을 시작하게 되었습니다. 사실 필자는 부트스트랩에 대한 책도 하나 저술했고, 그 책이 사실 부트스트랩을 다룬 한국내 첫 책이자 가장 잘 팔린(?) 책이었습니다. 그 책은 부트스트랩 3.X 버전 이었고 부트스트랩에 대해서 나름 잘 설명한 책이었습니다. 라고 자찬하고 싶습니다. 사실 부트스트랩을 알고 나서는 필자가 제작하는 모든 웹 사이트는 부트스트랩을 기초로 만들고 있습니다. 부트스트랩 이후에 상당히 많은 CSS 프레임워크들이 세상에 출현했고, 나름 의미 있는 사용자 층을 이루고 있지만, 실상 부트스트랩 만한 CSS 프레임워크도 없습니다. ..

웹 페이지의 무게를 줄이는 10가지 빠르고 간단한 방법

지금 블로그에 게시하는 글의 원본은 사이트포인트닷컴의 해당 기사에 있습니다.원본 클릭 2013년에 웹 페이지의 크기는 32퍼센트나 증가했다고 합니다. 거의 모든 사이트의 무게(페이지의 크기) 가 증가한 것인데요. 사실 이렇게 사이트의 무게가 커지면 커질 수록 사용자들과 전체 인터넷에는 악영향을 끼치게 됩니다. 사이트의 무게가 증가함에 따라 전체적인 인터넷의 속도가 느려지게 되고, 사용자들 또한 인터넷이 느려짐에 따라 일 처리를 하거나, 영화를 보거나, 기타 인터넷과 관련된 모든 행위 자체에 영향을 미칠 수 밖에 없습니다. 요즘은 모바일 인터넷 사용자 수 또한 많은데요, 인터넷 사이트의 무게가 커지면 커질 수록 모바일 인터넷 사용자들은 느린 로딩 시간과 트래픽 양이 많아짐에 따른 요즘 증가 등 이런 폐단들..

CSS3에 하나를 더해 CSS를 아주 강력하게 만들어 주는 HITCH

현재 웹의 대세는 HTML5와 CSS3입니다.하지만 아무리 대세이더라도 CSS3를 완벽하게 지원하는 브라우저는 없습니다.또한 CSS3 에서 추가된 많은 선택자를 사용하더라도, 개발자의 요구에 맞게 좀 더 정교한 선택자가 필요할 경우가 있습니다. Hitch는 이런 개발자를 위하여 자바스크립트를 이용하여 CSS의 기능을 엄청나게 향상 시켜줍니다. 아래의 그림을 누르시면 해당 사이트로 이동하는데, 사이트 첫 부분에 Hitch 에 대한 소개와 어떻게 사용하는지에 대한 내용이 나옵니다.또한 DEMO를 보시면 아~~~ 이런 기능이 있구나~ 라는 느낌이 오실 겁니다. hitch를 사용하기 위해서 hitch 자바스크립트가 반드시 웹 문서에 필요하며, CSS 내부에는 -hitch라는 prefix가 사용되어야 해당 기능이..

웹 & IT 2013.06.15

2KB 밖에 안되는 아주 가벼운 jQuery용 모달 윈도우

요즘 사이트에는 팝업 윈도우 보다는 모달 윈도우 라고, 브라우저 내부에서 뜨는 윈도우를 많이 선호합니다.여기에서 소개하는 POP EASY 도 모달 윈도우 인데, 크기가 2KB 밖에 되지 않는 아주 가볍고, 사용자자 커스터마이징이 가능한 아주 훌륭한 기능이 많이 들어 있는 모달 윈도우 입니다. 4가지의 주요 기능이 있는데, 다음과 같습니다.POP UPS(가장 흔하게 사용하는 팝업 윈도우 입니다.) Linking Modals( 로그인 폼 또는 회원 가입 폼을 모달 윈도우에서 처리하게 합니다.) Videos ( 동영상을 모달 윈도우 내부에서 보여주게 합니다.) iFrames ( iFrame 을 사용해야 하는 경우 사용할 수 있습니다.) 아래의 이미지 또는 URL를 클릭하면 해당 웹 사이트로 이동하며, 자세한 ..

웹 & IT 2013.06.15

웹 디자이너 혼자서, 웹 프로그래머 없이 워드프레스를 이용하여 기업용 웹 사이트 만들기

웹 디자이너 혼자서, 웹 프로그래머 없이 워드프레스를 이용하여 기업용 웹 사이트 만들기 처음 시작하는 CSS & 워드프레스 이 책은 현재 세계에서 가장 많이 사용하는 CMS 도구인 워드프레스를 이용하여 웹 디자이너가 웹 프로그래머 도움 없이 혼자서 기업용 사이트를 만드는 방법을 설명합니다. 한국에서는 워드프레스란 도구가 단순히 블로그를 만드는 도구로만 설명되어 있는데, 실제 외국에서는 기업용 웹사이트를 워드프레스를 이용해서 만들고 있습니다. 워드프레스를 이용하여 웹 사이트를 제작하게 되면, 1. 검색엔진에서 가장 먼저 검색이 됩니다. 워드프레스가 SEO 즉 Search Engine Optimize 가 되어 있어, 검색 엔진에서 가장 먼저 해당 내용이 검색되는 장점이 있습니다. 2. 아주 복잡한 사이트가 ..

웹 & IT 2013.02.23

워드프레스 책 중 가장 볼만한 " 처음시작하는 CSS & 워드프레스"

제가 쓴 3번째 책인 처음 시작하는 CSS & 워드프레스에 관해서 약간 설명을 드리겠습니다. 책에 대한 내용은 몇 회에 걸쳐 설명을 드리도록 하겠습니다. 이 책은 저의 3번째 책이면서, 가장 신경을 많이 쓴 책입니다. 왜냐하면, 워드프레스란 CMS 가 초보자에게는 조금 힘들 수도 있는 툴이기 때문입니다. 하지만 현재 워드프레스가 한국뿐만 아니라 전세계적인 대세이며, 웹 초보자들에게는 한번쯤 배우면 좋은 툴이기 때문입니다. 국내에서 지금까지 출간한 워드프레스 서적에서 가장 쓸만한 내용만 담으려고 많은 노력을 하였고, 쓸데 없는 부분은 과감히 생략을 한 책입니다. 또한 이 책은 웹 사이트를 만드는 방법을 알긴 하지만, 프로그래머의 도움없이는 만들기 힘든 사이트를 만드는데 역점을 두었습니다.워드프레스가 이런 ..

웹 & IT 2013.01.16

웹표준 | 실전 레이아웃 잡기

웹표준에 대해서 2개의 글만 쓰고 바로 실전으로 들어갑니다. 왜 바로 실전으로 들어가는가? 기초적인 내용은 실전에서 바로 바로 적용해 보면서 어떻게 나타나는지 그때 확인해도 늦지 않을 뿐더러, 기초에서 이 방식은 이럴때 쓰이고 저 방식은 저럴때 쓰인다는 것을 직접 아는 것이 실무에서 적용할때도 훨씬 빠르게 다가오기 때문이죠. 하지만 들어가지 전에 몇가지 짚고 넘어갈 사항이 있습니다. 바로 div 와 span 입니다. CSS작업시 제일 많이 보이는 부분이 div 하고 span이기 때문에 이 둘의 차이는 반드시 짚고 넘어가야 합니다. 결론적으로 말하면 div 는 block이고 span은 inline 이다 라는 차이점 입니다. 무슨 말인고 하니 하나의 블럭을 감쌀때는 div 를 쓰고 그 줄만 적용할때는 spa..

A List apart | 오늘 소개하는 사이트 입니다.

유명한 사이트죠. 특히 CSS 코더들에게는 없어서는 안될 사이트라 할 만합니다. 저도 가끔씩 CSS 코딩을 하다 막하는 일이 있거나 할때 자주 들어가서 검색하여 문제를 해결하곤 합니다. 특히 이 사이트의 디자인 자체도 너무 맘에 듭니다. 간결하면서 고급스럽게 보이는 그런 뭔가가 있는 사이트 입니다. 특히 오른쪽에 있는 Topics 부분을 보시면 CodeContentCultureDesignProcessUser Science라는 곳을 클릭해서 들어 가 보시면 각각의 서브 카테고리에 얼만큼 많은 글들이 있는지 자세히 알려줍니다. 일종의 메타블로그 형식을 띄기도 하는데요, 각각의 카테고리에 전문 블로거들이 자기들만의 노하우를 알려주는 아주 막강하고 유용한 정보들이 많이 있는 곳입니다. 강추 합니다.

웹 & IT 2008.07.31

웹표준 | 웹 표준 사이트 방법론

현재 많은 웹사이트를 디자인 한 웹디자이너들은 흔히 table 태그를 이용해서 디자인을 해 왔으며, 그렇게 배워 왔습니다. 하지만 table 태그의 원래 목적은 디자인을 위해서 만들어진 태그가 아닙니다. 우리가 문서를 작성할때, 레이아웃을 지정할때 table 를 사용해서 레이아웃을 만들지 않습니다. 마찬가지로 웹페이지를 만들때도 데이터를 보여주거나 테이블이 반드시 필요한 요소 이외에는 테이블 태그를 이용해서 디자인을 하게 되면, 추후 웹페이를 수정하기 위해서 하나 하나의 테이블을 분석해야 하고, 프로그래머도 복잡한 테이블로 인하여 프로그램에 집중하기 어렵습니다. 테이블을 이용한 웹페이지를 콘크리트로 만든 건물이라고 비유할 수 있습니다. 그에 반하여 웹표준에 의해서 만들어진 건물은 일종의 조립식 건물입니다..

웹표준 | 웹표준을 들어가면서...

웹기획과 더불어 웹표준도 오늘부터 시작하도록 하겠습니다. 최근들어 웹표준 웹표준하는 소리를 많이 들어 봤을겁니다. 왜 웹표준이라는것이 중요한데, 라는 소리들도 많이 있고, 일반 사용자에게는 웹표준의 의미가 무의미 할 수도 있습니다. 도태체 왜 이런것을 만들어서 웹개발자들 머리만 아프게 만드는지 원... 지금까지 사용했던 방법들을 사용해서 웹사이트를 개발해도 전혀 문제가 없잖아? 근데 왜 굳이 웹표준을 지켜야 하는거야? 라는 말들도 많습니다. 처음에는 저도 그렇게 생각했습니다. 하지만 웹표준이라는 것이 대세이고, 또한 방법을 익히다 보면, 기존의 방식보다 훨씬 편하고, 더 능률적이며, 추후 웹사이트 수정시 엄청 편하게 전체 사이트를 전부 수정 할 수도 있다는 것, 그리고 하나의 폼( form) 또는 템플릿..