MangoLog

관타나모로 가는 길
- 그들은 나쁜 놈들이 아니었다. 단지 재수가 없었을 뿐.

친구의 결혼을 위해 파키스탄에 갔다가 아프간 사태에 휘말려 알카에다로 몰리면서 수년간 비인격적인 대우를 받으며 수용소 생활을 해야했던 네 친구의 이야기.

그들이 무고했고, 무고한 그들을 가혹하게 대했다는 사실로 그들을 가두고 심문했던 아프간 북부동맹과 미군을 악의 축으로 삼는 흑백논리를 펴고 싶진 않다. 선과 악의 이분법만으로는 사태를 제대로 볼 수 없을테니.

당시 미국은 필사적이었다. 9.11사건으로 심각하게 위협을 받았는데 자신들을 위협하고 있는 것이 무엇인지 그 정체를 몰랐으니까. 그래서 눈에 보이는대로 잡아다가 두들겨패서라도 "내가 당신들을 위협하고 있는 적의 실체다"라는 말을 듣고 싶었겠지. 그래야 마음이 편해질테니...

부시 대통령은 말한다.
"그들은 나쁜 놈들이다. 나쁜 놈들은 착한 사람들과 같은 권리를 가질 수 없다."

이 너무나 단순명료해서 도무지 잘못 이해할 수 없을 것 같은 언설에는 함정이 있다. 한번 나쁜 놈으로 찍히면 그는 자신의 결백을 입증할 권리를 갖지 못한 채 바닥없는 나쁜 놈의 함정으로 떨어지고 만다. 이 다큐의 주인공들처럼.

친구의 결혼을 위해 고국 파키스탄으로 따라나섰다가 아프간의 현실을 알고 싶어졌고, 가면 뭔가 도울 일이 있을지 모른다는 선의가 발동해서 아프간으로 가게된 이 젊은이들은 - 대체 당시 아프간에 있었던 사람들 중에 이런 이유로 그곳에 간 사람이 얼마나 되겠는가 생각해보면 - 진정 재수없는 친구들이다.

하지만, 재수가 없는 것이 죄는 아니다. 재수가 없는 사람들을 잡아다 구속하고 고문하는 것이 명백한 범죄다. 그럼에도 불구하고 미국은 이를 정당한 자유수호 행위의 작은 부작용 정도로 여기며 자신들의 실수를 인정하지 않는다. 그리고 여전히 부작용이 있는 자유수호 행위를 세계 곳곳에서 수행하고 있다.

결론은 미국에 찍히지 마라. 행여 미국에 찍힌 나라로 여행갈 생각도 하지 마라. 그 나라로 같이 여행가자는 친구랑 친구하지 마라. 착한 편에 있으려면 그런 자유와 권리를 자진 반납하라. 착하게 살기도 쉽지 않은 세상이다.

Posted by 망고

재료

Posted by 망고

망고의 플래시 슬라이드 쇼

친구가 결혼하면서 간단하게 결혼식장에 뿌려줄 슬라이드쇼를 하나 만들어달라고 한 것이 시작이었습니다. 처음엔 라이트룸이나 기타 다른 툴들을 써서 간단하게 만들어주려고 마음먹고 이것저것 건드려봤는데... 이거 왠걸... 딱 구미에 맞아 떨어지는 녀석이 없는 겁니다.

워낙 요구하는 기능이 간단하다고 생각되서 플래시로 만들기는 했는데... 생각보다 만드는데 오래 걸린 탓에 정작 친구의 결혼식에는 써먹지 못했네요 ㅡㅡ;;;; 혹 나중에 쓸 일이 있을지 몰라서 정리해서 올려둡니다.

Show!.zip

다운로드

기능

구성

사용법

망고의 Image Slide Show 예

주의

Posted by 망고

요즘 신기한 일을 겪고 있다.
아내의 뱃속에 있는 아기가 바깥의 소리에 반응한다.
배에 대고 말을 걸면... 움직인다.
어쩔 때는 말하는 방향으로 발을 찬다(손으로 치는지, 머리로 받는지 알 수 없지만).
아빠를 알아보는(듣는)걸까?
놀랍고, 신기하고, @#@@#하다.
이런 기분인가 아빠가 된다는건.

Posted by 망고

Posted by 망고

Introduction

