wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 앵커 포인트
원본 출처 8 장 목록에 대해 다시 이야기합시다
이전의 첫 장에서, 우리는 목록을 표시하는 몇 가지 방법에 대해 논의했으며, <ul> 및 <li>로 무질서한 목록으로 표시하는 이점을 연구했습니다. 이 방법은 목록의 구조를 식별하고 모든 브라우저와 장치가 내용물을 올바르게 표시 할 수 있도록하고 CSS와 함께 다양한 스타일을 추가 할 수 있습니다.
다양한 환경에서는 개별 문제를 다룰 때 마킹 목록의 모든 관행을 작성하여 책 전체를 채우는 것이 어렵지 않습니다. 나는 책 전체를 채울 계획이지만, 무질서한 목록 외에 독립 장에서 다른 여러 목록 범주를 논의 할 계획입니다 . 목록을 사용하는 데 적합한 몇 가지 상황을 조사하십시오.
체크리스트는 페이지 구조를 구성하는 강력한 도구로, 각 독립 프로젝트에 의미를 추가하여 CSS의 나중에 독립 스타일을 추가 할 수 있습니다.
먼저 번호가 매겨진 프로젝트 목록과 그러한 목록을 표시하는 두 가지 방법을 살펴 보겠습니다. 어쩌면 어떤 방법이 더 유익한 지 알 수 있지만, 구조화 된 마킹의 중요성을 강조하고 올바른 도구를 사용하여 문제를 해결하기 위해이 예를 다시 자세히 설명하겠습니다. 번호가 매겨진 프로젝트 목록을 표시하는 가장 좋은 방법은 무엇입니까?
단계 목록을 표시 할 계획이라고 가정하고 각 프로젝트에는 이전에 숫자가 있으며이 목표를 달성 할 수있는 두 가지 다른 방법을 연구하고 특정 방법이 더 적용되는 이유를 설명합니다. 방법 A : 혼돈의 주문
<ul>
<li> 1. 양파를 자릅니다. </li>
<li> 2. 양파를 3 분 동안 볶습니다. </li>
<li> 3. 마늘 3 개를 추가하십시오. </li>
<li> 4. 더 3 분 동안 요리하십시오. </li>
<li> 5. 먹어. </li>
</ul>
이전 목록은 요리사에서 최악의 요리법 중 하나 일 수 있습니다. 그러나 간단한 예로 사용하는 것이 적절합니다. 약간의 소금과 계란을 추가하는 것이 더 좋을 수도 있습니다.
방법 A 우리는 1 장에서 언급 한 모든 이점을 얻기 위해이 단계를 변하지 않는 목록으로 표시하도록 선택합니다. 컨텐츠에 구조를 추가하고 대부분의 브라우저, 스크린 리더 및 기타 장치 가이 부분을 올바르게 처리 할 수 있으며 CSS를 사용하여 쉽게 스타일링 할 수 있음을 알고 있습니다. 하지만 ... 디지털 게임
이것은 번호가 매겨진 목록이므로 각 프로젝트 전에 숫자를 추가 한 다음 각 단계의 순서를 식별하기위한 기간이 이어 지지만 2 단계에서 3 단계 사이에 새로운 단계를 추가 해야하는 경우 어떻게해야합니까? 이제 새로운 단계 (수동으로) 후에 모든 항목을 회전해야합니다. 이 목록은 번거 로움이 아니지만 100 개의 항목 목록을 수정하는 경우 수정 프로세스가 매우 지루해집니다. 작은 도트 기호가 나타납니다
이 예제의 구조를 변정되지 않은 목록으로 표시하므로 각 번호가 매겨진 프로젝트 (그림 8-1)에 작은 점 기호가 표시됩니다. 작은 도트 기호를 좋아할 수 있습니다. 마음에 들지 않으면 물론 CSS를 통해 제거 할 수 있지만 CSS를 사용하지 않고이 목록을 탐색 할 때이 작은 도트 기호를 확실히 볼 수 있습니다.
그림 8-1, 브라우저 결과 CSS 읽기 방법 a
더 단순하고 의미 있고 유지 관리가 더 쉽습니다. 메소드 B 메소드 B : 순서 목록을 살펴 보겠습니다.
<ol>
<li> 양파를 자릅니다. </li>
<li> 양파를 3 분 동안 볶습니다. </li>
<li> 마늘 3 개를 추가하십시오. </li>
<li> 더 3 분 동안 요리하십시오. </li>
<li> 식사. </li>
</ol>
나는 이것이 대부분의 사람들이 선택한 것이라고 확신하지만, 이것이 우리가 방법 A를 사용하지 않는다는 의미는 아닙니다. <ol> 주문 목록을 사용하는 이유는 의미 적으로 올바른 요소를 사용하여 손의 문제를 해결합니다. 메소드 B에서 더 특별한 점은 무엇입니까? 자동 번호 매기기
어쩌면 각 목록 항목을 수동으로 번호를 매길 필요가 없다는 것을 알게 될 것입니다. <ol>를 사용할 때는 자동으로 숫자를 순서대로 생성합니다. 단계 목록에 100 개가 넘는 항목이 포함되어 있고 중간에 몇 가지 새로운 단계를 삽입 해야하는 경우 올바른 위치에 새 <li> 항목을 삽입하면 브라우저가 Magic과 마찬가지로 자동으로 다시 흡수됩니다.
메소드 A를 사용하는 경우 각 프로젝트를 삽입 할 때 모든 숫자를 수동으로 수정해야합니다. 더 흥미로운 일을 쉽게 생각할 수 있습니다 ...
그림 8-2에서, 각 단계 전에 자동으로 번호가 매겨진 브라우저 디스플레이 방법 B의 열한 번째 버전의 효과.
그림 8-2 브라우저 디스플레이 방법 B, 2 부의 행복한 효과
방법 B의 또 다른 장점은 긴 목록 항목이 고장날 때 생성 된 숫자 후에 들여 쓰기되고, 메소드 A는 숫자 아래로 접 힙니다 (그림 8-3).
그림 8-3 방법 A 및 메소드 B의 새로운 라인 효과 목록 비교
주문한 목록의 사전 설정 번호 매기기 스타일은 일반적으로 아랍어 숫자 (1,2,3,4,5 등)이지만 CSS의 목록 스타일 유형 속성을 사용하여 번호 스타일을 대체 할 수 있습니다. 목록 스타일 유형은 다음 중 하나에서 선택할 수 있습니다. 10 진수 : 1,2,3,4, ... (일반적으로 사전 설정 값) 상단 알파 : A, B, C, D ... 하단 알파 : A, B, C, D ... II, II, IV ... Lower-Roman : I, II, III, IV ... 없음 : NOUNUGNEN
예를 들어, 메소드 B가 수도 로마 번호를 생산하려는 경우 다음 CSS를 달성 할 수 있습니다.
ol li {
목록 스타일 유형 : 어퍼 로마;
}
그림 8-4는 브라우저 에서이 CSS와 메소드 B의 디스플레이 효과입니다. 우리의 단계 목록은 더 이상 아랍어 숫자를 사전 설정하지 않지만 로마 숫자로 대체됩니다. 물론, 표시된 부분은 여전히 동일합니다. 당신은 당신의 마음을 바꿨습니까? 약간의 변경 사항과 이전에 나열된 다른 스타일로 변경하면 목록의 번호 매기기 방법을 원하는 것으로 즉시 변경할 수 있습니다.
그림 8-4 로마 숫자로의 스위치 목록
HTML 유형 속성 : 이전에, 일부 사람들은 <OL> 태그에서 직접 유형 속성을 사용하여 목록의 번호 매기기 방법을 로마 숫자, 영어 문자 등으로 변경할 수 있습니다. 따라서 더 이상 유형 속성을 사용하지 않아야합니다. 대신 CSS를 사용해야합니다.
나중에 팁 확장 에서이 주문 목록을 CSS로 스타일링 할 것입니다. 그러나 이제 다른 목록 유형 예제를 살펴 보겠습니다.
이전 페이지 1 2 3 다음 페이지 전체 텍스트 읽기