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

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

서브라임 텍스트 3 에디터가 그동안 구매자에게만 사용이 가능했는데 지난 6월 말경에 무료 사용자에게도 사용이 가능하도록 개방됐습니다. 이 텍스트 에디터는 다양한 플러그인을 쉽게 설치해서 사용할 수 있어서 개발자들에게 아주 인기있는 프로그램입니다. 서브라임 텍스트 3는 가장 발전된 것이 속도입니다. 파일을 열면 순식간에 열립니다. 이전의 버전은 길게는 수십초 동안 기다려야했죠. 310kb에 해당하고 6천줄이 넘는 부트스트랩 3 도움말 문서 파일을 열어보니 용량이 작은 파일을 연 것과 같은 속도로 열립니다. 여러 개의 파일을 열어놓고 프로그램을 닫은 다음 다시 열었더니 마찬가지로 놀라운 속도로 열립니다. 아울러 서브라임 텍스트 2 버전도 2.0.2로 업그레이드됐습니다. 빌드번호 2221입니다. 두가지 이상의..

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

CSS Copy 기능은 포토샵 CS 6.1 버전에서 업데이트 된 기능입니다. 포토샵 CC에서는 기본으로 설치돼 있습니다. 이것은 포토샵을 이용해서 버튼이나 HTML 요소를 이미지로 만들고 CSS Copy를 선택하면 스타일시트를 자동으로 만들어주는 기능입니다. 이를 그대로 스타일시트에 붙여서 사용하면 됩니다. 하지만 포토샵의 모든 효과가 스타일시트로 전환되는 것이 아니라 일부는 스타일시트를 생성하지 못합니다. 그래서 제3자 확장 프로그램이 개발됐습니다. 우선 포토샵 CC의 CSS Copy 기능을 알아보겠습니다. 포토샵 CC로 직접 버튼을 만들어도 되지만 부트스트랩 PSD 파일을 이용해보겠습니다. 이 파일을 포토샵 CC에 열고 기존에 열려있는 요소들을 안보이도록 눈아이콘을 모두 꺼준 다음 버튼 그룹의 Mai..

부트스트랩의 특징 웹페이지를 쉽게 만들 수 있다 부트스트랩의 홈페이지에서도 언급하고 있듯이 부트스트랩을 다루기 위해서는 html과 CSS에 대한 지식을 필요로 합니다. 그렇다고 깊은 지식이 필요한 것은 아니며 html 태그의 사용법, 역할을 알고 있으면 되고 CSS는 혼자서 레이아웃을 만들줄만 알면 됩니다. 웹페이지는 html 태그로 뼈대가 만들어지며 태그에 CSS 선택자를 추가하고 이 선택자에 대해서 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 됩니다. 그런데 선택자는 이미 부트스트랩 스타일시트에서 만들어 놓았으니 태그에 선택자만 삽입하면 되는 것이죠. 다만 어떤 선택자를 어느곳에 삽입해야하는지를 알아야하는 것입니다. html 코드의 재활용 부트스트랩은 이미 만들어진 스타일시트를 재활용하는 것..

부트스트랩이란? 트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다. 웹사이트를 너무 쉽게 만들 수 있다는 점에서 진정한 웹디자인이 아니라는 우려의 목소리도 나올 정도입니다. 스타일시트의 재활용 스타일시트로 웹디자인을 하다보면 ..

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 태그 하나 뿐입니다. 하지만 자손은 그 아래에 있는 모든 태그입니다...

Less 나 Sass나 어떤 단어의 약자를 의미하지는 않지만 Less는 영어의 "~보다 적다"또는 "덜하다"는 의미로 기존의 CSS 방식의 스타일시트보다 덜 코드를 사용하는데서 연유한 것으로 보입니다. 그래서 Less is More는 Less라는 프리프로세서는 더 많은 일을 할 수 있다는 의미로 사용해서 Less 관련 글들이 이런 타이틀이 있는 것 같습니다. 이 구절은 알아보니 원래 시에서 나왔다고 하네요. 그런 이후로 노래 제목으로도 사용됐습니다. 이번 글은 Less를 사용해서 실제로 웹디자인을 해보겠습니다. 많은 부분을 하지는 못하고 웹디자인에서 가장 복잡하다고 생각되는 수평 메뉴바를 만들 것인데요. 왜 복잡한가 하면 서브 메뉴도 만들고 이 서브메뉴가 3단, 4단, 여러개의 단계에서도 나타나야 하기 ..

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

