멋진 CSS 전용 아코디언을 만드는 4 가지 방법
콘텐츠 아코디언은 유용한 디자인 패턴을 만듭니다. 메뉴, 목록, 이미지, 기사 발췌문, 텍스트 미리보기 및 비디오의 경우 여러 가지 용도로 사용할 수 있습니다.
밖에있는 대부분의 아코디언은 자바 스크립트, 주로 jQuery에, 고급 CSS3 기술의 사용이 널리 보급 된 이후로 HTML과 CSS 만 사용하십시오., 자바 스크립트가 비활성화 된 환경에서 이들을 액세스 가능하게합니다..
CSS 전용 아코디언을 만드는 것은 까다로운 작업이 될 수 있으므로이 게시물에서는 개발자가 하나를 만들 필요가있을 때 사용하는 주요 개념 이해.
CSS 전용 탭을 만들 때 일반적으로 두 가지 주요 접근법이 있으며 각각 두 가지 자주 사용 사례가 있습니다. 첫 번째 방법은 숨겨진 양식 요소, 두 번째 것은 CSS 의사 선택기.
1. 라디오 버튼 방법
라디오 단추 메서드는 숨겨진 라디오 입력 및 해당 레이블 태그를 아코디언의 각 탭에 추가합니다. 논리는 간단합니다. 사용자가 탭을 선택하면 기본적으로 양식에 입력 할 때와 마찬가지로 탭에 속한 라디오 버튼을 선택합니다. 아코디언에서 다음 탭을 클릭하면 다음 라디오 버튼 등을 선택합니다..
이 방법에서, 하나의 탭만 열 수 있습니다. 동시에. HTML의 논리는 다음과 같습니다.
콘텐츠 제목 (여기에 h1 태그 사용 안함)
일부 콘텐츠 ...
p>
너는 ~해야 해. 각 탭에 대해 별도의 라디오 라벨 쌍 추가 아코디언에. HTML만으로는 원하는 동작을 제공 할 수 없으며 적절한 CSS 규칙을 추가해야합니다..
높이 고정 세로 탭
이 솔루션 (아래 스크린 샷 참조)에서 개발자는 표시 : 없음; 규칙을 사용하면 각 탭의 제목을 포함하는 레이블 태그에 상대적 위치를 지정하고 해당 탭의 절대 위치를 지정합니다 label : after 의사 요소.
후자는 탭을 여는 녹색 + 기호로 표시된 핸들을 유지합니다. 닫힌 탭은 또한 녹색으로 표시된 핸들을 사용합니다 “-” 표지판. CSS에서 닫힌 탭은 요소 + 요소 선택기의 도움으로 선택됩니다..
열린 탭의 내용에 고정 된 높이를 지정해야합니다. 이렇게하려면 element1 ~ element2 CSS selector의 도움으로 열려있는 탭 본문 (위 HTML에서 tab-content 클래스로 표시됨)을 선택하십시오..
CSS의 기본 논리는 다음과 같습니다.
입력 [type = 라디오] display : none; label 위치 : 상대적; 디스플레이 : 블록; label : after content : "+"; 위치 : 절대; 오른쪽 : 1em; 입력 : checked + label : after content : "-"; input : checked ~ .tab-content height : 150px;
Codepen에서 전체 CSS를 살펴볼 수 있습니다. CSS는 원래 Sass에 쓰여졌지만, “컴파일 된보기” 버튼을 클릭하면 컴파일 된 CSS 파일을 볼 수 있습니다..
라디오 버튼이있는 이미지 아코디언
이 아름다운 이미지 아코디언은 동일한 라디오 버튼 방식을 사용하지만 레이블 대신 개발자가 여기에 있습니다. figcaption HTML 태그 사용 아코디언 동작을 달성하기 위해.
CSS는 약간 다른데, 그 이유는 주로이 경우 탭이 세로로 놓여 있지 않고 가로로 배치되기 때문입니다. 개발자는 덮어 쓴 이미지의 가장자리가 여전히 보이도록하기 위해 요소 + 요소 CSS 선택기 (이전 사례에서 토글을 선택하는 데 사용됨)를 사용했습니다..
이 우아한 CSS 전용 아코디언을 만드는 방법에 대한 자세한 가이드를 읽어보십시오..
2. 체크 박스 방법
확인란 메서드는 라디오 버튼 대신 체크 상자 입력 유형을 사용합니다. 사용자가 탭을 선택하면 기본적으로 해당 확인란을 선택합니다..
라디오 버튼 방식과 다른 점은 같은 시간에 여러 탭을 열 수 있음, 양식 내에서 하나 이상의 체크 박스를 검사하는 것처럼.
반면에 사용자가 다른 탭을 클릭하면 탭이 스스로 닫히지 않습니다. HTML의 논리는 이전과 동일합니다.이 경우 입력 유형에 체크 박스를 사용해야합니다..
콘텐츠 제목 (여기에 h1 태그 사용 안함)
일부 콘텐츠 ...
p>
고정 높이 확인란 아코디언
고정 된 높이의 내용 탭이 필요한 경우 CSS의 논리는 라디오 버튼의 경우와 거의 동일합니다. 입력 유형이 라디오에서 체크 박스로 변경된 것입니다. 이 Codepen 펜에서는 코드를 살펴볼 수 있습니다..
유체 높이 확인란 아코디언
둘 이상의 탭을 동시에 열 때 고정 높이 탭을 표시하면 아코디언 높이가 크게 늘어날 수 있으므로 사용자 경험에 부정적인 영향을 줄 수 있습니다. 당신이 고정 된 높이를 유체 높이로 변경; 즉 열려있는 탭의 높이가 보유하고있는 내용의 크기에 따라 확장되거나 축소됩니다..
그렇게하려면 탭 내용의 고정 높이를 최대 높이로 수정, 과 상대 단위를 활용하다:
입력 : 체크 된 ~ .tab-content max-height : 50em;
이 방법이 어떻게 작동하는지 더 잘 이해하려면이 Codepen을 살펴보십시오..
3. the : target 메서드
: target은 CSS3의 의사 선택자 중 하나입니다. 다음과 같은 방법으로 HTML 요소를 앵커 태그에 연결할 수 있습니다.
탭 제목
탭 내용
사용자가 탭의 제목을 클릭하면 전체 섹션이 열립니다. :목표 pseudo-selector로 설정되며 URL도 다음 형식으로 변경됩니다. www.some-url.com/#tab-1.
열린 탭은 CSS로 스타일을 지정할 수 있습니다. 섹션 : target ... 규칙. 여기에 hongkiat에 대한 훌륭한 튜토리얼이 있습니다.이 튜토리얼에서는 멋진 CSS 전용 아코디언을 :목표 수직 및 수평 레이아웃에서의 메소드.
그 주요 단점은 :목표 방법은 사용자가 탭을 클릭하면 URL이 변경됩니다.. 이것은 브라우저 기록에 영향을 미치며 브라우저의 뒤로 버튼은 사용자를 이전 페이지로 이동시키지 않고 아코디언의 이전 상태로 가져옵니다.
4. the : hover 메소드
이 후자의 단점은 우리가 : 마우스 오버 CSS 의사 선택기 대신 :목표, 그러나이 경우 탭은 클릭이 아니라 호버 이벤트에 반응합니다. 트릭은 여기에 필요한 것입니다. 발견되지 않은 요소를 감추거나, 또는 너비 나 높이를 줄이십시오. - 탭 레이아웃에 따라
아코디언을 작동 시키려면 호안 요소를 가시화하거나 전체 너비 / 높이로 설정해야합니다..
다음의 3 가지 CSS 전용 아코디언은 모두 : 호버 (hover) 방법으로 제작되었으며 스크린 샷 아래의 링크를 클릭하면 코드를 볼 수 있습니다.
수평 이미지 아코디언
비뚤어진 아코디언
기본 상태의 호버 작동 아코디언