라운드 박스만들기를 주제로 마지막 포스팅입니다. 웹표준이 많이 지켜지게 되었다고는 하지만 아직도 여전히 특정 브라우저의 버그나 특성 때문에 특정 브라우저를 위한 코드가 필요합니다. 이런 코드를 hack이라고 하고 많은 전문가들이 상황에 맞는 hack을 권장하고 있습니다. 하지만, hack을 쓰다보니 CSS가 난해하고 지저분해지고 마는 상황을 피할 수 없네요. 아직 웹표준의 갈 길은 먼 것 같습니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - www.cssplay.co.uk
• 아직 조금 먼 미래

아직 조금 먼 미래 - Border-Radius

본 글에서 소개할 방법은 CSS2의 차기 버전 CSS3에서 지원하게 될 border-radius 속성을 이용한 방법입니다. 모든 방법을 통틀어 가장 깔끔한 방법일 것입니다. 어떤 블로거는 복잡한 라운드 박스 기술이 다 필요없다고 주장을 하더군요. 일단 박스를 봅시다.

'이게 뭐야. 라운드 박스가 아니잖아.'라고 하시는 분들 많으리라 생각합니다. 이 방법은 현재 지원하지 않는 브라우저가 많습니다. 현재 제가 사용하고 있는 파이어폭스2는 CSS3의 border-radius가 아닌 -moz-border-radius 속성을 지원합니다.

[HTML] 코드

[CSS] 코드

아- 깔끔합니다. HTML에는 데이터만 들어가고 Presentation은 CSS가 전담합니다. 코드를 이해하기 위해 머리쓰고 말고 할 것도 없습니다. 모든 브라우저가 border-radius 속성을 지원한다면 앞서 작성한 라운드 박스 기술들은 모두 쓰레기통행이겠지요. 하지만 그렇다고해서 '난 border-radius만 쓸꺼야'라고 할 수는 없는거죠. (실제로 그렇게 주장하는 사람도 있긴 하더군요. 내 사파리에선 제대로 보이니 난 괜찮아 라고 ㅡㅡ;;) 취미로 혼자 만드는거라면 또 모를까 업으로 삼고 있는 사람들이 이러긴 쉽지 않습니다. (그러고보니 전에 다니던 회사에선 IE에서 돌아가면 오케!였습니다.)

웹표준이 완벽하게 모든 브라우저에서 지원되지 않는 한 hack은 여전히 유효한 방법일 것 같습니다. 틀이 되는 다른 코드들과 분리해서 잘 관리하는게 현재로서 가능한 대안일테구요. 끝으로 방탄웹에서 소개된 바 있는 hack 관리에 관한 글 소개드립니다.

Integrated Web Design: Strategies for Long-Term CSS Hack Management

  웹 2.0을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

댄 씨더홈 지음, 박수만 옮김
의 저자인 댄 씨더홈이 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 '방탄웹'을 구축해 가는 과정을 설명한다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 해결책을 제시한다.

Posted by 망고

Introduction

네번째 Rounded Box입니다. 지난번 IE에서 박스 깨짐현상은 아직 해결못했습니다. 해결방법을 아시는 분은 답글 달아주시면 감사!
이번 박스는 인터넷에서 찾아낸 것입니다. www.cssplay.co.uk이란 곳이었는데 Stuart Nicholls라는 61세 할아버지가 운영하는 곳이더군요. 오... 나이드시고도 코드에 대한 열정을 갖고 계신 것이 참 보기 좋았습니다. 이 분이 만들어놓은 라운드 박스는 아예 이미지를 사용하지 않고 CSS만으로 구현되었습니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - www.cssplay.co.uk
• 아주 조금 먼 미래

유동폭 박스 - from www.cssplay.co.uk

일단 두말할 것 없이 생긴 것부터 보겠습니다.

이 방법은 박스의 위 아래로 높이 1px의 b 태그를 네 개씩 붙인후 b 태그의 margin값을 조정해서 마치 라운드 코너처럼 보이도록 만드는 방법입니다. 재미있는 방법이지요? 아이디어가 직관적이고 코드도 단순해서 이해하기 쉽습니다. 아쉬운 점이 있다면 HTML에 데이터와 관계없는 디자인 태그들이 들어간다는 것이겠지요. 더구나 b 태그란 건 의미상으로도 맞지 않구요 ㅡㅡ;;;

[HTML] 코드

[CSS] 코드

