워드프레스 웹사이트 개발을 하다보면 코드를 수정하고 웹브라우저에서 확인하는 과정을 수 없이 반복하죠. 주로 구글 크롬을 사용하는데 웹브라우저를 그냥 새로고침하면 적용된 것이 나타나지 않는데 이것은 캐시 때문입니다. 브라우저 캐시 기능은 현재의 웹 페이지를 있는 그대로 브라우저(내 컴퓨터)에 저장합니다. 이를 제거하면서 새로고침하려면 매번 Ctrl+F5 또는 Ctrl+Shift+R 키를 눌러야 캐시가 제거되면서 새로고침됩니다.제경우는 개발자 도구를 항상 열어놓고 작업하기 때문에 마우스로 새로고침 아이콘을 우클릭하고 "캐시 비우기 및 강력 새로고침"을 클릭합니다. 그런데 찾아보니 캐시를 저장하지 않고 새로고침만 눌러도 되는 기능이 있더군요.F12키를 눌러 개발자 도구를 열고 Network 탭에서 Disabl..

아래 링크로 가면 색상 조합이 만들어져 있는 사이트가 있습니다. http://www.colorion.co/ 색상 버블을 클릭하면 색상 코드가 복사되고 Info 버튼을 클릭하면 아래와 같은 페이지가 나옵니다.

CSS에서 cursor 속성에 따른 모양을 일일히 입력해서 확인해야 하는데 아래 그림을 참고하면 바로 적용할 수 있습니다. 제 참고용으로 만들었습니다. 일부 커서는 희미해서 잘 안보입니다. http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default

Roboto는 구글의 안드로이드 디자인 웹사이트에서 2012년 1월부터 사용하던 폰트입니다. 그 이전에는 Droid라는 폰트를 기본 폰트로 사용했습니다. Roboto의 개발자는 폰트 디자이너인 Christian Robertson이고 2010년부터 구글의 직원으로 일하고 있습니다. 2014년 구글이 머티리얼 디자인을 발표하면서 폰트를 재디자인해 머티리얼 디자인의 기본 폰트로 사용하고 있습니다. 그러던 중 2015년 1월 다시 업데이트 됐습니다. Roboto 폰트는 영문만 있으므로 한글이나 기타 국가의 폰트는 Noto 폰트를 호환 폰트로 지정했습니다. 이전 버전과 개정된 버전의 가장 큰 두드러진 차이는 R에 있습니다. 이전에는 하단 부분이 곡선으로 돼있지만 현 버전은 직선입니다. 이전 버전은 다폰트나 폰트 ..

구글이 작년에 머티리얼 디자인(Google Material Design) 가이드 라인을 발표했습니다. 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 바로가기 여기에는 아이콘도 포함되며 700여개의 아이콘이 있습니다. 세세한 부분까지 규격을 만들어놓고 있습니다. 바로가기 색상에 대해서도 정해놓고 있습니다. 바로가기 가능한 디자인과 불가능한 디자인까지 아주 광범위하게 가이드라인을 정해놓아서 앞으로 구글 관련 사이트를 방문하게 되면 통일된 모양을 볼 수 있을 것입니다. 다만 획일적이라는데 문제가 있겠죠. 아이콘은 흑백으로 돼있는데 컬러로 만들어 무료로 배포하는 곳까지 생겼습니다. 128..

웹사이트에서 아이콘은 주로 이미지를 사용해왔습니다. 몇 해 전에 폰트 아이콘이 등장하면서 이미지 아이콘이 사라지는 듯 싶더니 다시 이미지로 전환되고 있는 추세입니다. 이미지도 그냥 이미지가 아닌 SVG 이미지입니다. 폰트 아이콘은 폰트로서의 기능을 그대로 구현합니다. 즉 색상이나 크기 변경이 가능한 것이죠. 아무리 크게 해도 흐려지거나 깨지는 일이 없습니다. 가장 큰 단점은 하나의 아이콘으로 다양한 색상을 만들 수 없다는 것입니다. 한가지 색으로만 아이콘이 만들어지는 것이죠. SVG는 Scalable Vector Graphics의 첫 글자로 크기 변경이 가능한 벡터 이미지를 의미합니다. 벡터는 그래픽 디자인에서 크기가 변경되면 수학적 계산에 의해 이미지를 재생성하는 역할을 합니다. 보통의 이미지는 크기가..

