HTML과 CSS를 이용하여 늘어나는 박스를 만들어 보았습니다. 원리를 간단히 설명 드리자면, 최대로 늘어나고자 하는 크기의 큰 이미지를 만들고 div 앨리먼트를 여러겹으로 겹쳐서 늘어나는 부분의 둥근 모서리가 들어나게 하는 방식 입니다. 말로 아무리 설명해봐야 이해가 잘 안되지요. 그렇다면 직접 한번 볼까요?


이렇게 두겹으로 마크업을 해주면 두 방향으로 늘어나는 것을 해결 할 수 있습니다. 예를 들어 "좌우" 나 "상하" 같은 두방향 말입니다. padding 을 이용하여 안에 있는 앨리먼트를 약간 밀어내어 모서리의 둥근 배경이 보이게 하는 방식입니다.


바깥쪽을 싸고 있는 div의 상단에 padding값을 주어 상단의 배경이 노출되게 하고 안쪽의 앨리먼트에 배경 이미지가 아래부터 시작하게 배치하면 위의 모서리와 아래의 모서리가 표현되게 됩니다. 그리 어렵지는 않죠?

좌우로 늘어나는 박스는 약간의 문제점이 있는데 display 속성이 inline 인 것은 컨턴츠에 따라 크기 조절이 가능하지만 height를 지정할 수가 없고, block 속성을 가지고 있는 것들은 기본적으로 100%를 차지하고 있어서 컨텐츠의 크기에 따라 width값을 조절할 수가 없습니다. 그래서 사용한 것이 float, 이 것을 사용하면 두가지 효과를 모두 낼 수 있지만 일반 앨리먼트처럼 사용하려면 조금은 까다롭겠죠?


이제 문제는 사방으로 늘어나는 박스 입니다. 좌우와 상하는 한쪽 고민하면 되지만 사방을 고려하면 머리가 아파집니다. 일단 사방의 모서리를 관리해야하기 때문에 앨리먼트를 4개를 사용하겠습니다. 사용할 수 있는 방법이 두가지가 있습니다.



자, 차이가 보이시나요? 두가이 마크업 방법이 있는데, 배경이미지를 다른곳에서도 함께 사용하여 온전한 큰 프레임 이미지 하나를 사용해야 한다면 첫번째 방법을 사용하면 되고, 그것이 아니고 이미지의 편집이 가능하다면 두번째 방법을 사용하여도 무방합니다. 직관적으로 보았을때 두번째 것이 덜 햇갈릴것으로 보입니다. 4개의 div가 순차적으로 싸고 있으니 조금은 이해가 편할듯 싶네요. 이렇게 마크업을 한다음에 CSS를 이용하여 늘어나는 박스를 만들어보면



코드를 보면 쉽게 이해가 될 것입니다. 두번째 방법에서 -24px를 사용한 이유는


이미지를 이렇게 넣었기 때문입니다. 모서리 한부분을 빼놓아 CSS sprite를 사용하여 배경이미지를 적용하였습니다. 여기 그림에서는 잘 보이지 않지만 상단과 좌측 부분은 투명하게 되어있습니다.




새 새창으로 열어서 창의 크기를 조절해보면 사방으로 늘어나는 박스를 체험해 보실 수 있습니다.

샘플페이 지 새창으로 열기

jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다.

jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다.

jQuery는 정말 좋은 라이브러리 같습니다. 위의 그림에서 볼 수 있듯이 작은 용랼으로 CSS3를 준수하고 크로스브라우징을 거의 완벽하게 구현해줍니다. CSS 스타일링을 비롯해 약간의 애니메이션까지 구현할 수 있으니 정말 금상첨화 입니다. 일단 이러한 jQuery를 사용하기 위에서는 문서상단에 이 라이브러리를 불러와야 하는데요. 물론 파일을 받아서 자신이 사용하고자 하는 서버에 올려 사용할 수도 있지만. CDN(Contents Delivery Network)이란게 있더라구요. 그래서 오늘은 jQuery CDN Host 에 대해 알아볼까 합니다.

1. jQuery CDN



jQuery 홈페이지에 공개된 것은 위의 두개이지만 이것저것을 입력해본 결과 다른 것들도 있었습니다.



위의 두개는 모두 같이 jquery-1.4.2.js 파일이 열립니다. 현재 최근것이 1.4.2라 그런 것 같습니다.


2. Google Ajax API CDN


Google Ajax CDN Documentation


3. Microsoft CDN


Microsoft Ajax CDN Documentation


이런것들을 이용하면 jQuery 라이브러리를 굳이 다운받아서 서버에 업로드 하지 않아도 코드 한줄로 jQuery를 사용 가능하게 할 수 있습니다. 또한 http://code.jquery.com/jquery.js 와 http://code.jquery.com/jquery-latest.js 와 같은 경우는 라이브러리가 업데이트 되더라도 새로운 버젼을 다시 받아서 업데이트 해주지 않아도 계속 최근의 라이브러리를 사용할 수 있게 됩니다.

참고이자 조금 신기한 사실은 jQuery 홈페이지에서는 Google API CDN 을 사용한다는 것. 참으로 이상하지 않을 수 없습니다.

아무튼 jQuery를 잘 사용하여 더 편리한 인터넷 세상을 만들어야겠습니다.