인터넷 상을 뒤져보면 수많은 CSS Rounded Box 테크닉이 있습니다. 어떤 것들은 웹표준의 철학을 지키려고 CSS가 지나치게 복잡하지는가 하면 어떤 것들은 HTML내에 태그를 심게해서 '이러면 기존 이미지를 찢어 붙일 때랑 뭐가 다른가' 싶은 방법도 있던데요. 정답은 없는 것 같습니다. 아! 인터넷에서 어떤 이가 이것이 정답이다 라고 주장하는 방법이 있더군요. 다음 글에서 다뤄보겠습니다. :)

Posted by 망고

Introduction

세번째 Rounded Box입니다. 지난번 고정폭 박스에 이어 이번에는 유동폭 박스를 만들어보겠습니다. 먼저, 방탄웹 책에 있는 라운드 박스입니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

유동폭 박스 - 방탄웹 방법

다음과 같은 모양의 박스입니다.

지난번처럼 2개의 이미지를 사용하는데 이번에는 상/하가 아닌 좌/우로 나눈 이미지를 사용합니다. 좌측 이미지는 라운드 코너를 표현할 수 있는만큼의 크기이고 바탕 이미지로 보여질 우측 이미지는 필요한 만큼 크게 디자인 합니다.

좌측 이미지(rBox3_bg_left.gif)

우측 이미지(rBox3_bg_right.gif)

고정폭이 하단 이미지를 바탕에 깔고 그 위에 상단 이미지를 덧씌웠듯이 이번에도 비슷하게 상단 우측을 바탕에 깔고 상단 좌측 이미지를 덧씌우고, 다시 하단 우측을 바탕에 깔고 하단 좌측 이미지를 덧씌우게 됩니다. 그러기 위해서 우측 이미지는 충분히 크게 만들어야 합니다. 설명이 조금 복잡한가요? 그림으로 보겠습니다.

유동폭 박스 레이아웃

이 방식으로 유동폭 라운드 박스를 만들기 위해서는 HTML 태그가 위와 비슷한 방식으로 코딩되어있어야 합니다. 가장 바깥으로 div 태그의 영역이 있고 그 안쪽으로 텍스트가 들어가는 p 태그의 영역이 있습니다. 여기까지가 상단 좌우측 라운드를 위한 태그입니다. 그리고 다시 하단 좌우측 라운드를 위한 div 태그가 있고 그 안쪽으로 p 태그의 영역이 있습니다. (방탄웹 책에는  div 태그를 쓰지 않고 em 태그에 display 속성값을 block으로 주는 방법을 사용하고 있습니다. 블록 엘리먼트가 아닌 태그를 블록처럼 사용하는 방법이죠. 자세한 내용은 책을 참고하시길)

먼저, 가장 바깥의 div영역에는 상단 우측 바탕 이미지가 깔립니다. 그리고 안쪽 p1의 영역에 상단 좌측 이미지를 덧씌웁니다. 여기까지면 상단 좌우측 라운드가 만들어집니다. 이어서 innerDiv의 영역에 하단 우측 바탕 이미지를 깔고, p2 태그에 하단 좌측 이미지를 덧씌웁니다. 네 모서리 완성!

[HTML] 코드

[CSS] 코드

이 방법으로 만들어진 라운드 박스는 폭과 높이가 모두 유동적입니다.

하지만, 이 방식의 라운드 박스는 비슷한 방식으로 만들어진 고정폭 박스와 마찬가지로 바탕을 이루게되는 우측 이미지의 크기를 벗어나면 박스가 깨진다는 것과 HTML코드에 태그 엘리먼트가 4개 이상 존재해야한다는 단점이 있습니다. 이보다 적은 태그가 존재할 경우 디자인을 위해 태그를 추가해야하는 경우가 생길 수 있는데, 이는 디자인과 컨텐츠를 분리하자는 웹표준의 철학에 위배됩니다. 그리고 태그에 맞추어 이미지를 지정하는 작업과 margin, padding을 주는 작업이 간단하지는 않습니다. 물론, 상황과 필요에 따라 기술은 응용해야하는 것이겠지만 단점과 장점은 분명히 알고 사용하는 것이 좋을 것 같습니다. 다음은 이미지를 사용하지 않음으로써 무한 확장이 가능한 유동폭 라운드 박스를 만들어보도록 하겠습니다.

PS) IE6로 보니 박스가 깨져보이는군요. 방탄웹은 무신 방탄웹이냐!고 하셔도 할말 없는 상황인데요. 파폭에서 제대로 보이는 것으로 보아 IE와 관련된 버그가 아닐까 생각됩니다. hack을 찾아보고 있는데 보고되어있는 방법들은 안먹는군요. 좀 더 공부를 해야겠습니다.

