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


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


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

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


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



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



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


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




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

샘플페이 지 새창으로 열기

jQuery를 사용하여 동적 메뉴를 만들어보았습니다. 나라디자인의 포스트를 참고하여 약간의 수정을 통해 제작하였습니다. 상위메뉴를 클릭하면 하위메뉴가 미끄러져 나옵니다. 이런 간단한 애니메이션이 제공되니 이제는 꼭 플래시를 사용하지 않아도 될 것 같다는 생각이 드네요.

아직은 완벽하지 않지만 사용하면서 약간 수정을 해준다면 정말 유용하게 쓰일 수 있을것 같네요.

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

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

location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있습니다. location 객체는 window 객체의 하위 객체지만 window 객첵를 생략하고 사용할 수 있습니다. 혹시 프레임을 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames 객체를 이용합니다.

기본형태는 이렇습니다.

location 객체의 속성

속성	설명
href	페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수도 있습니다.
protocol	: (콜론)을 포함하는 http 나 ftp 등의 프로토콜 정보를 반환합니다.
hostname	호스트의 이름과 포트번호를 반환합니다.
pathname	URL 경로부분의 정보를 반환합니다.
port	포트번호를 반환합니다.
search	? (물음표) 이후의 값을 불러옵니다. 파라미터
hash	지정한 앵커를 설정한 곳으로 이동하거나 앵커 이름을 반환합니다.

location 객체의 메소드

메소드	설명
reload()	Reflash 합니다.
replace()	현재 URL을 지정한 URL로 바꾸고 이전페이지로 돌아갈 수 없게 합니다.

간단한 사용예로 reflash 버튼을 만들어보면 이렇습니다.

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를 잘 사용하여 더 편리한 인터넷 세상을 만들어야겠습니다.

인터넷에서 서식을 작성하다 보면 인풋박스( <input type="text" /> )에 글을 쓸때, 한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다. (저만 그런건가?) 아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다. 사용자를 배려하는 웹사이트 ㄱㄱ 출발!!

아주 간단합니다. 인풋박스를 가리키는 스타일에 "ime-mode"라는 속성을 주면 되는데요. 아래의 표를 참고하면 되겠네요.

inactive	default 로 영문모드
active	default 로 한글모드
auto	한/영 중 선택된 모드
disable	영문만을 사용할 수 있는 모드

구체적인 사용방법은 이렇습니다.


이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이면 스타일 시트에 주는게 낫겠지요?


이렇게 사용하면 됩니다. "참~ 쉽죠잉~?" 그런데 매우 안타까운 점은 인터넷익스플로러에서만 되는 사실! 으악... 매우 서글프네요. 그래도 익스플로러를 대부분 사용하니 나름 다수의 사용자를 배려할 수 있겠지요? 아무튼 더 좋은 방법이 있다면 댓글이나 알려주시면 감사하겠습니다. ^^

작은 배려로 사용하기 더 편하게!

작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break

word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.



위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이 그림을 보시면 단번에 이해가 가실 것 입니다.


단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space

white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit	말그대로 상속 받는 것
normal	일반적인 것, default
nowrap	줄바꿈을 하지 않는다
pre	<pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line	마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap	pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.

jQuery를 이용하여 구성한 메뉴 <ul>태그를 이용하여 2 depth 까지 구성고, 탭키를 이용하여도 사용 가능하게 제작하였습니다. 2 depth 메뉴의 자세한 위치나 모양 등은 적용하는 사이트에 알맞게 customizing 하여 사용하면 되리리 생각됩니다. 메뉴의 구체적인 구조를 참고할 때 사용하면 좋을 것 같습니다.

탭을 이용하여 최근게시물을 카테고리 별로 출력해주는 것은 많은 사이트의 메인페이지에서 사용됩니다. 그래서 이번에는 jQuery를 이용하여 최근게시물을 작업해보았습니다. jQuery의 편리하 Selector를 이용하며 간당하게 구성하였습니다. <h3> 태그를 이용하여 카테고리의 타이틀을 표현했고 unordered list 를 이용하여 게시물을 출력하였습니다. 그리고 more 링크는 현재 표현되어 있는 게시판으로 이동하는 기능을 수행하도록 작업되었습니다.

jQuery를 이용하여 자주묻는질문(FAQ)를 동적으로 구성하여 보았습니다. 마크업을 할 때는 항상 어떤 앨리먼트로 마크업을 할까 하는 고민을 하게 되는데, 딱히 완벽한 정답은 없는 것 같습니다. 이번에는 definition list 를 사용해보았습니다. 의미를 따져보면 이런 의미인데 괜찮지 않을까요?


그렇게 해서 <dt>에 질문 <dd>에 답변 해서 마크업을 했습니다. 그리고 jQuery의 slideDown() 을 이용하여 보여지는 것을 나타냈습니다.



새창으로 보기