마크업 언어 - 단순화된 태그_HTML/Xhtml_웹페이지 제작

웹 교육 네트워크의 HTML 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하세요. 위: 마크업 언어 - 목록에 대해 다시 이야기해 보겠습니다. 원본 소스 9장 단순화된 태그 이전에 우리는 구조화된 콘텐츠가 구조와 디자인 세부 사항을 분류하고 태그를 단순화할 수 있다고 반복해서 언급했습니다. 이를 수행하는 방법 표준을 준수하는 XHTML 및 CSS를 사용하여 테이블과 이미지를 대체하여 필요한 레이아웃을 만들 수 있습니다. Script House HTML Tutorial 칼럼으로 돌아가려면 여기를 클릭하세요.
위: 마크업 언어 - 목록에 대해 다시 이야기해보자
원본 소스 9장 태그 단순화
앞서 구조화된 콘텐츠가 구조와 디자인 세부 사항을 분류하고 태그를 단순화할 수 있다고 언급했습니다. 이를 수행하는 방법 표준을 준수하는 XHTML과 CSS를 사용하여 테이블과 이미지를 대체하여 필요한 레이아웃을 만들 수 있습니다. .
표준 기술을 사용하여 웹사이트(특히 CSS에 크게 의존하는 웹사이트)를 만들 때 기술에서는 이러한 기능이 전혀 필요하지 않은 중복된 태그와 클래스 속성을 추가하는 나쁜 습관이 생기는 경우가 많습니다.
후손을 사용하여 CSS에서 선택기를 사용하면 중복된

, 및 카테고리 속성을 제거할 수 있습니다. 간소화된 태그는 페이지 읽기가 더 빠르고 유지 관리가 더 쉽다는 것을 의미합니다. 이 장에서는 이 작업을 수행하는 몇 가지 간단한 방법을 설명합니다. . 표준 기술로 웹사이트를 만들 때 태그를 합리화하는 방법은 무엇입니까?
태그 합리화는 논의할 만한 중요한 주제입니다. 웹사이트를 만들 때 합법적인 XHTML로 작성하고 CSS를 사용하여 표시 효과를 설정하는 것이 좋습니다. .단축 코드는 더 빠른 다운로드 속도를 나타내며 이는 56k 전화 접속 인터넷 액세스를 사용하는 사용자에게 절대적으로 중요합니다. 단축 코드는 또한 서버 공간 요구 사항과 대역폭 소비 감소를 나타내므로 상사와 시스템 관리자가 행복합니다.
문제는 단순히 페이지가 W3C 표준을 준수한다는 것을 확인한다고 해서 콘텐츠에 사용된 코드가 단축되는 것은 아닙니다. 물론 표준에 부합한다고 표시된 콘텐츠에 불필요한 각종 태그를 추가할 수도 있습니다. 예, 표준을 충족하지만 CSS를 더 쉽게 디자인할 수 있도록 중복된 코드가 많이 추가되었을 수도 있습니다.
다음은 간단하고 표준을 준수하는 마크업을 디자인할 수 있는 몇 가지 기술입니다. CSS를 충분히 유지하면서 콘텐츠를 관리하세요. 다음으로 태그를 간소화하는 몇 가지 간단한 기술을 배워보겠습니다. 상속된 선택기
여기에서는 개인 웹사이트에서 사이드바(정보, 링크 및 기타 항목 포함)를 표시하는 두 가지 방법을 살펴보겠습니다. "사이드바"라는 ID를 사용하여 모든 좋은 내용을 하나로 묶습니다

, 나중에 브라우저 창 어딘가에 배치할 수 있습니다(CSS 레이아웃/타이포그래피 기능은 2부에서 설명합니다). 방법 A: 행복한 분류

이 사이트 정보

< ;이것은 내 사이트입니다.

내 링크

• 아카이브


• 내 소개

많은 웹사이트에서 유사한 방법 A를 본 적이 있습니다. 먼저 CSS의 힘을 발견하면 특별한 스타일을 개발하려는 각 태그에 대해 클래스를 지정하는 것이 쉽습니다.
이전 예를 보면 아마도

