MangoLog

Dell M1330을 받고 비스타에서 XP로 새로 설치하다가 AHCI설정 때문에 조금 애를 먹었다.
델 웹싸이트의 스펙에는 Storage Controller에 대한 설명이 자세하지 않았기 때문에 어떤 드라이버를 설치해야하는지 알 수 없었다. Storage Controller 항목에 Serial ATA라니 어쩌라고~! 다행히 구글의 도움을 받아 간신히 설정완료.

간단히 말해서 Dell M1330이 사용하는 Storage Controller는 다음과 같다.

가지고 있는 XP시디에 AHCI 드라이버가 포함되어있다면 가장 해피한 케이스. 하지만 AHCI가 XP 이후에 나온 기술이기 때문에 기존 XP시디로는 AHCI 모드로 Storage Controller를 셋팅할 수 없는 경우가 많다. 이런 경우에는 XP를 기존 ATA모드로 설치한 다음 AHCI로 모드변경을 해줄 수 있다. 모드 변경방법은 다음과 같다.

필요한 것
Intel Matrix Storage Manager

방법
1. BIOS의 Storage Controller 셋팅을 ATA로 하고 XP를 설치한다.
2. XP설치를 완료한 다음, Intel Matrix Storage Manager를 다운받아 압축을 푼다.
3. 장치관리자의 IDE ATA/ATAPI 컨트롤러 항목으로 간다.
4. <<Intel ICH8M 3-port SATA Controller - 2828>>가 설치되어있을 것이다. 마우스 오른쪽 클릭하고 드라이버 업데이트로 간다.
5. 하드웨어 업데이트 마법사가 시작된다. <<아니오, 지금 연결 안 함>>에 체크하고 다음 버튼을 클릭한다.
6. <<목록 또는 특정 위치에서 설치(고급)>>에 체크하고 다음 버튼을 클릭한다.
7. <<검색 안 함. 설치할 드라이버를 직접 선택>>에 체크하고 다음 버튼을 클릭한다.
8. 설치할 하드웨어 장치 드라이버를 선택하는 화면이 나온다. <<디스크 있음>> 버튼을 클릭한다.
9. Intel Matrix Storage Manager가 있는 폴더로 가서 iaahci.inf 화일을 선택한다.
10. 목록 리스트에서  <<Intel(R) 82801HEM/HBM SATA AHCI Controller>>를 선택한다.
11. 드라이버가 설치완료된 후 재부팅하여 BIOS Storage Controller 셋팅을 AHCI로 변경한다. (주의! BIOS를 ATA로 그대로 두고 부팅할시 블루스크린이 뜨면서 무한 재부팅 모드가 된다.)

참고
http://forum.notebookreview.com/showthread.php?t=164159
위키피디아 AHCI
Intel Matrix Storage Manager 다운로드

집에 내려온김에 아버지 컴을 업그레이드 해드렸습니다.
기존에 쓰시던 펜4 2.0G, 256MB에서 코어2듀오 E4600 2.4G, 1G로 올려드리는데
30만원정도 들었네요. 음... 들인 비용에 비해 체감효과가 매우 큽니다. 제 컴보다 좋네요.
부품 고르는데 도움준 강군에게 심심한 감사를 표합니다. (애즈락 메인보드 잘 돌아간다 ㅎ)

업글하고나니 휭휭 날아다니는군요. 부팅시간도 짧아지고 특히 이미지 편집을 많이 하는 저로선 어도비 라이트룸 구동시간이 무척 짧아진 것이 인상적이었습니다.

어쨌거나, 세팅할때 약간의 문제가 발생했었는데 구글신께 도움을 받아 해결했습니다. 혹시나 같은 에러로 어려움을 겪고 계실 분들을 위해 흔적을 남깁니다.

문제 : Realtec High Definition Audio Driver가 제대로 설치되지 않는 문제
증상 : 장치관리자에서 Realtec HD Audio가 알수없는 장치라고 표시되고, 재설치도 삭제도 안되는 상황
Error Code : 0xe0000227

