웹 페이지를 보다 아름답게 꾸미려면 포토샵으로 만든 이미지나 아이콘을 많이 사용하는데 이미지를 사용하는 경우 각 이미지를 잘라서 사용하면 웹페이지 로딩시 이미지당 HTTP Request를 요청하므로 속도가 느릴 수 밖에 없습니다. 그래서 대부분의 웹사이트에서는 이미지를 하나의 큰 이미지에 포함시켜 사용합니다. 이러한 이미지 조합을 스프라이트(Sprites)라고 합니다. 위 이미지는 페이스북에서 사용하는 스프라이트입니다. 이러한 이미지를 만드는 방법은 각각의 이미지를 만들거나 아이콘을 내려받아서 포토샵으로 편집해서 하나의 이미지로 만들 수도 있지만 쉽게 만드는 방법을 제공하는 사이트가 여럿 있습니다. 더구나 스타일시트까지 만들어주니 금상첨화죠. 어떤 사이트는 이미 만들어진 웹페이지에서 스프라이트를 추출해서..
오늘 방문자님이 이곳(http://martian36.tistory.com/789)의 글을 보고 연습하시면서 다른 속성을 적용했는데 안되는 것을 보고 질문을 주셔서 답변해드립니다. 현재 문제가 되고 있는 부분이 메뉴바의 ul 태그 부분인데요. padding:10px 0;으로 되어있어서 상하 패딩만 적용했습니다. 방문자님의 경우 패딩을 적용하지 않고 마진을 적용하면 같은 결과가 나오지 않을까해서 마진을 입력해보았더니 적용이 안돼서 왜 그런 것인가 의문을 가진 것이었습니다. 웹표준에 의하면 CSS에서 상하 마진의 경우 함몰(Collapse)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다. 실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 ..
웹사이트 디자인할 때 아이콘은 시각적 효과로 인해서 필수적인 요소로 돼가고 있습니다. 이전에는 투명 기능을 제공하는 png 파일의 아이콘 사용해서 CSS의 background 속성을 이용해 요소에 배치하고 사용했지만 폰트 아이콘이 등장하면서 훨씬 편하게 사용할 수 있고 폰트의 성질을 갖고 있으므로 색상 변경이나 크기 변경도 자유롭습니다. 폰트 아이콘은 개발하는 회사 마다 달라서 어느 한 곳의 아이콘에 마음에 드는 아이콘이 없어서 다른 폰트 아이콘을 추가해야할 수도 있어서 이러다 보면 몇개의 폰트 아이콘을 사용하고자 수십개의 파일을 사용해야하고 폰트 하나의 용량도 커서 웹 페이지 로딩 속도에도 영향을 미칩니다. 그런데 여러가지 폰트 아이콘을 한곳에 모아놓고 원하는 아이콘만 뽑아서 쓸 수 있다면 여간 편리한..
이전 글에서 CSS 프리프로세서인 Less라는 프로그램을 사용하면 웹브라우저가 인식할 수 있는 CSS 파일을 자바스크립트 라이브러리가 자동으로 만들어줍니다. 대부분의 경우 이러한 방법을 사용하지 않고 less 파일을 CSS 파일로 변환하는 컴파일러를 사용합니다. 그래야 로딩속도가 빨라지기 때문이죠. 이번 글에서는 Less 컴파일러 중 인기가 높은 Simpless와 Winless에 대해 알아보겠습니다. 1. SimpLESS http://wearekiss.com/simpless 위 링크를 클릭해서 다음의 웹사이트로 이동합니다. 사용하는 OS에 따라서 화면이 다르게 나올겁니다. 윈도우로 접속하면 윈도우 아이콘이 활성화된 위와같은 화면이 나오고 맥으로 접속하면 사자 아이콘이 활성화돼서 각각의 프로그램을 내려받을..
다음은 몇개월 후 발행될 책 내용의 일부입니다. 1. 부트스트랩 파일 내려받기 http://twitter.github.com/bootstrap/ 위 링크로 이동하면 트위터 부트스트랩 홈페이지가 나타납니다. 부트스트랩 파일을 내려받는 방법은 3가지가 있습니다. 우선 기본적인 파일을 내려받으려면 파란색의 “Download Bootstrap” 버튼을 클릭하고, 부트스트랩 관련 전체 파일을 내려받으려면 “GitHub project” 링크를 클릭해서 페이지를 이동한 후, zip 파일을 내려받으면 됩니다. 마지막 방법은 메뉴 상단의 Customize 링크를 클릭해서 원하지 않는 부분을 제거하고 내려받는 방법입니다. 이 책에서는 아이콘의 활용도가 높은 Font Awesome 폰트 아이콘을 사용할 것이므로 Custom..
그동안 나눔 고딕 웹폰트를 사용하는 방법을 두가지 알아봤습니다. 이번에는 구글 웹폰트 사이트에 링크해서 나눔체의 여러가지 폰트를 사용하는 방법을 알아봅니다. 아래 링크로 이동해서 아래로 스크롤 하면 중간 쯤에 나눔체를 사용하는 방법이 나옵니다. 처음에 나눔 붓체의 링크가 있습니다. 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..
웹디자인을 하다보면 이미지나 텍스트가 필요한데 대부분 텍스트는 Lorem ipsum이라는 곳에서 더미 텍스트(dummy text)를 복사해서 붙여넣고 사용하죠. 이미지는 어떨까요. 보통 무료 이미지 사이트에서 내려받아서 포토샵으로 자르고 저장해서 HTML 코드로 붙여넣고 사용합니다. 그런데 원하는 사이즈를 입력하면 자동으로 이미지를 만들어주는 사이트가 있어서 참 편리합니다. 이름도 Lorem pixel입니다. http://lorempixel.com/ 위 링크로 가면 아래와 같은 화면이 나옵니다. 슬라이더가 있는 곳에서 숫자를 더블 클릭하고 원하는 가로 사이즈를 입력하거나 슬라이더로 수치를 조정합니다. 세로 사이즈도 마찬가지로 수정하고 어떤 이미지를 만들 것인지 선택합니다. 그런 다음 컬러나 그레이 이미지..
제이쿼리는 자바스크립트 라이브러리입니다. 라이브러리란 이미 만들어진 많은 기능이 있는 함수들이 모인 도서관(Library)을 말합니다. 자바스크립트는 배우기가 어려워서 일반인들은 접근하기가 힘들지만 제이쿼리는 누구든지 배울 수 있도록 쉽게 돼있습니다. 어려운 자바스크립트를 이용해서 어떤 기능을 하는 플러그인을 만들자면 수많은 코드가 필요하지만 일반적으로 많이 사용하는 기능을 미리 정의해 놓고 라이브러리에 저장해서 불러오기만 하면 되는 것이 제이쿼리입니다. 이러한 자바스크립트 라이브러리는 제이쿼리만 있는 것이 아니라 Prototype, script.aculo.us, Ext Core, jsPHP, MooTools, jQuery, Ext JS, DHTMLX, Dojo Toolkit 등 종류가 많습니다. 그중에..
웹페이지를 만들면 주로 CSS로 레이아웃을 하기 때문에 포토샵으로 만든 이미지는 잘 사용하지 않습니다. 그래도 특수한 경우 작은 이미지를 사용해서 상하로 반복될 수 있는 이미지를 삽입하면 원하는 효과를 얻을 수 있습니다. 이번 글에서는 제 블로그의 방문자님이 궁금해 하는 내용으로 오랫만에 HTML/CSS에 관한 글을 올려봅니다. 우선 이 글의 제목을 보면 금방 이해가 힘들므로 그림을 보면서 무슨 의미인지 알아보겠습니다. 간단한 구조의 웹사이트 레이아웃입니다. 현재 상황을 보면 컨텐트와 사이드바 사이에 선이 그려져 있습니다. 두 곳의 배경 색상도 다르죠. 대부분의 경우 위와같은 레이아웃을 만들려면 두 개의 요소의 높이가 같아야합니다. 하지만 두개의 요소의 내용이 항상 같을 수는 없죠. 컨텐트 영역의 내용이..
웹디자인에서 요소의 위치를 변경하고자 할 때 HTML의 요소를 이동하면 되지만 부모 요소의 범위 안에서만 변경이 가능합니다. 부모 요소의 제약을 받지 않고 벗어나서 배치할 수 있게 하려면 CSS의 포지션을 사용합니다. 어제 방문자님이 고정위치 포지션으로 배치된 것을 수정하고자 방명록에 글을 올렸는데 이를 변경하는 방법을 알아보겠습니다. 제 글의 CSS 기초부분을 보면 포지션에 관해 이해를 돕기 위해 상세히 나오지만 좀 장황하죠. 이번 글은 방문자님의 블로그를 예로 들어 설명해 보겠습니다. http://generalog.tistory.com/ 위 블로그로 가서 보면 뷰온 버튼이 글 박스의 우측에 떨어져서 배치돼 있습니다. 수정을 하고나면 변경이 되겠죠. 이 요소가 어떤 식으로 배치가 됐는지 알아보려면 개발..
웹 언어의 사용환경은 W3C의 표준 승격보다는 웹브라우저가 얼마나 빠르게 진화하는가에 크게 좌우됩니다. 현재 HTML5의 표준화단계는 5단계중 첫번째인 Working Draft단계로 초안에 불과합니다. 5대 웹브라우저중 인터넷 익스플로러를 제외하고는 적용이 활발히 진행되고 있습니다. 가장 문제가 IE인데요. 앞으로 나올 IE10버전도 문제가 됩니다. 왜냐하면 사용환경이 윈도우 8에서만 작동되기 때문이죠. 우리나라 국민 웹브라우저인 IE가 이런 식이라면 웹디자이너들은 계속 고생하는 수 밖에 없습니다. 윈도우환경을 많이 사용하고 있는 국민 대다수가 새로운 OS가 나오고 웹브라우저가 나온다한들 인터넷 접속환경은 그리 달라지지는 않을것 같습니다. 다행히 IE의 점유율이 계속, 그것도 대폭 떨어지고 있습니다. 단..
HTML5는 30여개의 새로운 태그가 추가 되었고 CSS로 가능하거나() 문제가 되는 태그()는 지원하지 않게 되었습니다. 지원이 안된다는 것은 완전히 폐기 되어 기존에 이 태그를 사용한 웹페이지가 엉망이 된다는 것은 아니고 웹브라우저는 지원을 하게 됩니다. 이전부터 사용하지말것을 권장한 것은 CSS로 할 수 있거나 문제가 있는 것으로 반대(Deprecated)의견을 제시한 것이 있고 완전히 폐기(Obsolete)된 것도 있지만 웹브라우저는 계속 지원하는 경향이 있습니다. 표준이 아닌 것으로 됐어도 사용이 가능하다는 것이죠. 태그는 흔히 요소(element)로 사용됩니다. 같은 용어로 사용되기도 하지만 정확히 말하자면 태그안에는 요소가 있고 속성이 있습니다. 태그에서 h1은 요소입니다. 속성은 요소를 새..
HTML은 현존하는 프로그래밍 언어중 가장 많이 쓰이는 언어입니다. 왜냐하면 모든 웹페이지는 이 언어를 사용하기 때문입니다. HTML은 Hyper Text Markup Language의 첫글자를 따서 만든 용어입니다. Hyper는 Jump를 의미합니다. 웹페이지는 링크를 클릭하면 다른 곳으로 이동할 수 있고 수많은 웹페이지들과 연결되어 있어서 모든 웹페이지들은 이 링크를 통해서 정보가 연결됩니다. Markup은 인쇄교정시 사용하는 용어로 주석을 의미합니다. 인쇄할때 어떤 글자는 어떤 크기로 선택하라는 주석을 달죠. 예전에는 그랬습니다. 이 주석다는 작업을 Markup이라고 합니다. 그러니 HTML은 웹페이지의 컨텐트에 주석다는 작업에 사용되는 언어입니다. 이것은 단순한 언어수준일 경우의 얘기이고 지금은 ..
좌측 상단의 이미지는 이번 글에서 만들게 될 리본입니다. CSS3의 transform 속성은 여러가지가 값을 사용합니다. 그 값으로 사용하는 것도 형태가 다르지만 구문 구조는 다음과 같습니다. transform: function(measurements); 속성은 항상 transform을 사용하고 값에 해당하는 function에는 translate, scale, rotate, skew 등의 transform의 세부 형태를 지정한 다음 괄호안에 수치와 단위를 넣습니다. 단위가 필요없는 경우는 수치만 넣으며 배율을 의미합니다. 1. transform:scale(x,y); img { float: right; margin: 0 0px 10px 20px; } img:hover { -webkit-transform:s..
이번 글에서 만들게 될 말풍선입니다. 이전 글에서 알아본 border-radius를 이용하면 타원형을 만들 수 있습니다. 여기에 border-color, border-style, border-width를 별도로 사용하여 삼각형을 만들고 transform:rotate(deg); 를 사용하면 이 삼각형을 회전시킨 수 있습니다. CSS3의 transform은 나중에 별도로 자세히 알아보겠으나 아직 Working Draft 단계여서 속성값 앞에 웹브라우저별 접두어를 사용해야합니다. 1. 삼각형 만들기 html파일을 텍스트 에디터에 열고 를 입력하고, CSS파일을 텍스트 에디터에 열고 triangles클래스 선택자에 대해서 위와같이 선언합니다. width와 height를 0으로 하면 모양이 전혀 안나올 것 같지만..
CSS3의 border-radius는 CSS기초부분에서 많이 다루었는데 그만큼 웹페이지에서 많이 사용하는 속성입니다. 인터넷 익스프로러 8버전이하에서는 지원을 하지 않기 때문에 이미지 파일을 이용하여 여러가지 방법으로 둥근 모서리를 만들었죠. IE에서 이것만 지원해도 웹디자인은 쉬워질텐데 말이죠. 1. 웹브라우저별 접두어(Prefix) border-radius 속성은 IE8이하 버전을 제외하고는 거의 모든 웹브라우저에서 지원합니다. 우리나라에서는 IE의 사용자가 아주 많습니다. IE8 이하 버전의 사용자도 아직도 많은 수를 차지합니다. 그렇기 때문에 이미지를 이용하여 둥근 모서리의 박스를 만들어서 사용할 수 밖에 없습니다. 위 표를 보면 파이어폭스 3.6이나 안드로이드 브라우저 2.1에 접두어(Prefi..