티스토리 뷰
1) Tab UI를 만들기 위한 HTML과 CSS 구조전략
Tab UI에는 왼쪽 위에 햄버거 버튼이 있고 그 옆으로 여러 메뉴가 있는 경우가 흔합니다. 그리고 메뉴를 누르면 하단의 내용이 통째로 바뀝니다. 하단의 내용은 텍스트로만 이루어져 있는 경우도 있고 텍스트 이외에 다른 컨텐츠들이 있는 경우도 있습니다. 여기서는 텍스트로 화면만 구성해보겠습니다.
우리가 자주 보는 Tab UI 형태
- 상단 메뉴를 누를 때마다, 새로 고침 없이 아래 내용이 변경되는 경우가 있을 것 같습니다.
실습코드
|
<!DOCTYPE html> <html> <header> <style> h2 { text-align: center; } h2, h4 { margin: 0px; } .tab { width:600px; margin: 0px auto; } .tabmenu { background-color: bisque; } .tabmenu > div { display: inline-block; /* 가로로 배치하기 위함 */ width:146px; text-align:center; height: 50px; line-height: 50px; cursor: pointer; } .content { background-color: antiquewhite; padding: 5%; } </style> </header> <body> <h2>TAB UI TEST</h2> <div class="tab"> <div class="tabmenu"> <div>crong</div> <div>jk</div> <div>pobi</div> <div>honux</div> </div> <section class="content"> <h4>hello jk</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequuntur perspiciatis mollitia nesciunt at aliquam quo dolore necessitatibus maxime nam assumenda, veritatis animi doloribus molestiae vero provident atque. Porro, ex. </p> </section> </div> </body> </html> |
 |
- Tab UI 구성에는 다양한 방법이 있습니다. 하단의 콘텐츠 본문 영역을 4개를 두고 display를 block과 none을 왔다 갔다 하면서 교차하면서 해결할 수도 있는 방법이 있고, 콘텐츠 하나를 두고 그 안에 있는 내용들을 ajax로 계속 바꿔주는 방법도 있습니다. 알맞은 방법을 쓰는게 좋은 전략일 것 같습니다.
생각해보기
- 여러 가지 Tab UI로 동작하는 웹사이트를 찾아보고, 그 구현방법을 상상해보세요. Tab UI에 필요한 간단한 HTML, CSS를 구현합니다. 이쁘지 않아도 된답니다.
- 그리고 나서 인터랙션(동작)을 모두 정의해보세요. 그렇게 동작하기 위한 JavaScript의 순서가 어떨지 고민해봅니다.
'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글
| 7. Spring Core - BE (1) (0) | 2019.08.03 |
|---|---|
| 6. Tab UI 실습 - FE (2) (0) | 2019.08.03 |
| 5. WEB UI - FE (5) (0) | 2019.08.03 |
| 5. WEB UI - FE (4) (0) | 2019.08.03 |
| 5. WEB UI - FE (3) (0) | 2019.08.03 |