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++등 컴파일 프로그래밍 언어에..
웹사이트에서 폰트의 사용은 아주 중요합니다. 폰트의 모양과 크기는 디자인에서 가장 중요한 역할을 하고 검색엔진은 글내용을 기준으로 검색을 해서 캐시에 저장을 해놓기 때문에 어떤 폰트를 사용하든 상관없지만 이것은 컨텐트에 해당하고 디자인을 위한 프리젠테이션을 담당하는 CSS는 모양을 결정하기 위해서 다양한 폰트중에 하나를 선택하고 크기를 결정하기 위해서 CSS의 폰트 속성을 사용합니다. 웹페이지는 픽셀기준이기 때문에 폰트로 표현하는데 한계가 있어서 좋은 디자인을 위해서는 포토샵에서 폰트로 이미지를 만들어 글자 대신에 사용하기도 합니다. CSS3가 지원되지 않는 웹브라우저에서도 원하는 효과를 내기 위해서는 글자의 그라데이션이라든가 그림자효과를 포토샵을 이용해서 이미지를 만들어 사용하더라도 텍스트는 반드시 포..
이전 글들에서는 포토샵으로 만든 하나 이상의 이미지를 이용하여 모서리가 둥근 배경을 만들었지만 항상 포토샵을 사용해서 만들어야하는 단점이 있습니다. CSS3의 border-radius 속성을 사용하면 간단하게 둥근 모서리의 배경을 만들 수 있지만 많은 사람들이 사용하는 인터넷 익스플로러에서는 9버전만 지원한다는 단점이 있습니다. 구글의 애드센스 페이지를 보다가 둥근 모서리의 배경이 있어서 살펴보니 CSS의 border 속성과 여러가지 다른 속성을 이용하여 테두리가 있는 둥근 모서리의 배경을 만들어 사용하고 있었습니다. 아주 복잡하여 CSS 기초부분에서 다루기에는 힘드니 이를 응용한 단순한 방법으로 테두리가 없는 둥근모서리의 배경을 만들어 보겠습니다. 1의 이미지는 CSS만든 배경이미지로 웹에서 100%로..
HTML/CSS 기초 - 하나의 이미지를 이용하여 상하좌우로 무한대로 늘어나는 배경이미지 만들기 One image flexible rounded corner Background
웹사이트 제작 문의
그동안 둥근 모서리의 배경이미지 만들기에서는 3개 이상의 이미지가 필요하였는데 하나의 이미지로 상하좌우로 무한대로 늘어나는 배경이미지를 만들기를 시도해 보았는데 가능하게 되서 포스팅으로 올립니다. 이전 글에서 소개한 것들보다 간단합니다. 다만 모서리부분이 투명이 안되기 때문에 포토샵에서 이미지를 만들때 배경색으로 사용할 색상을 미리 정해야합니다. 압축파일을 풀고 html 파일을 텍스트 에디터에 열면 위와같이 나옵니다. 선택자는 클래스를 사용합니다. 여러곳에서 사용할 수 있도록 하기 위함이죠. 그런데 선택자 이름이 box입니다. 선택자의 이름은 가능한한 특별하게 만들어야합니다. box라는 이름으로 다른 클래스 선택자에서 사용하고 있으면 중복되니까요. 그래서 box를 rounde-corner-box로 고쳐줍..
이번 글에서는 기억을 되살릴겸 아이디 선택자와 클래스 선택자에 대해서 되짚어보고 이미 아이디 선택자를 사용한 경우 이를 클래스 선택자로 변경하여 웹페이지에서 한번만 사용할 수 있는 배경이미지를 재활용하는 방법을 알아봅니다. 이전 글 에서 아이디 선택자와 클래스 선택자에 대해서 알아봤는데 마지막 부분에서 선택자를 선정할때 웹페이지에서 단 하나만 있는 것은 아이디 선택자를 사용하고 두곳 이상의 장소에서 사용할때는 클래스 선택자를 사용한다고 했습니다. 학교의 한 반(class)에는 여러명의 학생(id: Identification)이 있죠. 그래서 졸고있는 홍길동이라는 아이디를 가진 학생에게 운동장 한바퀴 돌고 오라고 명령(CSS 선언)을 내렸다면 한명의 학생만 이 명령을 받아 운동장을 돌고 올것입니다. 그런데..
이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서 가장 중요한 부분이 테두리가 있는 둥근 모서리 이미지입니다. 마침 이웃 블로거이신 이츠하크님의 요청으로 워드프레스테마를 티스토리 스킨으로 변경하는 작업을 포스팅하려고 했습니다. 변경하고자 하는 워드프레스 테마는 CSS3에서 소개된 border-radius 속성을 사용하고 있죠. 이 테마를 사용하면 아직도 많은 사람이 사용하고 있는 IE8 이전 버전에서는 둥근 모서리가 나오지 않고 각진 모서리가 나오게 됩니다. 왜냐하면 인터넷 익스플로러는 이 속성이 IE9에서만 가능하기 때문이죠. 그러니 이 속성을 사용해봐야 아직도 IE8 이전 버전을 사용하는 방문자는 내가 원하는 디자인으로 보..
이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의 repeat-y 값을 이용합니다. 그러면 좌우로 늘어나는 이미지는 repeat-x 값을 사용하면 되지만 포토샵으로 이미지를 새로 만들어야합니다. 이 방법은 상하좌우로 글의 내용에 따라서 늘어나지만 컨텐트 영역이 상하로 아주 길어지는 부분에서는 늘어나는 만큼의 이미지를 포토샵으로 만들어야하므로 포토샵으로 세로 20,000픽셀 이상의 이미지를 만들어야하는 번거로운 점이 있습니다. 먼저 글보다 이미지도 하나가 늘어납니다. 또 하나의 방법은 상하좌우로 늘어나면서 작은 이미지를 사용하면 큰 이미지를 사용해야하는 부담은 없지만 8개의 이미지를 사용해야하..
CSS3를 이용하면 블럭요소의 모서리가 둥글게 하거나 그림자를 만들 수도 있습니다. CSS3는 몇년전부터 사용되었지만 모든 웹브라우저에 적용되는 것은 아닙니다. 제가 CSS에 관해서 포스팅하면서 자주 인터넷 익스플로러을 언급하는데 이번에도 어쩔 수 없이 언급할 수 밖에 없습니다. 다른 웹브라우저는 다 지원하지만 그렇지 못한 것이 IE 시리즈이기 때문입니다. 위 기능들은 IE9버전에서만 지원하며 아직도 우리나라의 상황에서는 많은 사람들이 IE8 이전 버전을 사용하고 있을겁니다. 그렇다면 아무리 편하고 좋은 CSS3를 사용해서 웹디자인을 한다해도 별 쓸모가 없게 됩니다. 그래서 사용하는 것이 포토샵으로 모서리가 둥근 이미지를 만들고 그림자도 만들어서 배경이미지로 사용해야하는 것이죠. 배경이미지를 사용하지 않..
그동안의 포스팅은 CSS에서 기본이 되는 레이아웃에 관한 글이었습니다. CSS는 레이아웃에 관한 테크닉이므로 레이아웃에 관한 글을 먼저 포스팅했고 이를 먼저 알게 되면 웹페이지를 전반적으로 볼수 있는 능력이 길러지게 됩니다. 즉 숲을 볼수 있는 것이죠. 이제부터는 레이아웃에서 세부적으로 들어가 나무를 심는 작업을 하게 됩니다. CSS를 사용하지 않던 시절에는 모든 이미지가 html의 태그를 사용하여 이미지를 웹페이지에 삽입하였지만 중요하지 않은 이미지도 장식용으로 나타나는 단점이 있었습니다. 웹페이지에서 이미지를 사용하는 방법은 html의 를 사용하는 방법과 CSS의 background 속성을 사용하는 방법이 있습니다. 두가지 방법의 차이는 웹페이지의 컨텐트에 속하느냐 아니면 장식용으로만 사용하느냐의 차..
어떤 레이아웃이든지 3단의 레이아웃을 만들기는 까다롭습니다. 두개의 사이드바가 어느 한쪽으로 붙어있다면 기존의 2단 레이아웃을 수정해서 사이드바영역 안에 두개의 사이드바를 만들면 간단하게 해결되지만 사이드바가 양쪽으로 나누어지면 약간 복잡해지죠. 우선 하나의 사이드바 안에 두개의 사이드바를 만들어서 어느 한쪽으로만 사이드바가 두개 있는 레이아웃을 만들어보고 두개의 사이드바가 양쪽으로 나누어지는 레이아웃을 만들어봅니다. 1. 두개의 사이드바를 한쪽에 배치 압축파일을 풀고 텍스트에디터에 두개의 파일을 열면 위와같이 이전 글에서 사용한 내용이 나옵니다. 이것을 시작으로 사이드바를 두개를 만들어봅니다. 요령은 html에서 1을 복사하여 아래에 붙여넣고 CSS에서는 2를 복사하여 아래에 두번 붙여넣습니다. 아래의..
유동폭 레이아웃은 컨텐트가 화면 전체를 채우게 되므로 요즘의 와이드 모니터가 많이 사용되고 있는 때에는 가독성이 떨어지므로 잘 사용하지 않습니다. 하지만 일정범위 안에서는 유동폭 레이아웃이 되도록 하고 그 범위를 넘어서면 고정폭 레이아웃이 되도록하는 방법도 사용됩니다. 이번글에서는 그동안의 내용을 되새기는 의미에서 하나씩 집어가면서 유동폭 레이아웃에 대해서 알아봅니다. 1. 유동폭 2단 레이아웃 압축파일을 풀면 두개의 파일이 있습니다. 하나는 웹페이지에서 컨텐트를 담당하는 html 파일이고 하나는 프리젠테이션을 담당하는 CSS파일입니다. 두개의 파일을 연결해주기 위해서 6번째 줄에서 link 를 사용합니다. 참조 파일의 이름은 CSS파일의 이름과 일치해야합니다. 웹페이지는 크게 4부분으로 나누어집니다. ..
이전 글에서 레이아웃의 종류로 고정폭과 유동폭에 대해서 알아보았습니다. 대부분의 블로그나 웹사이트에서는 고정폭 레이아웃을 사용합니다. 요즘은 모니터화면이 와이드로 나오기 때문에 유동폭 레이아웃을 사용하면 컨텐트가 화면에 꽉 차게 나오므로 글을 읽기가 힘들죠. 특수한 경우, 예를 들면 포털 사이트에서 검색어를 입력하고 엔터키를 치면 들어가는 페이지의 경우는 유동폭 레이아웃을 사용합니다. 컨텐트가 좌우로 꽉차게 나오죠. 하지만 화면을 줄이다보면 일정 범위까지는 컨텐트 영역이 좌우로 줄어들지만 그 범위를 넘어서면 고정폭으로 전환되어 더이상 줄어들지 않습니다. 이번 글에서는 고정폭 2단(Two Columns)과 3단 레이아웃에 대해서 설정하는 방법을 알아봅니다. 2단 레이아웃은 컬럼이 두개만 있기때문에 CSS에..
블로그나 웹사이트를 만들기 위해서는 가장 먼저 생각해야하는 것이 레이아웃입니다. 가입형 블로그를 개설하거나 티스토리 같은 서비스형 블로그를 개설하더라도 가장 먼저 선택을 하는 것이 이미 만들어진 블로그 스킨을 선택하게 되는데 스킨의 레이아웃이 어떤 것인지를 먼저 결정해야합니다. 스킨의 레이아웃의 형태는 1단, 2단, 3단 레이아웃이 있으며 이것은 본문의 열(Column)이 몇개 있느냐에 따른 분류입니다. 본문의 열이 여러개인 경우는 중요한 컨텐트부분이 하나가 있고 나머지는 사이드바가 됩니다. 물론 컬럼이 하나인 경우는 사이드바가 없고 사이드바에 들어갈 내용은 푸터(Footer)에 위치하게 됩니다. 또한 레이아웃은 고정폭(Fixed Width)인가 유동폭(Liquid Width)인가에 따라서도 분류됩니다...