페이지의 다른 제목과 스타일이 다릅니다.

에 대해 class=sideheading을 지정하는 것도 같은 이유로 수행됩니다. CSS
카테고리의 스타일을 지정할 때 제목을 주황색으로 하고, 세리프 글꼴을 사용하고, 하단에 밝은 회색 테두리를 추가하고, 순서가 지정되지 않은 "사이드링크" 목록에서 작은 점 기호를 제거해야 한다고 가정해 보겠습니다. 목록 항목은 굵게 변경되어야 합니다.
방법 A에 필요한 CSS 콘텐츠는 다음과 같습니다.


.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
font-weight:bold ;
}


태그에 지정된 카테고리 이름(클래스)을 참조하여 이러한 태그에 대한 특별한 스타일을 지정할 수 있습니다. 페이지의 구성은 다음과 같이 구성됩니다. 탐색 표시줄, 바닥글 및 콘텐츠 영역에서 각 태그는 복잡한 카테고리로 추가되어 완벽하게 제어할 수 있습니다.
예, 작동하지만 간단한 방법이 있습니다. 이러한 카테고리 속성(class)을 저장하고 CSS를 더 읽기 쉽고 체계적으로 만들려면 방법 B를 살펴보세요. 방법 B: 자연 선택







이 사이트 정보




이것은 내 사이트입니다.




내 링크






• 아카이브

< ;li>내 소개






방법 B는 짧고 간단합니다. 하지만 잠깐만요, 모든 카테고리는 어디로 갔나요? 글쎄요... 우리가 이러한 태그를 고유한 태그로 단일 태그에 집어넣었기 때문에 실제로는 필요하지 않다는 것을 곧 알게 될 것입니다. 이름(이 예는 사이드바의

관계입니다).
이러한 중복 분류를 제거하려면 사이드바 내에 있는 태그를 태그 이름으로 직접 지정하기만 하면 됩니다. 속성. 콘텐츠 컨텍스트로 CSS 지정
방법 A와 동일한 스타일을 살펴보되 이번에는 상속 선택기를 사용하여 사이드바에 있는 태그를 지정합니다.


#sidebar h3 {
글꼴 계열: Georgia, serif;
색상: #c63;
테두리 하단: 1px 단색 #ccc;
}

#sidebar ul {
목록 스타일 유형: 없음;
}

#sidebar li {
글꼴 두께: 굵게;
}


#sidebar ID를 참조하여 포함된 태그에 대한 특별한 스타일을 지정할 수 있습니다. 예를 들어

; 위에서 언급한 CSS 규칙이 설정됩니다.
태그된 콘텐츠를 단축하기 위해서는 콘텐츠의 맥락에 따라 스타일을 지정하는 방법이 핵심입니다. 일반적으로 콘텐츠의 의미 구조를 디자인한 후에는 그럴 필요가 없습니다. 태그에 분류 속성을 추가합니다. 사이드바에만 사용되는 것이 아닙니다
페이지의 한 문단(사이드바)만 표시하지만, 표시된 내용을 논리에 따라 여러 문단으로 나누면(아마도) 이 방법을 전체 페이지 구조에 적용할 수 있습니다. #nav , #content, #sidebar, #footer)를 선택한 다음 상속 선택기를 사용하여 이 단락의 태그에 대한 특수 스타일을 설정합니다.
예를 들어 페이지에 #content 및 #sidebar 단락이 모두 있다고 가정합니다. .

태그를 사용하고 세리프 글꼴을 사용하려고 합니다. 그러나 한 단락의

은 보라색으로 표시되고 다른 단락은 주황색으로 표시됩니다.
태그를 수정할 필요가 없습니다. . 분류 속성을 추가하면 전역 스타일을 통해 모든

태그에 공통된 규칙을 지정한 다음 상속 선택기를 사용하여 태그 위치에 따라 색상을 설정할 수 있습니다. >h3 {

글꼴 -family: Georgia, serif; /* 모든 h3는 serif로 표시됨 */

}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}


모든