참고서적

  웹 2.0을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

댄 씨더홈 지음, 박수만 옮김
의 저자인 댄 씨더홈이 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 '방탄웹'을 구축해 가는 과정을 설명한다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 해결책을 제시한다.

Posted by 망고

두번째 Rounded Box입니다. 이번 글에서는 첫번째와 마찬가지로 폭은 고정되어있지만 높이 제한이 없는 박스를 만들어볼께요. 제 나름대로 생각해본 것이지만 너무 쉬운거라 다른 분들도 이미 쓰고 계신 방법이 아닐까 싶네요. 암튼 정리 차원에서 작성해보렵니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 망고의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

고정폭 박스 - 망고의 방법

생긴 것부터 보죠

박스의 생김새는 차이가 없습니다. 하지만 이번에는 background 이미지로 아래의 두 이미지를 사용합니다.

상단이미지(rBox2_bg_top.gif)

하단이미지(rBox2_bg_bottom.gif)

상단 이미지와 하단 이미지만을 사용하여 라운드를 구현하고 중간 부분은 background color를 동일한 값으로 일치시켜주었습니다. 위 아래 이미지만 있기 때문에 중간이 늘어나더라도 박스형태는 유지됩니다.

[HTML] 코드

[CSS] 코드

내용이 길어지더라도 하단 이미지를 교체해야하는 작업은 발생하지 않습니다. 하지만 클라이언트가 폭을 늘려달라고 하면 어쩌나요 ㅡㅡ;; 좀 더 방탄웹으로 가려면 폭도 유동적인 것이 좋겠죠? 다음 글에서 유동폭 라운드 박스를 만들어볼께요.

Posted by 망고

기존에 Rounded Box는 주로 Table 태그와 이미지를 이용해서 조각조각 이어맞추는 방법을 사용했었습니다. 하지만 이 방법은 몇가지 단점이 있었지요.

• HTML 태그내에 디자인을 위한 요소가 과다하게 사용됨으로써 데이터로서 HTML의 의미가 퇴색되고 따라서 확장성이 크게 떨어집니다. 파싱하기 또한 쉽지 않지요.
• 크기 변화에 유동적이지 못합니다. 글자를 크게 읽고 싶어도 그럴수가 없었죠.

최근에는 이러한 단점들을 보완하여 CSS를 사용한 Rounded Box 기술들이 쓰이더군요. 본 글에서는 최근에 읽었던 방탄웹의 기술과 더불어 몇가지 Rounded Box 기술들을 정리해보려고 합니다. 정리 순서는 다음과 같습니다. 항목 하나당 하나의 포스트로 작성하려고 합니다.

목차

• 고정폭 박스 - 방탄웹 방법
• 고정폭 박스 - 나름의 방법
• 유동폭 박스 - 방탄웹 방법
• 유동폭 박스 - 이외의 방법
• 아주 조금 먼 미래

고정폭 박스 - 방탄웹 방법

폭이 고정되어있는 라운드 박스입니다. 생긴 것은 아래와 같습니다.

박스의 폭이 고정된 상태에서 높이만 유동적으로 변화하는 박스입니다. 좌우가 고정된 다음의 상하 두 개의 이미지를 사용합니다. 원리는 div 태그의 background 속성에 긴 하단 이미지를 깔아준 다음 제목이 있는 H3 태그의 background 속성에 상단 이미지를 덧씌우는 것입니다. 박스가 길어지면 긴 하단 이미지가 더 보여지게 되고, 짧아지면 덜 보여지게 됩니다.

상단 이미지

하단 이미지

[HTML코드]

[CSS코드]

시험삼아 Ctrl키를 누른 상태에서 마우스 스크롤을 움직여보세요. 폰트 크기가 변화함에 따라 박스 크기가 함께 변화하는 것을 볼 수 있습니다.

이미 눈치채셨겠지만 이 방법으로 만든 박스는 하단 이미지의 높이만큼만 확장이 가능합니다. 더 길어지면 박스가 깨집니다. 그리고 이름대로 폭도 고정이 되어있죠. 다음은 높이가 무한대로 확장 가능한 고정폭 박스를 만들어보겠습니다.

참고서적

  웹 2.0을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

댄 씨더홈 지음, 박수만 옮김
의 저자인 댄 씨더홈이 유연성, 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항인 웹 표준 전략을 모두 갖춘 '방탄웹'을 구축해 가는 과정을 설명한다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 해결책을 제시한다.

Posted by 망고