해결책
1. 알수없는 장치를 disable시키고
2. 장치관리자>시스템 장치>Microsoft UAA Bus Driver for High Definition Audio를 삭제한다.
3. 하드웨어 변경사항 재검색한 후
4. 드라이버를 지정하여 다시 설치한다.

참고싸이트
http://vip.asus.com/forum/view.aspx?boa ··· %3Den-us

Horowitz의 C로 쓴 자료구조론을 보고 있슴다.
그중 퀵소트와 관련해서 미궁에 빠졌네요.
책의 336페이지에 보면 퀵소트를 아래와 같이 구현해놓았어요.

void quicksort(element list[], int left, int right)
{
    int pivot, i, j;
    element temp;
    if( left < right ) {
        i = left, j = right + 1;
        pivot = left[left].key;
        do {
            do {
                i++;
            } while (list[i].key < pivot);
            do {
                j--;
            } while (list[j].key > pivot);
            if( i < j )
                SWAP(list[i], list[j], temp);
        } while ( i < j );
        SWAP(list[left],list[j],temp);
        quicksort(list, left, j-1);
        quicksort(list, j+1, right);
    }
}

여기서 질문.
7~9줄에 i가 list배열의 index를 벗어나지 않는다는 걸 어떻게 보장하죠??
예를 들어 pivot 값이 배열에서 가장 큰 값이라고 가정하면
9라인의 while(list[i].key < pivot)은 언제나 true이므로
i는 계속해서 커지다가 list배열의 인덱스 바깥으로 튀어나가 에러를 만들지 않을까요??

책의 오른쪽 여백에 예전에 보면서 끼적거려놓은게 있는데 "pivot값이 최대값이면 어떻하지?"라고 되어있습니다. 그래서 어쩌라고 ㅡㅜ 과거의 내가 미래의 나에게 숙제를 던지는 아햏햏한 시츄에이션이어요.

태터캠프 다녀왔습니다. 스탭으로 신청해두었었는데 오전에 불어수업을 듣느라 늦게 가는 바람에 별로 도와드리지도 못했네요. 죄송 ㅡㅡ;

행사는 예정대로 NeedlWorks/TNF, Tistory, TNC의 순서로 발표가 있고나서 테크니컬 세션과 태터앤미디어, 레몬펜에 대한 스몰 세션으로 나누어졌습니다. 전 발표를 듣고 테크니컬 세션으로 이동했네요. 지난 캠프와 달리 이번엔 여성유저들도 많이 참여했고 테크니컬 세션 참여자가 너무 적은 관계로 테크니컬 세션은 바깥 소파에서 진행해야했습니다. ㅡㅜ

니들웍스/TNF는 리더이신 신정규님이 발표를 담당하셨고, 텍스트큐브 1.6의 변화와 앞으로 할 일들에 대해서 설명하셨습니다. 텍스트뷰브1.6 릴리즈가 거의 다 되어간다고 하는군요. 화이팅!

그리고 Tistory 서비스에 대해서 다음 커뮤니케이션에서 발표하셨습니다. 다음에서 제공할 수 있는 장점들을 결합해서 새로운 기능들을 추가하신 것 같더군요. 일반 사용자를 대상으로 하는 서비스이기 때문에 UX에 가장 중점을 두고 작업을 진행하시는 것 같았습니다.

마지막으로 TNC 세션은 TNC 공동대표이신 김창원님이 발표하셨습니다. 텍스트큐브와 티스토리 이외에 TNC에서 새로운 블로깅 서비스를 준비중이라시며, 블로깅 툴이 여러개 존재할 수 있는 근거를 차에 비유해서 설명하셨습니다. 스포츠카도 있고 RV도 있듯이 같은 블로깅 서비스라도 접근방법이 다를 수 있다는거죠. 그중 TNC에서 제공할 수 있는 "차별성"은 "소셜"이라는 단어로 정의할 수 있을 것 같습니다. 기존의 블로깅 툴들이 Personal Media에 그친 반면, 이제 블로깅 툴이 Social Media로 진화해야한다는 것이 요지였던 것 같습니다. 개인적으로는 TNC의 소셜한 마인드가 마음에 들었습니다. 제가 고민하고 있는 Blog as a online identity 라는 부분을 많이 고민하고 있는 것 같습니다.