태그가 senif 글꼴을 사용하도록 지정하고 색상은 콘텐츠 컨텍스트에 따라 보라색 또는 주황색이어야 합니다. 시간이 지나면 공유 규칙(이 예에서는 글꼴 패밀리)을 반복할 필요가 없으므로 CSS의 내용이 줄어들고 여러 선언에서 중복 규칙이 방지됩니다.

태그에 필요한 추가 마크업 공간을 줄일 수 있습니다. class 속성을 사용하면 CSS 구조도 더욱 의미가 깊어지며 내용을 더 쉽게 읽을 수 있고 페이지 세그먼트에 따라 구성하기가 더 쉬워지며 특정 규칙을 수정하는 것이 매우 간단해집니다. 이는 크고 복잡한 경우에 특히 분명합니다. 수백 개의 CSS 규칙이 동시에 있을 수 있기 때문입니다.

예를 들어, 이 예에서 각 선언에 공유 규칙을 추가하고 나중에 모든

수정해야 할 것입니다. 한 번에 세 곳에서 할 수 있는 방법은 없습니다. 적은 카테고리를 유지하는 것이 좋습니다
필요한 소스 코드 공간을 줄이는 것 외에도 중복된 카테고리를 상속된 선택기로 바꾸는 것은 향후 마크업 콘텐츠를 쉽게 확장할 수 있다는 것을 의미합니다.
예를 들어 원하는 경우를 가정해 보겠습니다. 사이드바를 만들려면 페이지의 나머지 부분처럼 내부 링크가 파란색이 아닌 빨간색이 되므로 빨간색 클래스를 만들고 다음과 같이 앵커 태그에 추가합니다.




이 사이트 정보

이것은 내 사이트입니다.




내 링크






• class="red"
  >아카이브

< li>class="red">내 소개


< ;/ p>

이 링크를 빨간색으로 바꾸려면(기본 링크 색상이 빨간색이 아니라고 가정) 다음과 유사한 CSS가 필요합니다.


a:link.red {
color: red;
}


이러한 작업에는 문제가 없으며 정상적으로 작동할 수 있지만, 나중에 이 링크를 녹색으로 변경하고 싶다면, 상사가 때때로 "빨간색은 올해는 오래되었습니다. 이 사이드바 링크를 녹색으로 변경하세요"라고 말했습니다. 문제 없습니다. 빨간색만 수정하면 됩니다. CSS에서 클래스는 완료되었지만 마크업 콘텐츠의 클래스 속성은 여전히 ​​빨간색입니다. 분명히 이는 카테고리 이름으로 다른 색상을 사용하는 것처럼 완전히 의미가 있는 것은 아닙니다.
이는 표시 효과를 사용하기에 적합하지 않습니다. 그러나 카테고리 이름을 전혀 지정하지 않으면 카테고리 처리에 드는 노력(및 코드)을 줄일 수 있으며 동시에 콘텐츠 의미를 더욱 합리적으로 만들 수 있습니다. 사이드바 링크를 선택하고 필요에 따라 스타일을 지정합니다.
마크업 내용은 방법 B와 정확히 동일하며 사이드바 링크를 설정하는 데 필요한 CSS는 다음과 같습니다.


#sidebar li a:link {
color: red;
}


기본적으로 이는 "

태그만"을 의미합니다. "sidebar"> href 속성을 사용하세요. 앵커 태그는 여전히 빨간색으로 표시되어야 합니다.
현재로서는 짧고 유연한 마크업 콘텐츠를 유지하고 있으며, 향후 업데이트에서는 링크를 빨간색으로 표시할지 여부에 관계없이 CSS만 사용해야 합니다. , 녹색, 굵은 글씨 또는 기울임꼴 등 문제 없습니다.
다음으로 태그를 단순화하는 또 다른 방법을 살펴보겠습니다. 즉, 불필요한

태그를 제거하고 기존 블록 수준 태그를 직접 사용하는 것입니다.
                                                                                      #p# 불필요한


스타일을 지정하는 데 필요한 분류 속성을 줄이는 것 외에도 태그를 간소화하는 또 다른 간단한 방법이 있습니다. 즉,

