오랫만에 웹페이지 코딩을 할 일이 있었는데, 탭 내비게이션이 필요한 상황이라 html + css로 탭 내비게이션을 구현해보았습니다.
block 레벨 엘리먼트에 position 속성을 주게 될 경우 새로운 context가 시작되게 되므로 그 하위 엘리먼트에서 position: absolute를 사용할 경우 position을 속성을 지정해둔 상위 엘리먼트의 위치 기준으로 위치가 지정된다는 사실을 이용하는 방법입니다.
border만을 활용하다 보니 디자인 상으로 사소한 문제가 있지만 span 등을 활용할 경우 충분히 이쁘게 만들 수도 있을거라 생각합니다.
같은 name을 가지는 체크박스들 중 2개 이상이 선택되지 못하도록 만들기 위해 작성했던 스크립트인데, 혹시 필요하신 분이 있으실까 해서 올려봅니다.
function remain_two_obj(prefix){ this.old = new Array(); this.prefix = prefix; this.remain_two = function(cur){ items = document.getElementsByName(this.prefix + '[]'); for( i = 0, count = 0 ; i < items.length; i++ ) if( items[i].checked ) count++; if( count > 0 && cur.checked == false && this.old[0] == cur.value ) this.old[0] = this.old[1]; if( cur.checked == false ) return; if( count < 2 ) this.old[count] = cur.value; else { this.old[0] = this.old[1]; this.old[1] = cur.value; items = document.getElementsByName(this.prefix + '[]'); for( j = 0 ; j < items.length ; j++ ){ if( items[j].value != this.old[0] && items[j].value != this.old[1] ) items[j].checked = false; } } } } var cbox = new remain_two_obj('cbox'); |
필요한 개수만큼 remain_two_obj 를 선언하고 name prefix를 등록해주면 됩니다. 그런 체크 박스들에 onclick 이벤트를 등록해주면 끝!
<ul> <li><label><input type="checkbox" name="cbox[]" value="0" onclick="cbox.remain_two(this)" /> 0</label></li> <li><label><input type="checkbox" name="cbox[]" value="1" onclick="cbox.remain_two(this)" /> 1</label></li> <li><label><input type="checkbox" name="cbox[]" value="2" onclick="cbox.remain_two(this)" /> 2</label></li> <li><label><input type="checkbox" name="cbox[]" value="3" onclick="cbox.remain_two(this)" /> 3</label></li> <li><label><input type="checkbox" name="cbox[]" value="4" onclick="cbox.remain_two(this)" /> 4</label></li> <li><label><input type="checkbox" name="cbox[]" value="5" onclick="cbox.remain_two(this)" /> 5</label></li> <li><label><input type="checkbox" name="cbox[]" value="6" onclick="cbox.remain_two(this)" /> 6<label></li> <li><label><input type="checkbox" name="cbox[]" value="7" onclick="cbox.remain_two(this)" /> 7</label></li> </ul> |
쓰기 편하게 만드려고, class 화 해봤는데 참 개념이 독특하네요 자바스크립트는 -_-! function 으로 object를 만들어야 한다니…
This entry was posted by 정태영 on Monday, June 1st, 2009 at 8:33 PM and is taged under checkbox, css, html, input, javascript.
아래와 같은 html 이 있을 경우 ‘first h2 in first h1′ 앞에는 1.1 이 아닌 1이라는 번호가 출력되게 됩니다.
<ol> <li> <h1>first h1</h1> <ol> <li><h2>first h2 in first h1</h2></li> <li><h2>second h2 in first h1</h2></li> </ol> </li> <li> <h1>second h1</h1> <ol> <li><h2>first h2 in second h1</h2></li> <li><h2>second h2 in second h1</h2></li> </ol> </li> </ol> |
하지만 요청에 의해 ‘1. first h2 in first h1′ 이 아닌 ‘1.1. first h2 in first h1′ 식의 출력이 필요하게 되었는데, css의 generated content와 counter는 일부 브라우져에서 밖에 지원하지 않는다는 제약이 있습니다.[1]
당연히 이를 위한 스크립트가 있을 줄 알았는데, 제 검색 능력 부족인지 검색이 잘 안되네요. 아쉬운 사람이 우물을 판다고 간단한 스크립트를 작성해보았습니다.
function multilevellist(){ items = document.getElementsByTagName('li'); var h2 = 0; var h3, h4; for( i = 0 ; i < items.length ; i++ ){ if( items[i].parentNode.tagName == 'ul' || items[i].parentNode.tagName == 'UL' ) continue; childs = items[i].childNodes; for( j = 0 ; j < childs.length ; j++ ){ if( childs[j].tagName == 'H2' || childs[j].tagName == 'h2' ){ h2++; childs[j].innerText = h2 + '. ' + childs[j].innerText; h3 = 0; } if( childs[j].tagName == 'H3' || childs[j].tagName == 'h3' ){ if( h2 < 2 ) continue; h3++; childs[j].innerText = h2 + '.' + h3 + '. ' + childs[j].innerText; h4 = 0; } if( childs[j].tagName == 'H4' || childs[j].tagName == 'h4' ){ h4++; childs[j].innerText = h2 + '.' + h3 + '.' + h4 + '. ' + childs[j].innerText; h5 = 0; } } } } |
Ordered List 안에 있는 h1, h2, h3, h4 에 대해 1, 1.1, 1.1.1, 1.1.1.1 식으로 번호를 메겨주는 역할을 하는 스크립트이며 body의 onload 이벤트에 multilevellist() 함수를 연결해주기만 하면 알아서 작동합니다.
오늘의 삽질 끝!!
덧: 보니까 parentElement가 IE에선 동작하질 않네요. parentNode로 대체 했습니다.
This entry was posted by 정태영 on Friday, May 29th, 2009 at 5:29 PM and is taged under automatic, css, element, heading, html, javascript, list, multi-level, numbering.
요번에 위키북스를 통해 출판된 ‘CSS 완벽 가이드‘의 경우 Eric. A. Meyer의 책을 남덕현님, 이준님, 연홍석님 그리고 저 이렇게 네 분이서 공동 번역을 하였습니다. (써놓고 보니 가나다라 순은 아니군요.)
그런데 온라인 쇼핑몰마다, 그리고 포털의 책 소개 페이지마다 역자는 전부 다르게 표기되어 있습니다. 아래는 ABCD순서로 본 각 쇼핑몰의 역자 표기입니다.
This entry was posted by 정태영 on Saturday, March 14th, 2009 at 1:41 PM and is taged under Book, css, css definitive guide, css 완벽 가이드, publication, standard, translation, uncompatible, web, 소개, 역자.