마크업 언어 - List_HTML/Xhtml_웹페이지 제작

표준화된 디자인 솔루션 - 마크업 언어 및 스타일 매뉴얼

웹 표준 솔루션 마크업 및 스타일 핸드북
1부: 마크업 살펴보기 마크업 구문부터 시작해 보겠습니다.
1장 체크리스트
체크리스트는 웹의 거의 모든 페이지에서 찾을 수 있습니다. 하이퍼링크 목록, 장바구니 항목 목록, 좋아하는 영화 목록...어떤 사람들에게는 목록을 만드는 것이 임의적인 것처럼 보일 수도 있지만 우리가 살펴볼 내용은 다음과 같습니다. 목록과 컬렉션을 만드는 몇 가지 일반적인 방법에는 장단점이 있습니다. 나중에 공통 목록을 장점과 단점으로 장식하는 방법에 대한 몇 가지 예를 나열하겠습니다.
쇼핑하러 가자
처음에는 이 장의 예시로 세탁물 목록을 사용할 계획이었지만, 곧 그러한 목록에 어떤 항목이 포함되어야 할지 전혀 몰랐다는 것을 깨달았습니다. 예를 들어, 음식을 예로 들어보겠습니다!
웹사이트에 음식 목록을 올려야 하는 경우를 가정해 보겠습니다. 웹사이트에 음식 목록을 올려야 하는 이유가 무엇인지 혼란스러울 수도 있습니다. 목록에 대해 생각하기 시작하세요...
페이지에서 목록을 다음과 같이 만들고 싶다고 가정해 보겠습니다. 음, 목록과 같습니다. 각 항목이 한 줄에 하나씩 있는 긴 세로 목록입니다.
Apples
Spaghetti
Green Beans
우유
매우 단순해 보이지 않나요? 페이지 디자인 및 개발의 여러 측면과 유사하지만 다양한 방법을 통해 동일한(또는 유사한) 효과를 얻을 수 있습니다. 이 책의 뒷부분에 나오는 모든 예와 마찬가지로, 나는 eXtensilble을 사용할 것이다 XHTML(HyperText Markup Language) 관점에서 모든 예제를 표시하고 선택한 방법이 World Wild에 따라 올바른 마크업 구문을 사용하는지 확인하세요. W3C(Web Consortium)에서 개발한 다양한 표준
각 항목 뒤에
태그가 완료되었거나 다양한 목록 항목 태그를 사용하여 작업을 완료할 수 있습니다. 이제 완전히 다른 3가지 방법과 각 방법의 특성을 살펴보겠습니다.

질문 시간

다음 중 식료품 목록을 작성하는 데 가장 적합한 방법은 무엇입니까?

---

방법 A:
줄 바꿈 사과

스파게티

녹색 콩
우유
A 방법은 실제로 널리 사용되는 방법이며 실제로 수백만 페이지에서 사용될 수 있습니다. 우리는 가끔 이 방법을 사용하는 경향이 있습니다. 그렇죠? 우리는 목록의 각 항목이 한 줄에 있고 개행 태그를 포함하기를 원합니다(이 경우 xhtml 호환 표준 자체 닫는 태그
)은 각 항목 뒤에 줄 바꿈을 생성합니다. 이는 매우 유용한 것 같습니다.
그러나 이 음식 목록에 다른 페이지 요소와 다른 스타일을 추가하려면 어떻게 해야 할까요? 예를 들어 목록에 있는 모든 링크의 색상을 기본 파란색 대신 빨간색으로 지정하려면 어떻게 해야 할까요? 색상을 변경하고 싶거나 글꼴 크기를 변경하고 싶습니까? 실제로는 아무것도 할 수 없습니다. 동시에 전체 HTML 문서의 글꼴 스타일(설정된 경우)에 의해 제한됩니다. 목록을 둘러싸고 있으면 목록에 대한 고유한 CSS 규칙을 만들 수 없습니다.

Wrap