태그에 블록 수준 요소가 있는 경우 < p>이를 제거하고 다음 두 가지 예를 살펴보세요. 방법 A:









• 아카이브


• 정보







순서가 지정되지 않은 목록으로만 구성된 매우 작은 탐색 모음입니다. 목록의

는 nav를 ID로 지정합니다.
그러나

는

와 같은 블록 수준 요소이므로 메소드 B를 직접 살펴보겠습니다. 방법 B: 제거








• 정보




방법 B는 ul을 직접 사용할 수 있으며 중복된

위치 지정, 내부 및 외부 패치 및 기타 스타일 설정도 < ul> ,

에 할당하는 것만큼 간단합니다. 따라서 아웃소싱 태그를 버리는 대신 태그 소스 코드의 일부를 볼 수 있습니다.
중요한 점은 이 방법만 사용된다는 것입니다. nav에

태그가 포함된 경우에만 적용 가능합니다. 예를 들어,

또는

태그는 일반적으로 적합하지 않습니다.

안에 배치되므로

는 아웃소싱 태그로 사용되어야 합니다. 그러나 방법 A와 방법 B에 제공된 예에서는 순서가 지정되지 않은 목록이 유일한 의미 태그입니다. 사실 모든 아웃소싱 태그의 존재 의미를 고려하면 매우 중요합니다. 실제로 사용할 수 있는 기존 블록 수준 요소가 있습니까? 어렵지 않습니다. 기타 예


를 버릴 수 있는 또 다른 상황은 을 아웃소싱하는 경우입니다. 예를 들어 원래는 다음과 같습니다.






... 양식 요소는 여기에 있습니다 ...






사실 더 간단한 방법으로 작성할 수 있습니다.





... 여기에 양식 요소가 있습니다 ...



마찬가지로 웹사이트의 바닥글에 단일 단락만 포함된 경우 다음과 같이 쓰는 것 외에:







Copyright 1999-2004 Dan Cederholm





은 다음과 같이 작성할 수도 있습니다.




Copyright 1999-2004 Dan Cederholm


물론 이 수정은 페이지 바닥글에 한 문단만 포함된 경우에만 가능합니다.
                                                                                      #p# 요약하자면
태그 코드를 간소화하는 두 가지 간단한 방법을 살펴보았습니다. 첫 번째는 카테고리 속성을 아껴 사용하고 상속된 선택기로 스타일을 설정하는 것입니다. 두 번째는 중복을 사용하지 않고 기존 단일 블록 수준 요소에 대한 ID를 직접 지정하는 것입니다. < ;p>아웃소싱하세요.
이러한 방법은 크기 절감 효과가 미미해 보일 수 있지만 일단 전체 웹사이트에 구현하기 시작하면 간소화되고 구조화된 코드가 점점 더 명확해지고 유연해지며, 이에 맞는 콘텐츠를 작성할 수 있게 됩니다.
"기술 확장"에서는 상속된 선택기의 기능을 추가로 활용하고 중첩 목록에 대한 스타일을 지정하고 사이트 맵으로 만드는 방법을 살펴보겠습니다. 스킬 확장
이번 단원에서는 상속 선택기를 사용하여 다양한 수준의 중첩 목록에 대한 특별한 스타일을 만드는 방법을 살펴보겠습니다. 우리가 만드는 것은 작은 사이트 맵의 일부입니다. 마크업 코드는 별도의 분류 속성을 추가하지 않고도 각 레벨의 스타일을 지정할 수 있습니다.
먼저 마크업 코드를 살펴보겠습니다. 원래
태그는 개요(이 경우에는 사이트맵도 포함)와 같은 항목에 대한 가장 기본적인 계층 구조를 제공하는 스타일이 지정되지 않은 중첩된 목록입니다. 중첩된 목록을 사용하므로 모든 브라우저와 장치에서 구조가 올바르게 표시되며 나중에 CSS를 사용하여 쉽게 스타일을 지정할 수 있습니다.
작은 사이트 맵의 마크업 코드는 세 개의 최상위 항목과 여러 개의 중첩 항목으로 구성될 수 있습니다. 🎜>