위 세가지 발표를 들으면서 약간의 의구심이 들었습니다. 과연 블로깅툴이라는 영역 내에서 이렇게 다양한 서비스가 존재할 필요가 있을까 하구요... 더구나 이젠 개발팀이 거의 분리된 상황이여서 기존의 데이터 호환성에도 의문을 제기하지 않을 수 없네요. (이 질문에 대해서는 공식적으로 데이터 호환성을 계속 가져가겠다고 답변하셨었습니다.)

TNF, TNC, 다음. 세 조직이 프로젝트를 하나로 가져가면 어떨까 하는 생각을 해보았습니다. 설치형 블로그 태터툴즈를 엔진으로 서비스형 블로그 티스토리가 시작되었듯이 상호간에 긴밀한 협조가 계속 이루어졌으면 좋겠습니다.

TNF리더 정규님 말씀대로 다양성은 진화의 핵심이죠. 가장 핵심적인 데이터 호환성이라는 것만 지켜진다면 태터툴즈의 다양성은 사용자 경험의 진화를 가져올 것이라 생각합니다. 블로그가 그 이상의 다른 것으로 진화해갈 것인지 기대가 큽니다.

테크니컬 세션에서는 준비된 내용이 없었던지라(ㅡㅡ;;) 모이신 분들이 인사나누고 평소에 궁금했던 질문과 답변 그리고 텍스트큐브에 대한 잡답이 이어졌습니다. 레몬펜과 태터앤미디어 발표는 테크니컬 세션에 참석하느라 듣지 못했습니다.

준비하시느라 수고하신 니들웍스/TNF 여러분 수고하셨습니다. 다음번에 또 뵈어요^^

끝으로 사진 하나.

망고의 플래시 슬라이드 쇼

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

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

기능

무지하게 간단합니다. show.swf를 실행하면 images.xml화일을 읽어서 ./images 폴더에 있는 이미지를 랜덤하게 디스플레이 합니다. 페이드인, 페이드아웃에 간단한 줌밍 기능을 구현해 봤습니다.

구성

show.fla : flash 소스 show.swf : 슬라이드 쇼 화일
images.xml : 이미지화일 리스트
./images : 이미지 화일이 들어있는 폴더

사용법

슬라이드쇼에 사용할 이미지를 하위폴더 images에 넣습니다.
상위폴더에 images.xml 문서를 작성합니다.
xml 문서를 보시면 어떤 형식으로 작성해야하는지 쉽게 알 수 있습니다.
(혹 관심있어할지 모를 분들을 위해 모든 상황에서 동작한다고 보장할 수 "없는" images.xml generator를 함께 올려둡니다.ㅡㅡ;;)
show.swf를 실행합니다.

망고의 Image Slide Show 예

주의

온라인용으로 사용해보니 트래픽 때문인지 문제가 있네요. StandAlone용으로만 사용해야겠습니다.

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을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

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

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내에 태그를 심게해서 '이러면 기존 이미지를 찢어 붙일 때랑 뭐가 다른가' 싶은 방법도 있던데요. 정답은 없는 것 같습니다. 아! 인터넷에서 어떤 이가 이것이 정답이다 라고 주장하는 방법이 있더군요. 다음 글에서 다뤄보겠습니다. :)

Introduction

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

목차

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

유동폭 박스 - 방탄웹 방법

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

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

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

이 방식으로 유동폭 라운드 박스를 만들기 위해서는 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을 이끄는 방탄웹 - 크리에이티브한 웹 표준 기법과 제작 사례  

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

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

목차

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

고정폭 박스 - 망고의 방법

생긴 것부터 보죠

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

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

[HTML] 코드

[CSS] 코드

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

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

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

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

목차

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

고정폭 박스 - 방탄웹 방법

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

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

[HTML코드]

[CSS코드]

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

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

참고서적

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

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