웹 페이지를 보다 아름답게 꾸미려면 포토샵으로 만든 이미지나 아이콘을 많이 사용하는데 이미지를 사용하는 경우 각 이미지를 잘라서 사용하면 웹페이지 로딩시 이미지당 HTTP Request를 요청하므로 속도가 느릴 수 밖에 없습니다. 그래서 대부분의 웹사이트에서는 이미지를 하나의 큰 이미지에 포함시켜 사용합니다. 이러한 이미지 조합을 스프라이트(Sprites)라고 합니다. 위 이미지는 페이스북에서 사용하는 스프라이트입니다. 이러한 이미지를 만드는 방법은 각각의 이미지를 만들거나 아이콘을 내려받아서 포토샵으로 편집해서 하나의 이미지로 만들 수도 있지만 쉽게 만드는 방법을 제공하는 사이트가 여럿 있습니다. 더구나 스타일시트까지 만들어주니 금상첨화죠. 어떤 사이트는 이미 만들어진 웹페이지에서 스프라이트를 추출해서..
오늘 방문자님이 이곳(http://martian36.tistory.com/789)의 글을 보고 연습하시면서 다른 속성을 적용했는데 안되는 것을 보고 질문을 주셔서 답변해드립니다. 현재 문제가 되고 있는 부분이 메뉴바의 ul 태그 부분인데요. padding:10px 0;으로 되어있어서 상하 패딩만 적용했습니다. 방문자님의 경우 패딩을 적용하지 않고 마진을 적용하면 같은 결과가 나오지 않을까해서 마진을 입력해보았더니 적용이 안돼서 왜 그런 것인가 의문을 가진 것이었습니다. 웹표준에 의하면 CSS에서 상하 마진의 경우 함몰(Collapse)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다. 실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 ..
그동안 나눔 고딕 웹폰트를 사용하는 방법을 두가지 알아봤습니다. 이번에는 구글 웹폰트 사이트에 링크해서 나눔체의 여러가지 폰트를 사용하는 방법을 알아봅니다. 아래 링크로 이동해서 아래로 스크롤 하면 중간 쯤에 나눔체를 사용하는 방법이 나옵니다. 처음에 나눔 붓체의 링크가 있습니다. 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/ 위 링크로 가면 아래와 같은 화면이 나옵니다. 슬라이더가 있는 곳에서 숫자를 더블 클릭하고 원하는 가로 사이즈를 입력하거나 슬라이더로 수치를 조정합니다. 세로 사이즈도 마찬가지로 수정하고 어떤 이미지를 만들 것인지 선택합니다. 그런 다음 컬러나 그레이 이미지..
웹페이지를 만들면 주로 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..
CSS3는 이전 글에서 언급한 대로 기존의 CSS에서 발전하여 이미지파일을 사용하지 않고도 웹페이지를 아름답고 멋지게 하는 효과가 대부분입니다. 이번 글에서는 word-wrap 속성에 대해서 알아봅니다. 이것은 단어가 긴 경우 줄바꿈할때 단어를 끊어서 다음줄로 이어지도록 하는 CSS3에서 나온 새로운 항목이지만 거의 모든 웹브라우저에 적용이 가능합니다. 인터넷 익스플로로 6버전까지도 지원을 하죠. 이번 글에서 사용될 파일입니다. 압축을 풀고 html, css파일을 텍스트 에디터에 엽니다. 웹브라우저에서 어떻게 보이는지 확인하기 위해서 html 파일을 웹브라우저에 엽니다. 특히 CSS3의 많은 속성을 지원하는 구글 크롬이나 쿨노보, 애플 사파리를 사용하는 것이 좋습니다. 웹페이지에는 인터넷주소인 URL을 ..
1. CSS3의 모듈 CSS3는 CSS2.1의 확장버전으로 CSS2.1이 HTML 요소의 효과를 위한 도구였지만 CSS3는 이 효과를 보다 멋지게 표현하기 위한 도구라고 할 수 있습니다. CSS3 단계부터는 CSS항목(Specification)에 대한 개별적인 개발이 아닌 모듈형태로 개발이 되면서 하나의 모듈에는 많은 항목이 있고 하나의 모듈은 독립체로 사용됩니다. 이러한 모듈에는 선택자(Selectors), 텍스트(Text), 배경(Background) 등 여러개가 있습니다. 이러한 모듈 형태의 잇점은 모든 CSS항목이 완료되기를 기다리지 않아도 단계별 발표를 할 수 있다는 것입니다. 즉 하나의 모듈만 완료되더라도 다음에 나오는 개발단계를 단독으로 거칠 수 있기 때문에 웹브라우저의 적용이나 사용이 보다..
어도비 드림위버는 현존하는 최고의 웹 개발툴입니다. 드림위버는 원래 플래시와 파이어웍스와 함께 매크로미디어라는 회사제품이었는데 어도비가 인수를 하면서 어도비 드림위버로 변경되었습니다. 이제품들의 단축키를 보면 환경설정 단축키가 Ctrl+U로 되어있죠. 다른 어도비 CS 제품들은 Ctrl+K입니다. 이것은 매크로미디어시절부터 사용자들이 익숙해진 단축키를 그대로 유지한 것인데 그만큼 사용자를 위한 배려라고 생각됩니다. 어도비 드림위버는 텍스트 에디터만 사용했던 사람들에게는 사용하기가 아주 복잡합니다. 텍스트 에디터를 사용해서 얼마든지 웹디자인이 가능하고 또한 초보자들은 코딩연습이나 코드에 익숙해지기위해서 텍스트 에디터를 사용하는 것이 기본이죠. 어떤분들은 코드힌트 기능도 사용 못하게 합니다. 점 하나라도 직..
어도비에서 작년에 크리에이티브 스위트(Creative Suite; CS)를 5.5로 업그레이드했는데 웹디자인 부분에서 바뀐 것이 드림위버입니다. CS5.5로 업그레이드 됐죠. 그동안 어도비는 점이 들어간 업그레이드가 없었는데 0.5 버전이 나온 것은 아주 이례적인 일입니다. 이것은 그동안 애플의 스마트폰을 시작으로한 모바일 디바이스 시장의 변화에 적극 대처하기 위한 것인데 주로 바뀐 것이 제이쿼리 모바일을 이용한 웹디자인 기능 추가입니다. 이에 더하여 웹 플랫폼의 애플리케이션을 네이티브 애플리케이션으로 변환이 가능하도록한 오픈소스 프로그램인 PhoneGap을 추가하여 애플리케이션의 개발이 쉽도록 했습니다. 모바일 디바이스의 애플리케이션은 두가지로 나뉩니다. 자바, C#, C++등 컴파일 프로그래밍 언어에..