• 웹로그

기사




• 레드삭스를 이기는 방법


• 7회초 투구
  
  
  
  • 파트 I
  
  
  • 파트 II
  
  < /ul>
  
  
  • 85년은 그리 길지 않아요
  
  
  
  


• 정보






그림 9-1은 대부분의 브라우저가 이 예를 표시하는 방법입니다. 기본값을 사용하면 우리가 추구하는 구조가 스타일을 지정하지 않아도 구조가 여전히 매우 명확하지만 실제로는 약간 지루하므로 CSS를 추가하기 시작했습니다.


그림 9-1 아직 스타일이 지정되지 않은 중첩 목록 스타일 추가
사이트 맵의 특정 레이어에 일부 스타일 정의를 추가한다고 가정해 보겠습니다. 실제로는 이 목록을 다른 항목으로 지정할 수 있도록 마크업 코드에 무언가를 추가해야 합니다. 페이지의 항목은 다른 마크업 콘텐츠를 추가하지 않고도 다른 스타일을 갖습니다.



id="sitemap"

>


;/li>

기사



• 레드삭스를 이기는 방법


• 7회초 투구
  
  
  
  • 1부
  
  
  • 2부
  
  
  
  >
  
• 85년은 그리 길지 않아요









소개







상속 선택기를 사용하면 목록의 각 수준에 대해 고유한 스타일을 만들 수 있습니다. 예를 들어 가장 바깥쪽 글꼴 방법을 굵게 표시하려면 주황색을 사용하고, 내부 레이어가 점차 줄어들면 먼저 전체 목록의 크기, 두께, 색상을 지정할 수 있습니다.


#sitemap {

글꼴 크기: 140%;

글꼴 - Weight: Bold;
color: #f63;
}


이렇게 하면 전체 목록이 큰 글꼴과 주황색 굵은 글꼴로 변경됩니다. 그런 다음 모든 수준의 중첩 구조에 대해


#sitemap {
글꼴 크기: 140%;
글꼴 두께: 굵게;
색상: #f63;
}
#sitemap li ul {
글꼴 크기: 90%;
색상: #000;
}


이전 CSS에서는 모든 최상위 항목이 큰 주황색 및 굵은 글꼴로 표시되는 반면, 내부 중첩 목록은 검정색, 90% 글꼴(이 경우 140%의 90%)로 표시됩니다. 결과는 그림 9-2를 참조하세요.

그림 9-2 최상위 목록 항목에 대한 스타일 지정
세 번째 레이어에는 더 작은 글꼴을 지정할 필요가 없습니다. 90% 중 90%를 자동으로 사용합니다. (약간 혼란스럽기는 하지만 작동합니다!)
이제 목록의 각 수준에는 자동으로 글꼴 크기가 줄어들고 그 뒤에 점이 표시됩니다. 점 기호
를 사용자 정의하여 기본 스타일을 제거하고 배경 속성을 사용하여 세 번째 수준 항목에 장식 점 기호를 추가합니다. 먼저 모든

태그에 대한 기본 목록 스타일을 제거합니다. 내시경 이미지를 지정합니다. 목록의 굵은 설정 값을 재정의하여 세 번째 레이어에 대해 글꼴 무게:일반도 설정됩니다.


글꼴 크기 : 140%;
글꼴 두께: 볼드;
색상: #f63;
}

#sitemap li {
list -style: 없음; /* 글머리 기호 끄기 */
}#sitemap li ul {
글꼴 크기: 90%;
색상: #000 ;
}

/* 세 번째 레이어*/

#sitemap li ul li ul li {
font-weight : Normal;
여백 왼쪽: 16px;
배경: url(bullet.gif) 반복 없음 0 50%;
}

그림 9-3은 세 번째 레이어