목록에 "Five Foot Loaf of Anthony's Italian"과 같은 줄을 추가하면 "빵". 페이지에서 이 목록의 위치에 따라 가로 공간이 부족하거나 뷰어의 브라우저 창이 좁은 경우 항목이 너무 길면 다음 줄로 넘어갈 위험이 있습니다.
동시에 시력이 좋지 않은 사용자는 가독성을 높이기 위해 기본 글꼴 크기를 변경할 수도 있다는 점을 고려해야 합니다. 그림 1-1과 같이 항목을 좁은 열에 쉽게 배열할 수 있다고 생각합니다. 그것은 다음과 같을 것이다 그림 1 - 2 이처럼 예상치 못한 곳에서 줄 바꿈이 발생합니다.

흠... 이제 빵을 사야할 것 같은데, 사진 1-2에서 빵에 적힌 두 글자가 정말 헷갈리네요.

휴대폰이나 PDA와 같은 작은 화면 장치를 사용하여 긴 줄을 읽을 때 유사한 줄 바꿈 문제가 추악한 모습을 보일 것입니다. 하드코어 기술 애호가들은 쇼핑 목록을 기록하기 위해 Palm을 들고 다닐 수도 있습니다. 파일럿(전통적인 의미의 종이와 펜이 아닌)은 슈퍼마켓을 돌아다니다가 선반에서 "앤서니의 이탈리안"이라는 물건을 찾게 되었습니다.

여기서 본질적으로 강조하고 싶은 점은 방법 A를 사용하면 웹 페이지를 읽을 때 디자이너가 제어할 수 없는 변수를 고려하지 않는다는 것입니다.

---

방법 B: 점 깨물기

사과

스파게티

녹두

Milk

대부분의 성숙한 브라우저는

태그를 구문 분석할 때 목록 항목 왼쪽에 점 기호를 추가합니다. 이 효과를 얻으려면 점 기호가 필요한 경우

태그를 추가하세요. 그러나

태그가 적절한 상위 태그에 포함되어 있지 않으면 일부 브라우저에서는 점 기호를 표시하지 않습니다. 강력한