우리가 사는 세상은 폰트와 관련하여 두가지 미디어로 분류됩니다. 하나는 인쇄물을 통한 미디어이고 다른 하나는 웹을 통한 미디어입니다. 인쇄물을 통한 미디어는 주로 명조체를 사용하고 웹에서는 고딕체를 사용합니다. 다 이유가 있더군요. 우선 폰트를 구분하는 명조체와 고딕체, 이에 더하여 자유체에 대해 알아보겠습니다. 폰트와 관련하여 동일한 의미의 많은 용어가 있습니다. 폰트는 영어이고 한글로는 가장 많이 사용하는 것이 한글인 "글꼴"이 있고 한문으로는 "서체(書體)"가 있으며 영어를 많이 사용하다보니 글꼴이라는 순수 한글로 사용하는 이도 많습니다. 제 경우는 폰트라는 단어가 익숙하기 때문에 책에서도 폰트라는 단어를 사용하지만 출판사에서 리뷰할 때는 글꼴로 전환하려고 해서 의견 충돌이 자주 있습니다. 제 경우..

깃허브에서 새로운 텍스트 편집기인 아톰을 개발해 오픈소스로 공개했습니다. 깃허브는 개발 소스 저장소(Repository)로 유명하죠. OSX 버전용으로 개발했지만 윈도우나 리눅스로도 빌드가 가능한데 까다로워서 만들다가 포기하고 누군가 만들어주기를 기다렸는데 며칠만에 나왔습니다. 아톰이 원래 모든 소스를 공개해 Hackable이라는 부제가 있습니다. 개인이 빌드를 만들었으니 공식 버전이 아니며 공식 버전이 나오길 기대해 봅니다. OSX 버전 링크 : https://atom.io/ 각 플랫폼 빌드 방법 : https://github.com/atom/atom/blob/master/README.md#building 리눅스 버전 빌드 방법 참고 : http://crunchbang.org/forums/viewtop..

줄무늬 패턴과 점무늬 패터 생성 사이트를 소개합니다. 간단한 클릭으로 이러한 무늬의 패턴을 만들고 파일을 내려받을 수 있습니다. http://www.binaryturf.com/free-software/stripe-generator/ 줄무늬 사이즈와 간격 사이즈를 픽셀로 입력하고 각각의 색상을 설정합니다. 배경이 없는 이미지는 Transparent Background에 체크하고 Go 버튼을 클릭하면 이미지가 만들어지며 Download 버튼을 클릭해 내려받습니다. 점무늬 패턴

포토샵으로 웹디자인을 할 경우 폰트 아이콘으로 많이 사용하는 폰트 어썸 아이콘 폰트를 사용하는 방법에 대해 알아보겠습니다. 폰트 어썸은 트위터 부트스트랩에서 사용하도록 만들어졌지만 부트스트랩을 사용하지 않더라도 웹디자인에 사용할 수 있도록 돼있고 IE7 버전까지 지원하며 아이콘의 수도 계속 늘어나서 현재 360개를 사용할 수 있어서 많은 웹 개발자나 디자이너들이 선호하는 폰트 아이콘입니다. http://fortawesome.github.io/Font-Awesome/ 우선 폰트를 컴퓨터에 설치하기 위해서 위 사이트에서 노란색 버튼을 클릭해서 파일을 내려받아 압축 해제합니다. 폴더로 들어가서 ttf나 otf 폰트를 마우스 오른쪽 클릭해서 설치합니다. 폰트가 5종류가 있는데 나머지는 웹폰트 전용입니다. 첫번째..

어도비에서 만든 브라켓(Brackets)이라는 텍스트 에디터는 2012년에 나와서 아직 개발 중이지만 안정적으로 작동하고 오픈소스로 개방돼있어서 무료로 사용할 수 있습니다. 혁신적이라 할 만큼 기존의 텍스트 에디터에서는 볼 수 없는 여러가지 새로운 기능들이 있습니다. 반면에 당연히 있어야할 기능은 없는 경우도 있습니다. 이 에디터의 특징은 웹사이트를 만드는 언어인 HTML, CSS, 자바스크립트로 만들어졌기 때문에 원할 경우 이들을 수정해서 다른 기능을 추가할 수도 있습니다. 하지만 되도록이면 확장 프로그램을 개발해서 사용할 것을 권장합니다. 대부분의 경우 이러한 프로그램을 플러그인이라고 하는데 어도비에서는 확장 프로그램(Extensions)이라고 하더군요. 브라켓 에디터가 계속 개발 중이니 첨부되거나 ..

