CSS 탭은 탐색하기 쉬운 위치에 관련 정보를 표시하는 데 정말 좋습니다. 기본적으로 레시피 상자나 바인더에서 볼 수 있는 탭 구분선처럼 보입니다. 탐색 탭을 사용하는 웹사이트의 예:
이 두 사이트를 보면서 사이트에서 이러한 사용자 인터페이스 구성요소를 사용할 때의 이점에 대해 생각해 보십시오. 어떤 문제를 해결해야 합니까? 탐색 탭은 어떤 유형의 정보가 좋은 개발 작업입니까?
텍스트 또는 정보를 의미 있는 구성 요소로 구성하고 화면에 표시하지 않는 사용자 인터페이스의 트리에 도달해야 할 때 공간을 너무 많이 차지하면 탐색 탭이 현명한 선택입니다. JavaScript, jQuery 및/또는 Bootstrap을 사용하기 시작하면서 탐색 탭에 대해 더 자세히 이야기할 것이지만 순수한 HTML과 CSS만 필요로 하는 정식 작업도 있습니다. 구성을 살펴보겠습니다.
HTML 코드 구성:
프로젝트의 기본 컨테이너 역할을 할 본문 내부의 컨테이너로 표준 HTML을 구성합니다. . class 속성에서 원하는 대로 이름을 지정할 수 있지만 저는 class = "tabs"
로 이름을 지정하겠습니다. 지금까지 HTML 코드는 다음과 같아야 합니다.