html, css로 만든 모바일버전 레이아웃, 제이쿼리 없음.

우선 결과물부터 보자. 오늘 만들어 볼 레이아웃이다. 탭과 그 안에 내용물들을 적는 레이아웃이다. 탭으로 분류를 나누고 해당 탭에 맞는 중제목을 배경을 넣고 그 하위에 소제목으로 체크박스를 넣어 또 분류하였다. 그 소제목을 설명하는 문장이고 있고, 그 설명하는 문장에 부가 설명을 하는 레이아웃이다. 글자를 억어지로 채워넣으려고 1도 이해가 안가는 설명을 하고 있는 중이다. 이제 뭐 더 설명 … Read more

jQuery 제이쿼리 버튼 클릭 시 원하는 구간으로 이동하기

많은 홈페이지에서 퀵메뉴나 top버튼을 눌러 원하는 곳까지 이동 하는 UI를 본 적이 있을 것이다. 나는 이것을 약간 리모컨의 역할과 같다고 본다. 요즘 같이 페이지의 길이가 길어지는 경우 다시 위로 올라기가 귀찮다. 그래서 이러한 UI가 생겨난 것 같다. 이러한 리모컨과 같은 UI를 앵커 버튼, 내비게이터 버튼 등 많은 이름으로 불리고 있다. 필자는 앵커 버튼이라 하겠다. 설명이 … Read more

jQuery 탭 메뉴 만들기 (탭메뉴 버튼세로버전)

사실 탭메뉴는 사실 내가 가장 어려워하고 귀찮아하는 UI이다. 그래서 이번 참에 정리를 해서 두고두고 사용하고자 한다. 우선 결과물이다. 아래는 html 코드이다.   <div class=”tab-container”>     <ul class=”tab-menu”>       <li><a href=”#tab1″ class=”active”>탭1</a></li>       <li><a href=”#tab2″>탭2</a></li>       <li><a href=”#tab3″>탭3</a></li>     </ul>     <div id=”tab1″ class=”tab-content active”>     … Read more