태그에 사용자 정의 도트 기호와 일반 글꼴을 사용하여 완성된 웹사이트 맵입니다. 장식용 점 이미지(그리고 약간의 추가 공백도 남겨두기) 또한 왼쪽의 0픽셀과 위쪽의 50%에서 이미지 표시를 시작하도록 브라우저에 지시합니다. 이는 기본적으로 이미지의 왼쪽을 중심선에 맞춰 정렬합니다. 여기서는 수직 정렬을 픽셀 단위로 지정할 수 있지만, 백분율로 지정하면 텍스트 크기가 변경되어도 도트 이미지가 올바른 배열을 유지할 수 있습니다.

그림 9-3 프로젝트와 맞춤형 도트 사진 테두리 추가
그런 다음 두 번째 수준 목록 왼쪽에 점선 테두리를 추가하여 사이트 맵을 완성합니다. 이렇게 하면 독자에게 최상위 프로젝트에 속한 하위 프로젝트가 있음을 더 쉽게 알 수 있습니다.
두 번째 수준 목록만 표시하려면 이 효과를 얻기 위해 다음 규칙이 추가됩니다.



#sitemap {
글꼴 크기: 140%;
글꼴 두께: 굵게;
색상: #f63;
}
#sitemap li {
list-style: none; /* 글머리 기호 끄기 */
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
글꼴 크기: 90%;
색상: #000;
border-left: 1px 점선 #999;
}
/* 세 번째 -level */
#sitemap li ul li ul {
border: none;
}
#sitemap li ul li ul li {
글꼴 두께: 일반;
패딩 왼쪽: 16px;
배경: url(bullet.gif) 반복 없음 0 50%;
}


두 번째 레이어의 외부 패치를 약간 조정하고 점선 테두리를 추가했습니다. 이 규칙 이후에 border:none을 사용하여 세 번째 레이어의 테두리를 제거했습니다.
그림 9-4는 수정된 Good 글꼴입니다. , 테두리 및 그림 목록 효과.

그림 9-4 두 번째 레이어에 점선 가장자리가 추가된 완성된 목록 스타일
윤곽선과 같은 목록을 디자인할 때

-구조화되고 스타일 지정이 쉬운 솔루션입니다. 최상위
에 고유한 ID 지연을 지정하면 중복된 표시 태그를 추가하지 않고도 각 레이어의 스타일을 개별적으로 지정하는 작업을 CSS로 오프로드할 수 있습니다.
그림 9-5는 약간 더 큰 사이트 맵에 동일한 CSS를 적용한 효과입니다. CSS는 레벨에 따라 스타일을 지정하므로 레이블 내용이 정확히 동일하게 작성되므로 프로젝트가 자동으로 선택합니다. 다양한 중첩 수준에 따라 적절한 스타일.

그림 9-5 CSS와 중첩 목록으로 만든 사이트 맵의 확장 버전 결론
이 장의 시작 부분에서 태그 소스 코드를 간소화하는 두 가지 방법을 살펴보았습니다. 하나는 상속된 선택기를 사용하는 것이고, 다른 하나는 중복된

태그를 버리는 것입니다.
통합 선택기에는 표시된 소스 코드를 쉽게 읽기 어렵게 만드는 중복된 분류 속성을 사용하는 동시에 고유한 블록 수준 요소를 직접 포함하는

태그를 제거하면 바이트를 최대한 절약할 수 있으며 소스 빌드도 더 쉬워집니다. .
이러한 방법을 사용하면 몇 바이트만 절약되는 것처럼 보일 수 있지만 일단 전체 웹사이트에 이러한 방법을 적용하기 시작하면 절감 효과가 누적되기 시작하고 이를 작성하는 또 다른 방법으로 생각할 수 있습니다. 유연하고 구조화된 마크업.
태그 소스 코드를 간소화하는 것 외에도 중첩된 목록을 사용하여 사이트맵의 스타일을 지정하는 방법도 살펴보았습니다. 추가 분류 속성을 사용하면 다시 한 번 몇 바이트가 절약되고 향후 업데이트 및 재설계 작업이 더 쉬워집니다.
간소화된 태그 코드 만세!
이 책 "태그 구문으로 시작하는 부분"이 모두 끝났습니다. 희망 이 간단한 진술이 당신에게 영감을 줄 수 있기를 바랍니다.