웹 페이지를 보다 아름답게 꾸미려면 포토샵으로 만든 이미지나 아이콘을 많이 사용하는데 이미지를 사용하는 경우 각 이미지를 잘라서 사용하면 웹페이지 로딩시 이미지당 HTTP Request를 요청하므로 속도가 느릴 수 밖에 없습니다. 그래서 대부분의 웹사이트에서는 이미지를 하나의 큰 이미지에 포함시켜 사용합니다. 이러한 이미지 조합을 스프라이트(Sprites)라고 합니다. 위 이미지는 페이스북에서 사용하는 스프라이트입니다. 이러한 이미지를 만드는 방법은 각각의 이미지를 만들거나 아이콘을 내려받아서 포토샵으로 편집해서 하나의 이미지로 만들 수도 있지만 쉽게 만드는 방법을 제공하는 사이트가 여럿 있습니다. 더구나 스타일시트까지 만들어주니 금상첨화죠. 어떤 사이트는 이미 만들어진 웹페이지에서 스프라이트를 추출해서..

오늘 방문자님이 이곳(http://martian36.tistory.com/789)의 글을 보고 연습하시면서 다른 속성을 적용했는데 안되는 것을 보고 질문을 주셔서 답변해드립니다. 현재 문제가 되고 있는 부분이 메뉴바의 ul 태그 부분인데요. padding:10px 0;으로 되어있어서 상하 패딩만 적용했습니다. 방문자님의 경우 패딩을 적용하지 않고 마진을 적용하면 같은 결과가 나오지 않을까해서 마진을 입력해보았더니 적용이 안돼서 왜 그런 것인가 의문을 가진 것이었습니다. 웹표준에 의하면 CSS에서 상하 마진의 경우 함몰(Collapse)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다. 실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 ..

서브라임 텍스트 2는 세계적으로 개발자들에게 인기있는 텍스트 에디터입니다. 스킨도 여러 종류가 있어서 선택할 수 있고 개발자들이 많이 사용하고 있어서 그런지 플러그인도 아주 많이 만들어져서 손쉽게 설치해서 사용할 수 있습니다. 현재 베타 개발단계를 벗어나서 정식버전으로 됐지만 아직 무료로 사용할 수 있습니다. 언제 유료로 전환될지는 모르지만 그 전까지는 비등록 버전인 경우 파일을 저장할 때 가끔씩 구매를 유도하는 메시지가 나오기도 합니다. 이전 글에 이어서 서브라임 텍스트 2에 Less 컴파일러 플러그인을 설치해 사용하는 방법을 알아보겠습니다. http://www.sublimetext.com/2 위 링크로 이동해서 파일을 내려받아 설치합니다. 크로스 플랫폼의 텍스트 에디터라서 각 OS 별로 버전이 있습니..

이전 글에서 CSS 프리프로세서인 Less라는 프로그램을 사용하면 웹브라우저가 인식할 수 있는 CSS 파일을 자바스크립트 라이브러리가 자동으로 만들어줍니다. 대부분의 경우 이러한 방법을 사용하지 않고 less 파일을 CSS 파일로 변환하는 컴파일러를 사용합니다. 그래야 로딩속도가 빨라지기 때문이죠. 이번 글에서는 Less 컴파일러 중 인기가 높은 Simpless와 Winless에 대해 알아보겠습니다. 1. SimpLESS http://wearekiss.com/simpless 위 링크를 클릭해서 다음의 웹사이트로 이동합니다. 사용하는 OS에 따라서 화면이 다르게 나올겁니다. 윈도우로 접속하면 윈도우 아이콘이 활성화된 위와같은 화면이 나오고 맥으로 접속하면 사자 아이콘이 활성화돼서 각각의 프로그램을 내려받을..

그동안 나눔 고딕 웹폰트를 사용하는 방법을 두가지 알아봤습니다. 이번에는 구글 웹폰트 사이트에 링크해서 나눔체의 여러가지 폰트를 사용하는 방법을 알아봅니다. 아래 링크로 이동해서 아래로 스크롤 하면 중간 쯤에 나눔체를 사용하는 방법이 나옵니다. 처음에 나눔 붓체의 링크가 있습니다. http://www.google.com/webfonts/earlyaccess 나눔 붓체 Nanum Brush Script (Korean)The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fo..