JavaScript, PHP, Ajax, Mac, iPhone and Talk Talk Talk

일단 예제

다음의 도형들은 모두 CSS”만” 사용해서 그렸습니다. 이미지나 <canvas> 또는 VML과 같은 기술도 사용하지 않았습니다.

기본

다들 아시다시피 CSS에는 경계선을 그릴 수 있는 border 속성이 있고, 상하좌우 4개의 방향에 대해 굵기, 색상, 타입을 각각 지정할 수 있습니다. 예를 들어, theBox라는 아이디를 가진 엘리먼트의 왼쪽에만 빨간색 1px 굵기의 실선을 보여주고 싶다면 다음과 같이 작성합니다.

#theBox { border-left:1px solid red; }

기본적으로 CSS에서 다루는 영역은 사각형입니다. 그래서, 4개 변의 경계선은 다음과 같이 설정할 수 있습니다.

#theBox { border:1px solid red; }

그런데, 각각의 경계선이 만나는 지점은 어떤 모양으로 그려질까요? 확인하기 위해서 각각의 경계선 색깔을 달리하고 좀 더 크게 작성해보면 다음과 같은 모양을 얻을 수 있습니다.
경계선이 만나는 지점을 확인하세요

<b style="border:40px solid;border-color:red blue green yellow;display:block">경계선이 만나는 지점을 확인하세요</b>

보다시피, 각각의 경계선이 만나는 지점은 사선 형태를 이루고 있습니다. 슬슬 무슨 일이 일어날 것 같죠? ^^ 그 다음에는 내부 컨텐트를 없애보겠습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block"></b>

이 상태에서 상단의 선을 없앱니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>

자… 이 상태에서 삼각형을 만들기는 쉽습니다. 좌우 경계선의 색상을 투명으로 만들어버리면 됩니다. 상단의 경계선처럼 없애지 않는 이유는 지금처럼 너비를 0으로 설정한 상태에서 좌우 경계선마저 없애면 전체 엘리먼트의 크기가 0이 되어 아예 화면에서 보이지 않기 때문입니다. 말보다는 눈으로 확인하는게 쉬울 듯 하여, 좌우 경계선을 아예 없애보았습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:0px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>

화면에는 안나오지만 분명 존재하고 있습니다. -_-;;;
0이던 너비를 40px 정도로 줘봤습니다.

<b style="border:40px solid;border-color:red blue green yellow;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none;border-left-style:none;border-right-style:none"></b>

경계선이 다시 보이는 것을 확인할 수 있습니다. 다시 삼각형을 만드는 부분으로 돌아가서 좌우 경계선의 색상을 투명으로 만들어보겠습니다.

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:0;margin:0;padding:0;display:block;border-top-style:none"></b>

드디어 CSS만으로 삼각형을 만들었습니다!

응용

삼각형에서 너비를 조금 주면 사다리꼴을 만들 수 있습니다. 백문이 불여일견! 일단 보시죠!

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-top-style:none"></b>

그리고 상단을 남겨두고 하단을 없애면 반대 모양의 사다리꼴을 얻을 수 있습니다.

<b style="border:40px solid;border-color:red transparent green transparent;height:0;width:40px;margin:0;padding:0;display:block;border-bottom-style:none"></b>

이 두개를 합치면 육각형을 만들 수 있죠.

색깔을 같이 맞추면 다음과 같이 보일 것입니다.

참고링크

아래 링크로 가시면 더 많은 예제를 볼 수 있습니다.

• A study of Regular polygons
• Dissecting CSS Polygons
  

만든 것

• Addic2planet(Firefox extension) : XE 플래닛 서비스용 알리미
• NaverToolbar(Firefox extension) : 네이버 툴바 프로토타입(Windows 용의 기능을 다 옮기는 것이 목표…였으나 진행하는 부서가 따로 있어 중단. 현재 배포되는 것은 그 부서에서 작성한 것으로 본인과 무관.)
• TipsEnglish(Thunderbird extension) : 툴팁 사전(메일을 읽다가 마우스 커서를 영어 단어 위로 옮기면 툴팁으로 뜻을 보여주는 기능. 구글 툴바나 네이버 툴바 등에 있는 기능과 비슷하다)

만들 것

• MR.Charset(Windows) : 문자셋을 편하게 바꿔주는 프로그램(UTF-8  <-> euc-kr, ShiftJIS <->UTF-8 등이 가능).
• MR.Sticky(Windows) : 싱크/보내기 기능이 있는 데스크탑 포스트잇 프로그램.
• MozPhoto(Firefox/Thunderbird extension) : 간단하게 사진을 편집할 수 있는 확장기능(맥에서 쓸 수 있는 간단한 사진 편집 프로그램이 없어서… 투덜투덜).
• Cropper+ (Mac) : 여러가지 옵션을 통해 사진을 원하는 크기만큼 원하는 위치에서 자를 수 있는 프로그램. MozPhoto를 먼저 만들면 안 만들 듯.
• 이름이 정해지지 않은 TODO 프로그램
• 네이버 서비스에 원하는 JS와 원하는 Style을 붙여 내 맘대로 커스터마이징할 수 있는 Firefox 확장기능
• 현재 보고있는 로컬 페이지를 바로 서버에서 보듯 전환할 수 있는 Firefox 확장기능
• 간단하게 쓸 수 있는 구문 강조가 되는 편집기 프로그램(비슷한 것을 몇 번이나 시도했는데, 완성을 못하고 있다 -_-;; 그러면서 기능은 점점 축소되고…)
• 어느 블로그 서비스든 모두 커버할 수 있는 궁극의 백업/복원 프로그램! (궁극…이라 쓰니까 어째 좀 대단해보이긴 하지만, 실은 그리 대단한 것은 아니다)

그 밖에 관심가는 것

재미는 있어보이지만, 아직 확실한 동기가 없거나 능력 부족으로 당장은 “만들 것”에 리스팅되지 못한 비운(?)의 프로그램들.

• AIR, 혹은 Firefox extension으로 만들어져서 플랫폼에 상관없이 사용할 수있는 Mindmap 저작도구
• Vista까지 무리없이 지원하는 PC 사용시간 제한 S/W

그 밖에도 많았는데 기억이 안나네… -_-;;