각종 웹브라우저가 지속적으로 업그레이드되면서 CSS3 규칙의 채용이 더욱 늘어나는 추세입니다. 그러면서 스타일시트만으로 멋진 웹페이지를 만들 수 있죠. 이전에는 포토샵이나 파이어워크로 만든 이미지로 버튼, 메뉴바, 아이콘 등에 사용했습니다. 이러한 이미지를 사용하면 반응형 모바일 디자인에서는 레이아웃을 벗어나게 됩니다. 그래서 포토샵으로 만든 UI 그래픽 디자인도 사라질 전망입니다. 스타일시트만으로 얼마든지 위와같은 모양을 만들 수 있기 때문이죠. 부트스트랩 관련 프로젝트 중에는 위와같은 psd 파일을 만들어놓은 것이 있습니다( http://gui.repixdesign.com/#bootstrap ). CSS 만으로 얼마든지 만들 수 있는데 왜 이런 것을 만들었을까요. 포토샵으로 레이아웃 디자인을 먼저 만..

웹디자인을 하다보면 텍스트 편집기에서 코드를 수정하고 웹브라우저에서 확인하는 절차를 반복하게 됩니다. 웹브라우저에서는 개발자 툴을 이용해서 코드를 확인할 수 있을 뿐이죠. 그런데 구글 크롬 브라우저의 Autosave 확장 플러그인을 사용하면 개발자 툴에서 직접 편집하고 새로고침하면 웹페이지에 적용이 되고 스타일시트나 자바스크립트 코드도 바로 변경됩니다. 플러그인을 설치하고 파일을 다루기 위해서 Node.js라는 플러그인을 설치해야하지만 웹 개발시 편리하게 사용할 수 있습니다. 그러면 이러한 기능을 사용하는 방법을 알아보겠습니다. 1. 구글 크롬 자동저장 플러그인 설치하기 바로가기 위 링크로 이동해서 크롬 자동저장 플러그인을 설치합니다. 2. Node.js 설치하기 바로가기 위 링크로 이동해서 Node.j..

1. 형제 선택자(Sibling Selector) 이웃 형제 선택자(Adjacent Selector, Adjacent Sibling Selector)는 이웃한 형제 선택자 중 나중의 요소만 선택되지만 형제 선택자는 이웃한 형제 선택자 중 처음의 선택자를 제외한 모든 요소가 선택됩니다. 첨부 파일에 다음과 같은 코드가 있습니다. div과 p가 섞여있죠. 123456 스타일시트에 다음과 같이 선언하면 3,4,6의 div이 선택됩니다. div ~ div { background: green;} 다음처럼 하면 p 태그중 나중의 것만 선택됩니다. p 태그는 두개밖에 없으므로 마지막 하나만 선택됩니다.p ~ p { background: green;} 다음은 p 다음에 있는 div은 모두 선택됩니다. div ~ div..

자손과 자식의 차이는 말 그대로 해석하면 됩니다. 자식은 바로 아래의 아들 딸이고 자손은 손자, 손자의 손자까지 모두 포함하죠. 그러므로 자식 선택자는 바로 아래의 자식 요소만 선택할 때 편리합니다. 일반적으로 자손 선택자를 많이 사용하는데 필요할 경우 자식만 제한해서 선택하고자 할 때 사용할 수 있습니다. 아이디나 클래스 선택자를 넣고 스타일시트에서 이를 지정해서 사용하면 될 것을 굳이 이런 선택자까지 만들어낸 것은 그만큼 웹디자인을 원활하게 하기 위해서입니다. 디자인을 많이 경험하다보면 반드시 필요하죠. 첨부 파일을 열어보면 여러 단계의 서브 메뉴를 만들고자 ul과 li 태그가 많이 있습니다. nav 태그의 자식은 바로 아래의 ul 태그 하나 뿐입니다. 하지만 자손은 그 아래에 있는 모든 태그입니다...

CSS를 사용하면서 되도록이면 많은 선택자의 기능을 알아두면 편리하게 디자인할 수 있습니다. 어떤 요소에 대해서 색다른 효과를 주려고 하는데 선택자를 삽입할 수 없다거나 html은 건드리기는 싫고 CSS만으로 스타일 하고자 하는 경우 이런 선택자를 알아두면 아주 편리합니다. 이번 글에서는 처음 CSS를 배우는 분들은 생소하지만 미리 알아두면 편리한 선택자들에 대해 알아보겠습니다. 첨부파일의 start.html을 열면 다음과 같이 돼있습니다. 모두 태그로만 돼있고 아이디나 클래스 선택자를 사용하지 않았습니다. 1 2 3 4 5 6 스타일시트는 기본적인 레이아웃만 돼있습니다. * { margin: 0; padding: 0;}body { font-family: "Nanum Gothic", Arial, sans..