및
• 의 다른 상위 태그는
  입니다. 이에 대해서는 나중에 자세히 설명하겠습니다.
  점 기호의 모양은 줄 바꿈 문제를 어느 정도 해결하는 데 도움이 될 수 있습니다. 각 음식 항목의 왼쪽에 작은 점 기호가 표시되므로 항목이 너무 길면 작은 점이 없어야 합니다. 옆에 있는 기호는 이것이 새로운 프로젝트가 아니라는 것이 분명하지만 방법 B에는 여전히 예상치 못한 결과가 발생하는 문제가 있습니다. 즉, 표준을 충족하지 않습니다.
  확인해주세요
  W3C의 XHTML 1.0 사양에 따르면 모든 태그는 마지막에 닫아야 합니다 — 위의 예를 계속 사용하고 모든
  1. 를 열어두면 안타깝습니다.
     줄 끝에
     태그를 사용하여 단어 줄 바꿈을 사용하여 순서가 지정되지 않은 목록의 올바른 표시 효과를 시뮬레이션하지만 실제로는 더 나은 방법이 있습니다.
     올바른 태그 구문을 작성하는 습관을 기르는 것은 항상 매우 중요합니다. 태그 구문을 올바르게 작성하면 나중에 누군가가 이 내용을 읽더라도 닫는 태그가 없거나 잘못된 중첩 요소로 인해 발생하는 문제에 대해 걱정할 필요가 없습니다. 소스 코드를 사용하면 소스 코드가 달성하려는 효과를 더 깊이 이해할 수도 있습니다.
     제출한 URI나 업로드한 문서를 확인하려면 온라인 감지 도구를 잘 활용하세요.
     

     ---

     방법 C: 닫기
     

  2. 사과
  
  
  3. 스파게티
  
  
  4. 그린 Beans
  
  
  5. Milk
  
  방법 C는 완벽한 솔루션에 가깝지만 여전히 비참하게 실패하며 그 이유는 여전히 매우 분명합니다. 여전히 표준을 충족하지 않습니다. 마크업 문법.
  
  6. 태그는 블록 수준 요소이므로 제거할 수 있습니다.
     태그를 사용하여 각 항목이 자체 라인을 차지하지만 외부 구조를 놓치고 "이 항목 그룹은 목록입니다!"를 의미하는 요소가 부족했습니다.
     의미론적 관점에서 볼 때 이 문제도 매우 중요합니다. 중요한 — 목록은 함께 속한 항목 그룹이므로 해당 태그를 추가해야 합니다. 또한 올바른 목록 태그를 사용하면 브라우저, 소프트웨어 또는 디스플레이 장치에 "이 항목 그룹은 목록입니다!"라고 명확하게 알릴 수 있습니다. 의미 태그는 콘텐츠가 속한 카테고리에 따라 콘텐츠를 구성하는 것입니다.
     블록 수준 및 인라인: HTML 요소는 블록 수준 요소와 인라인 요소의 두 가지 유형으로 나눌 수 있습니다. 블록 수준 요소는 새 줄에서 시작하여 줄 바꿈으로 끝나는 반면, 인라인 요소는 다른 인라인 요소와 같은 줄에 표시됩니다. 요소에는 다른 블록 수준 요소와 인라인 요소가 포함될 수 있으며 인라인 요소에는 블록 수준 요소가 포함될 수 없습니다.
     블록 수준 요소에는
     ,

     -

     ,

     등이 포함됩니다. 인라인 요소에는 ,, 등이 포함됩니다. < ;q>잠깐만요.
     순수한 XML 관점에서 식료품 목록을 보면 다음과 같이 주석을 달 수 있습니다.
     
     Apples
     
     그린 Beans
     Milk
     
     전체 목록에는 컨테이너 요소가 포함되며 여기에는 모든 식품이 포함됩니다. 프로젝트를 분류하는 방법을 사용하면 XML 기반 응용 프로그램이 목록에서 모든 프로젝트를 쉽게 추출할 수 있습니다.
     예를 들어 개발자는 XSLT 스타일 시트를 작성하고 목록을 xhtml, 일반 텍스트 또는 PDF 파일로 변환해야 합니다. 목록 항목의 구조가 매우 명확하기 때문에 프로그램에서 정보를 쉽게 얻을 수 있습니다. 유용한 처리를 수행합니다.
     이 책에서 XML을 직접 다루지는 않지만 이러한 원칙은 XHTML 세계에도 적용됩니다. 문서가 매우 의미적인 태그 구조를 사용한다면 향후 문서의 유연성이 향상될 것입니다. 명확한 구조. 문서에 CSS 스타일 시트를 추가하는 것이 좋을까요, 아니면 이해하기 쉽게 수정하는 것이 좋을까요? — 올바른 구조만 제공되면 향후 유지 관리에 낭비될 수 있는 많은 시간을 절약할 수 있습니다.
     다음으로 D 방법을 자세히 살펴보고 이들이 어떻게 결합되는지 살펴보겠습니다. 대부분의 브라우저와 스크린 리더에서 인식하고 표시할 수 있는 문서로, 다양한 방식으로 문서의 스타일을 지정할 수 있습니다.

     ---

     방법 D: 쾌적한 포장. Beans

     Milk

     
     
     메서드 D가 특별한 이유는 무엇입니까? 우선 구문이 완전히 정확하고 순서가 정확하지 않습니다.

     컨테이너 요소가 포함되어 있으며 각 항목은
     • 요소에 의해 닫혀 있습니다. ? 그렇게 하면 얻을 수 있는 이점을 살펴보겠습니다.
       식료품 목록을 올바르게 표시했으므로 각 항목은 (블록 수준
     • 요소로 인해) 자체 줄에 표시되며 대부분의 브라우저는 각 항목 기호 왼쪽에 작은 점을 추가합니다. 올바른 인라인 들여쓰기 및 줄 바꿈을 수행합니다(그림 참조). 1 - 3)
       
       
       
       그림 1 - 3
       PDA, 휴대폰 또는 기타 작은 화면 장치의 사용자도 명확하고 명확하게 관련된 조직을 볼 수 있습니다. 왜냐하면 우리는 이러한 장치에 데이터 유형(이 예에서는 목록)을 알려주기 때문입니다. 최상의 효과를 얻기 위해 자체 기능에 따라 표시하는 방법.
       글꼴 크기를 늘리거나 브라우저 창 너비를 줄이는 등의 이유로 줄 바꿈이 발생하면 줄 바꿈된 텍스트가 텍스트의 첫 번째 줄에 맞춰 줄 들여쓰기되어 각 줄을 쉽게 식별할 수 있습니다. 브라우저 환경에 상관없이 목록 항목을 확인하세요.

       ---

       요약
       이제 가능한 모든 접근 방식을 논의했으므로 방금 논의한 내용을 빠르게 검토해 보겠습니다. 방법 A:
       목록에 고유한 스타일을 추가할 수 없습니다.
       좁은 열이나 작은 화면 장치에서는 줄 바꿈으로 인해 긴 내용이 오해될 수 있습니다.
       의미 부족 방법 B:
       각 항목을 식별하는 데 도움이 되도록 작은 점 기호를 추가합니다. 그러나 일부 브라우저에서는 상위 태그

       가 누락된 경우 작은 점 기호를 표시하지 않을 수 있습니다.
       은
       에 위치하지 않습니다. 닫는 태그가 없으면
     스타일을 추가하기 어렵다는 뜻입니다.
     는 표준이 아닙니다. 방법 C:
     닫는 태그 를 추가한 후에는
     태그가 더 이상 필요하지 않습니다.
     
     요소가 생략되어 이 목록에 특정 스타일을 추가하기가 어렵습니다.
     비표준 방법 D:
     표준을 준수합니다!
     문서를 의미 있고 구조적으로 만드세요.
     대부분의 브라우저는 각 항목의 왼쪽에 작은 점 기호를 표시합니다.
     대부분의 브라우저에서는 줄 바꿈 후에 줄이 들여쓰기됩니다.
     특정 CSS 스타일을 정의하는 것은 쉽습니다.
     보시다시피, 겉보기에 간단한 문제에서도 많은 지식을 얻을 수 있습니다. 모든 페이지에서 D 방법을 사용했다고 하더라도 왜 이런 일을 하는지 물어보는 것이 더 낫습니다. 이 책에 나오는 '왜'라는 질문을 통해 다양한 상황에서 가장 적절한 방법을 선택할 수 있습니다.

     ---

     기술의 확장
     음식 목록을 활용해 보세요. CSS 스타일을 정의하는 몇 가지 방법을 시도하기 위해 구성되었습니다. 기본 스타일을 버리고 사용자 정의 점 기호를 추가한 다음 가로 방향으로 변환하여 탐색 모음으로 전환합니다.
     땡땡이 버리기
     "저는 식료품 목록에 있는 작은 물방울 무늬가 정말 마음에 들지 않아서 그냥
     로 돌아갈 것 같아요."
     다시 예전 습관으로 돌아갈 필요가 없습니다 — 구조화된 비순차 목록을 계속 사용할 수 있으며 CSS를 사용하여 점 기호와 인라인 들여쓰기를 끌 수 있습니다. 핵심은 목록의 구조를 유지한 다음 CSS에 구체적으로 표시한다는 것입니다.
     먼저 점 기호를 제거하는 CSS 규칙을 추가합니다.
     ul{
     list-style:none;
     }
     표시된 결과는 그림 1 - 4에 표시됩니다.
     

     그림 1 - 4 작은 점 기호 제거
     그런 다음 들여쓰기를 제거해 보겠습니다. 기본값에 따라 순서가 지정되지 않은 모든 목록의 왼쪽에 약간의 여백이 있지만 걱정하지 마세요. 원하는 대로 잘라낼 수 있습니다.
     ul{
     list-style:none;
     padding-left:0;
     }
     표시 결과는 그림 1에서 볼 수 있습니다. 5
     

     그림 1~5
     그림 1~5는 여러 개를 보고 사용하지만
     태그의 효과는 거의 동일하지만 여전히 표준을 준수하는 구조화된 정렬되지 않은 목록입니다. 브라우저에 관계없이 장치가 정상적으로 표시될 수 있습니다. 필요한 경우 몇 가지 CSS 규칙만 업데이트하면 다른 스타일로 변경할 수 있습니다.

     ---

     맞춤형 점 기호를 사용하여 나만의 스타일을 완성하세요. 상상력
     아마도 목록에 점 기호를 유지하고 싶지만 브라우저의 지루한 기본 설정을 사용하고 싶지 않고 오히려 자신만의 점 패턴을 사용하고 싶을 수도 있습니다. 원하는 것을 달성하는 방법에는 두 가지가 있습니다. . 원하다- 그리고 저는 두 번째 방법을 선호합니다.
     첫 번째 방법은 list-style-image 속성을 사용하여 기본 작은 점 이름을 대체할 이미지를 지정하는 것입니다.
     ul{
     list-style-image:url(i_hot.gif)
     }
     가장 간단한 방법이지만 브라우저마다 이미지의 수직 정렬에 차이가 있습니다. 일부 브라우저는 이미지를 항목 텍스트의 중앙선에 정렬하고 일부는 이미지를 약간 더 높게 배치합니다.
     여러 인기 브라우저에서 목록 스타일 이미지로 인해 발생하는 정렬 문제를 피하기 위해 저는 대체 방법을 사용하는 것을 선호합니다. 즉, 이미지를 각

     • 요소의 배경으로 사용하는 것입니다.
       먼저 기본 점을 제거한 다음 자체 배경 이미지를 추가해야 합니다.
       ul{
       list-style:none;
       }
       li{
       background -image :url(i_hot.gif) 반복 없음 0 50%;
       padding-left:25px;
       }
       반복 없음 배경 이미지를 타일링하지 않도록 브라우저에 지시하고(기본적으로 타일링됨) 0 50%는 브라우저에 배경 이미지를 왼쪽에서 0픽셀, 위에서 50% 떨어진 곳에 배치하도록 지시하여 배경 이미지가 타일링되도록 합니다. i_hot.gif는 중심선에 따라 정렬됩니다. 예를 들어, 0 6px는 이미지를 왼쪽에서 0픽셀, 위쪽에서 6픽셀에 배치합니다.
       또한 간섭 없이 약간의 공백을 남기면서 너비 20픽셀, 높이 11픽셀의 이미지를 완전히 표시할 수 있도록 목록 항목 왼쪽에 17픽셀 패딩을 추가해야 합니다. 텍스트와 겹치는 부분이 있습니다. 사용 중인 이미지 크기에 따라 데이터를 조정해야 합니다.

       ---

       탐색 목록
       내 개인 웹사이트에서는 다음과 같이 일반적이고 구조화된 XHTML을 사용하여 순서가 지정되지 않은 목록을 가로 탐색 모음으로 변환하는 여러 가지 방법을 공유합니다. 식료품 목록 예시.
       음식 목록을 온라인 슈퍼마켓의 탐색 표시줄로 전환했습니다(이 슈퍼마켓은 몇 가지 품목만 판매합니다...).
       우리는 이 탐색 모음을 수평 방식으로 표시하고 마우스를 이동하여 선택할 때 어느 정도 강조되어 페이징 탭의 효과를 시뮬레이션할 수 있기를 원합니다.
       먼저 CSS 스타일을 개별적으로 정의할 수 있도록 목록에 ID를 추가하고 각 음식 항목을 링크로 변환합니다.
       
     • 사과
     
     
     • 스파게티
     
     
     • 녹색 콩
     
     
     • Milk
     
     
     
     이제 보조 CSS를 추가해 보세요.
     #minitabs{
     margin :0 ;
     패딩:0 0 20px 10px;
     border-bottom:1px solid #696;
     }
     #minitabs li{
     margin:0;
     padding:0;
     display:inline;
     list-style:none;
     }
     여기서 기본 점 기호 및 인라인 제거가 완료되었습니다. 들여쓰기 작업, 우리는 또한 넣어 디스플레이는 수직 목록을 수평 목록으로 변환하는 첫 번째 단계인 인라인으로 설정됩니다. 동시에 전체 링크 그룹을 구별하기 위해 하단 테두리도 추가합니다.
     목록을 가로 탐색 모음으로 변환하는 두 번째 단계는 모든 링크를 왼쪽으로 띄우는 것입니다. 또한 모든 하이퍼링크에 간단한 스타일을 추가합니다. 여백과 내부 패치의 크기를 정의합니다.
     #minitabs {
     여백: 0;
     패딩: 0 0 20px 10px;
     border-bottom: 1px solid #696;
     }
     #minitabs li {
     margin: 0;
     패딩: 0;
     디스플레이: 인라인;
     목록 스타일 유형: 없음;
     }
     #minitabs a {
     float: 왼쪽;
     줄 높이: 14px;
     글꼴 두께: 굵게;
     여백: 0 10px 4px 10px;
     텍스트 장식: none;
     color: #9c9;
     }
     여기서 목록의 모든 요소에 대해 float:left를 정의하여 한 줄에 가로로 표시할 수 있도록 하고 몇 가지 색상을 추가하여 링크는 굵게 표시하고 링크 하단의 밑줄을 제거했습니다.
     그런 다음 마우스를 올리거나 선택한 링크에 대한 페이징 레이블을 시뮬레이션하는 여백을 만듭니다.
     #minitabs {
     margin: 0;
     패딩: 0 0 20px 10px;
     테두리 하단: 1px 솔리드 #696;
     }
     #minitabs li {
     여백: 0;
     패딩: 0;
     디스플레이: inline;
     list-style-type: 없음;
     }
     #minitabs a {
     float: 왼쪽;
     줄 높이: 14px;
     글꼴 두께: 굵게;
     여백: 0 10px 4px 10px;
     텍스트 장식: 없음;
     색상: #9c9;
     }
     #minitabs a.active, #minitabs a:hover {
     테두리 하단: 4px 솔리드 #696;
     패딩 하단: 2px;
     color: #363;
     }
     #minitabs a:hover {
     color: #696;
     }
     링크를 강조하기 위해 마우스를 위로 이동합니다. 또는 선택하세요. 4픽셀 높이의 하단 테두리를 추가하면 class="active"를 추가하여 선택한 태그를 강조된 상태로 유지할 수도 있습니다.
     
     • spaghetti
     
     이 활성 카테고리는 다음과 관련이 있습니다. a:같은 CSS 스타일을 공유합니다. (그림 1 - 7)
     

     그림 1 - 7
     나는 내 웹사이트와 2003년 7월 리팩토링에서 이 기술을 사용했습니다. 더 많은 샘플 코드가 필요하면 두 웹사이트를 모두 방문하여 소스 코드를 확인하세요.
     페이징 태그와 유사한 다양한 효과를 얻으려면 내부 패치와 테두리만 추가하면 됩니다. 지금까지는 자바스크립트의 그림이나 문장도 사용하지 않았고 기본 xhtml 구조만 식료품 목록을 구성합니다. 굉장해!
     미니 페이지 매김 태그의 모양
     일반적인 사각형 CSS 테두리와 다른 효과를 원할 경우 몇 가지 작은 수정만 하면 이미지를 사용하여 흥미로운 탐색을 만들 수 있습니다.
     이전과 똑같은 순서가 지정되지 않은 목록과 매우 유사한 CSS를 사용합니다.
     #minitabs {
     margin: 0;
     패딩: 0 0 20px 10px;
     테두리 하단: 1px 솔리드 #9FB1BC;
     }
     #minitabs li {
     여백: 0;
     패딩: 0;
     디스플레이: inline;
     list-style-type: 없음;
     }
     #minitabs a {
     float: 왼쪽;
     줄 높이: 14px;
     글꼴 두께: 굵게;
     패딩: 0 12px 6px 12px;
     텍스트 장식: 없음;
     색상: #708491;
     }
     #minitabs a.active, #minitabs a:hover {
     색상: #000;
     배경: url(tab_pyra.gif) 반복 없음 하단 중앙;
     }
     이 CSS는 아마도 이전 예제의 CSS와 거의 동일해 보일 것입니다. 주요 차이점은 우리가 사용한다는 것입니다. background-image는 원래 4픽셀 높이 하단 테두리를 대체하기 위해 마우스를 이동하거나 선택할 때 링크 하단 중앙에 표시되는 이미지를 정의합니다. (그림 1 - 8)
     

     그림 1 - 8: 배경 이미지를 사용한 미니 탭 탐색
     여기서 비결은 가장 짧은 탐색 모음 항목 아래에 들어갈 만큼 좁은 이미지를 선택하여 다양한 너비에 대해 다른 이미지를 준비할 필요 없이 탐색 링크를 강조하는 데 하나의 이미지만 필요하다는 것입니다. 자신의 프로젝트에 사용할 다양한 이미지를 선택할 수 있습니다(그림 1~9):
     

     그림 1~9: 기타 이미지 활용 예시