탐색 모음은 테이블 셀 행 내에 배치된 그래픽 이미지로 구성됩니다. 표가 아닌 페이지 콘텐츠를 찾기 위해 표를 사용하는 것은 더 이상 권장되지 않으므로 웹을 만드는 많은 사람들은 구조화된 페이지 콘텐츠를 사용하는 (새로운) 방법을 찾고 있습니다.
내비게이션 바를 생성하기 위한 XHTML 마크업 및 CSS 형식입니다.
간단한 CSS 네비게이션 바
아마도 CSS 스타일 텍스트 탐색 모음을 만드는 가장 간단한 해결책은 예제 A와 같이 모든 링크를 한 줄의 텍스트에 배치하는 것입니다.
이 접근 방식은 합리적이고 직관적인 것 같습니다. 그러나 문제는 모든 링크를 한 줄의 텍스트에 넣으면 링크 사이와 링크 전후의 공백을 제어하기가 어렵다는 것입니다. 따라서 모든 링크가 함께 붐비지 않도록 하려면 다음을 수행하는 것이 좋습니다.
그 다음에는 일반적으로 파이프(수직 막대)와 개행이 아닌 공백 문자를 구분 기호로 삽입해야 합니다.
아래 코드에서 볼 수 있듯이 결과는 우리가 원하는 명확하고 구조화된 마크업이 아닙니다.
| 인용된 내용은 다음과 같습니다. |
목록 기반 CSS 탐색 모음 CSS 탐색 모음을 만드는 또 다른 방법은
언뜻 보기에 내비게이션 바에 정렬되지 않은 목록을 사용하는 것은 직관에 어긋나는 것처럼 보입니다. 왜냐하면 우리는 정렬되지 않은 목록을 각 항목 앞에 글머리 기호가 있는 수직으로 밀어 올려진 항목 목록으로 생각하는 데 익숙하기 때문입니다. 이는 탐색 모음의 가로 방향과 일치하지 않는 것 같습니다.
그러나 독립적인 목록 항목 모음인 목록의 논리적 구조는 탐색 모음의 링크에 적용될 수 있으며 CSS 규칙을 사용하면 목록 항목의 기본 표시를 강제로 재정의하고 글머리 기호를 제거하고 대신 페이지에서 목록 항목을 정렬할 수 있습니다. 아래의 플로트.
이를 알고 있으므로 이제 순서가 지정되지 않은 목록을 기반으로 CSS 스타일 및 XHTML 레이블이 지정된 탐색 모음을 생성하는 예제 B를 살펴보겠습니다.
XHTML 마크업은 다음과 같습니다.
| 인용된 내용은 다음과 같습니다.
|
다음은 텍스트 링크 목록을 탐색 모음으로 변환하는 CSS 코드입니다.
| 인용된 내용은 다음과 같습니다. div#navbar2 { |