Tab UI (Front End)

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 14일 6. Tab UI 실습 - FE Tab UI를 만들기 위한 HTML과 CSS 구조 전략 상단 메뉴를 누르면 새로고침 없이 아래 내용이 변경되는 Tab UI가 자주 사용됨 방법 A: 메뉴 갯수만큼의 컨텐츠 요소를 만들고 각 요소의 display 속성을 block과 none으로 제어 방법 B: 메뉴 갯수와 상관없이 컨텐츠 요소 하나를 두고 그 안의 내용을 조절 예시 코드 실행 화면 Tab UI에 생명 불어넣기 AJAX 방식을 사용한 Tab UI 동작 제어: 메뉴를 클릭하면 해당하는 JSON 파일을 불러와 content 섹션에 표시하기 JSON 파일 JavaScript AJAX 코드 템플..

2020.04.14