트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap Modal 부트스트랩에는 기본적으로 팝업창인 모달이 포함돼있지만 한가지 종류만 있습니다. 이 플러그인은 다양한 형태의 모달을 제공합니다. 프로그램 사이트 : https://github.com/jschr/bootstrap-modal/데모 사이트 : http://jschr.github.com/bootstrap-modal/ Fuel UX 트위터 부트스트랩에는 이미 폼을 만들기 위한 스타일시트가 있지만 이 플러그인을 사용하면 부트스트랩의 폼을 더욱..
1-1-3 웹 디자인 프레임워크프레임워크란 프로그램을 더 쉽고 빠르게 만들기 위해서 미리 만들어진 도구와 기능을 가진 코드의 라이브러리입니다. 정형화된 틀이 갖춰져 있어서 프레임워크라고 합니다. 웹 디자인을 하다 보면 정형화된 코드는 자주 사용하게 되므로 별도의 파일을 만들어서 저장하고 필요할 때마다 복사해서 사용합니다. 이른바 스니핏(snippet)이란 것인데 자주 사용하는 코드를 스니핏으로 만들어놓고 사용하면 다시 작성하지 않아도 되므로 빠르게 웹사이트를 만들 수 있습니다. 웹 디자인에 사용되는 정형화된 코드의 집합체인 프레임워크는 종류가 다양합니다. 보일러 플레이트(Boiler Plate: http://html5boilerplate.com/), 파운데이션(Foundation: http://found..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Acc-wizard 부트스트랩의 어코디언을 이용한 위자드(마법사)를 만들 수 있는 플러그인입니다. 이를 응용해서 쇼핑몰의 결제 단계별 과정이나 프로그램의 설치과정, 튜토리얼을 만들 수 있습니다. 프로그램 사이트: https://github.com/sathomas/acc-wizard데모 사이트: http://sathomas.me/acc-wizard/#prerequisites bootstrap-lightbox 이미지를 클릭하면 큰 이미지의 팝업창이 나오는 라이트..
워드프레스 3.5 버전이 나온지 두달 됐습니다. 1월에 3.6 버전을 위한 준비에 들어가서 3월이면 베타버전이 나오고 4월에 정식 버전이 출시될 예정입니다. 아직 개발 단계에 있기 때문에 어떤 기능이 추가될지는 알 수 없고 베타버전이 나와야 파악이 되겠습니다. January 02-09, 2013Confirm proposed scope and secure team leads.January 09, 2013Development begins.March 13, 2013Hard freeze on feature development. Stop feature development; focus on testing and compatibility (supported platforms, browsers, RTL, acces..
지난 두달간의 작업으로 트위터 부트스트랩 책 원고를 마치고 현재 리뷰 중에 있습니다. 리뷰를 마치면 디자인 작업과 인쇄를 거쳐 3월 중순경에 책이 출간될 예정입니다. 트위터 부트스트랩은 그동안 나온 웹디자인 프레임워크 중에서도 탁월한 기능으로 인해 많은 인기를 얻으며 현재 2.3.0 버전까지 나와있고 향후 출시될 3.0 버전은 기존의 모바일 겸용에서 모바일 우선 지원 형태로 진화될 것으로 보입니다. 책의 내용은 3개의 장으로 구성되며 첫번째 장은 부트스트랩 기초, 두번째 장은 Less 프리프로세서, 세번째 장은 부트스트랩으로 디자인하기 입니다. 부트스트랩 스타일시트는 Less라는 프리프로세서로 만들어졌기 때문에 2장에 Less 사용법을 포함시켰습니다. 각 장의 간략한 내용을 알아보면 다음과 같습니다. 1..
최근 다폰트 추천 폰트입니다. Recorda Script RecordaScript_Personal_Use_Only.ttfNote of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=recorda-script For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen ..
자손과 자식의 차이는 말 그대로 해석하면 됩니다. 자식은 바로 아래의 아들 딸이고 자손은 손자, 손자의 손자까지 모두 포함하죠. 그러므로 자식 선택자는 바로 아래의 자식 요소만 선택할 때 편리합니다. 일반적으로 자손 선택자를 많이 사용하는데 필요할 경우 자식만 제한해서 선택하고자 할 때 사용할 수 있습니다. 아이디나 클래스 선택자를 넣고 스타일시트에서 이를 지정해서 사용하면 될 것을 굳이 이런 선택자까지 만들어낸 것은 그만큼 웹디자인을 원활하게 하기 위해서입니다. 디자인을 많이 경험하다보면 반드시 필요하죠. 첨부 파일을 열어보면 여러 단계의 서브 메뉴를 만들고자 ul과 li 태그가 많이 있습니다. nav 태그의 자식은 바로 아래의 ul 태그 하나 뿐입니다. 하지만 자손은 그 아래에 있는 모든 태그입니다...
Less 나 Sass나 어떤 단어의 약자를 의미하지는 않지만 Less는 영어의 "~보다 적다"또는 "덜하다"는 의미로 기존의 CSS 방식의 스타일시트보다 덜 코드를 사용하는데서 연유한 것으로 보입니다. 그래서 Less is More는 Less라는 프리프로세서는 더 많은 일을 할 수 있다는 의미로 사용해서 Less 관련 글들이 이런 타이틀이 있는 것 같습니다. 이 구절은 알아보니 원래 시에서 나왔다고 하네요. 그런 이후로 노래 제목으로도 사용됐습니다. 이번 글은 Less를 사용해서 실제로 웹디자인을 해보겠습니다. 많은 부분을 하지는 못하고 웹디자인에서 가장 복잡하다고 생각되는 수평 메뉴바를 만들 것인데요. 왜 복잡한가 하면 서브 메뉴도 만들고 이 서브메뉴가 3단, 4단, 여러개의 단계에서도 나타나야 하기 ..
HTML/CSS 기초 - 잘 안쓰지만 알아두면 편리한 CSS 선택자 - 1. 이웃 선택자( + :Adjacent Selector, Adjacent Sibling Selector)
웹사이트 제작 문의
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)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다. 실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 ..
웹디자인을 하다보면 코드를 작성하고 웹브라우저에서 확인을 하는 작업이 반복됩니다. 매번 Ctrl+R키를 누르기도 번거로운데 코드를 저장하고 나면 자동으로 새로 고침해주는 프로그램을 소개합니다. LiveReload http://livereload.com/ 위 링크를 클릭하면 프로그램을 내려받을 수 있는 사이트로 이동합니다. 개발자들이나 디자이너들은 맥을 좋아해서 그런지 좋은 프로그램은 맥 버전이 참 많이 개발되더군요. 어도비의 프로그램들도 처음에는 맥 버전으로 시작됐다고 하죠. 이 프로그램도 맥 버전은 2까지 나와있는데 윈도우 용은 1도 안되는군요. 저는 윈도우를 사용하니 0.7 알파 버전을 내려받았습니다. 프로그램을 실행하면 내용이 비어있는 상태로 나타납니다. 플러스 아이콘을 클릭해서 작업 중인 프로젝트..
웹사이트 디자인할 때 아이콘은 시각적 효과로 인해서 필수적인 요소로 돼가고 있습니다. 이전에는 투명 기능을 제공하는 png 파일의 아이콘 사용해서 CSS의 background 속성을 이용해 요소에 배치하고 사용했지만 폰트 아이콘이 등장하면서 훨씬 편하게 사용할 수 있고 폰트의 성질을 갖고 있으므로 색상 변경이나 크기 변경도 자유롭습니다. 폰트 아이콘은 개발하는 회사 마다 달라서 어느 한 곳의 아이콘에 마음에 드는 아이콘이 없어서 다른 폰트 아이콘을 추가해야할 수도 있어서 이러다 보면 몇개의 폰트 아이콘을 사용하고자 수십개의 파일을 사용해야하고 폰트 하나의 용량도 커서 웹 페이지 로딩 속도에도 영향을 미칩니다. 그런데 여러가지 폰트 아이콘을 한곳에 모아놓고 원하는 아이콘만 뽑아서 쓸 수 있다면 여간 편리한..
최근 다폰트에 올라온 추천 폰트입니다. Smell The Roses 개인용 무료입니다. Calendary Hands Note of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=calendary-hands For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen o..
서브라임 텍스트 2는 세계적으로 개발자들에게 인기있는 텍스트 에디터입니다. 스킨도 여러 종류가 있어서 선택할 수 있고 개발자들이 많이 사용하고 있어서 그런지 플러그인도 아주 많이 만들어져서 손쉽게 설치해서 사용할 수 있습니다. 현재 베타 개발단계를 벗어나서 정식버전으로 됐지만 아직 무료로 사용할 수 있습니다. 언제 유료로 전환될지는 모르지만 그 전까지는 비등록 버전인 경우 파일을 저장할 때 가끔씩 구매를 유도하는 메시지가 나오기도 합니다. 이전 글에 이어서 서브라임 텍스트 2에 Less 컴파일러 플러그인을 설치해 사용하는 방법을 알아보겠습니다. http://www.sublimetext.com/2 위 링크로 이동해서 파일을 내려받아 설치합니다. 크로스 플랫폼의 텍스트 에디터라서 각 OS 별로 버전이 있습니..
이전 글에서 Less 파일을 컴파일 할 수 있는 SimpLESS와 Winless 프로그램을 알아봤는데 이 프로그램들은 Less 파일을 편집하면 에러를 감지할 수가 없습니다. 그리고 일반 편집기를 사용해야하죠. 크런치(Crunch) 프로그램은 Less나 CSS파일을 편집할 수도 있고 컴파일까지 할 수 있으며 에러 체크도 가능합니다. http://crunchapp.net/ 위 링크를 클릭하면 아래의 화면으로 이동합니다. 다운로드 버튼을 클릭해서 내려받고 설치하면 Adobe Air 기반의 프로그램이라서 Air도 같이 설치됩니다. 이전 글에서 사용한 프로젝트 파일입니다. 크런치에 사용하려면 폴더를 클릭드래그해서 좌측의 빈 공간에 놓으면 폴더가 열립니다. 그림에서 보이듯이 다른 파일은 비활성화돼서 열 수가 없습니..