wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 목록에 대해 다시 이야기하십시오
원본 출처 9 장 라이트 태그
이전에는 구조화 된 컨텐츠가 구조 및 디자인 세부 사항을 분류하고 태그를 간소화 할 수 있다고 언급했습니다. 우리는 무엇을해야합니까? 테이블 및 사진 대신 표준을 충족하는 XHTML 및 CSS를 사용하여 필요한 레이아웃을 만들 수 있습니다.
표준 기술을 사용하여 웹 사이트 (특히 CSS에 크게 의존하는 웹 사이트)를 만들 때, 우리는 종종 추가 태그와 클래스 속성을 추가하는 나쁜 습관을 개발하며 기술에는 전혀 필요하지 않습니다.
CSS에서 자손 선택기를 사용하면 불필요한 <div>, <span> 및 분류 특성을 제거 할 수 있습니다. 단순화 된 태그는 페이지를 더 빠르고 유지 관리하기 쉽다는 것을 의미합니다. 이 장에서는이 작업을 수행하는 몇 가지 간단한 방법에 대해 논의 할 것입니다. 표준 기술로 웹 사이트를 만들 때 태그를 간소화하는 방법은 무엇입니까?
단순화 된 태그는 논의 할 가치가있는 중요한 주제입니다. 웹 사이트를 만들 때 합법적 인 XHTML로 작성하고 CSS로 디스플레이 효과를 설정하여 얻을 수있는 큰 이점 중 하나는 간소화 된 태그입니다. 짧은 코드는 더 빠른 다운로드 속도를 나타냅니다. 이는 56K 전화 접속을 사용하여 인터넷에 액세스하는 사용자의 핵심입니다. 짧은 코드는 또한 서버 공간 요구 사항을 나타내고 대역폭 소비를 줄이며 보스와 시스템 관리자를 행복하게 할 수 있습니다.
문제는 단순히 페이지가 W3C 표준 사양을 준수한다는 것을 확인한다고해서 컨텐츠에 사용 된 코드가 단축된다는 것을 의미하지는 않습니다. 물론 표준을 충족하는 태그 컨텐츠에 다양한 원치 않는 태그를 추가 할 수 있습니다. 예, 표준을 충족하지만 CSS를보다 쉽게 설계 할 수 있도록 불필요한 코드를 많이 추가했을 수도 있습니다.
두려워하지 마세요! 간결하게 설계하고 표준 표시 컨텐츠를 가질 수 있지만 충분한 CSS 스타일 제어 기능을 유지할 수있는 몇 가지 팁이 있습니다. 그런 다음 태그를 간소화하기위한 몇 가지 간단한 팁을 배우겠습니다. 상속 선택기
여기서는 개인 웹 사이트에서 사이드 바 (정보, 링크 및 기타 사항 포함)를 표시하는 두 가지 방법을 살펴 보겠습니다. ID를 사용하여 모든 좋은 것들을 <div>에 넣는 것은 사이드 바이므로 나중에 브라우저 창에 배치 할 수 있습니다 (두 번째 부분은 CSS 레이아웃/유형 기능에 대해 설명합니다). 방법 A : 행복한 분류
<div id = sidebar>
<h3 class = sideheading>이 사이트에 대한 </h3>
<p> 이것은 내 사이트입니다. </p>
<h3 class = sideheading> 내 링크 </h3>
<ul class = SideLinks>
<li class = link> <a href = archives.html> 아카이브 </a> </li>
<li class = link> <a href = about.html> 나에 대해 </a> </li>
</ul>
</div>
많은 웹 사이트에서 메소드 A와 유사한 태그 컨텐츠를 보았습니다. 디자이너가 CSS의 힘을 처음 발견했을 때 압도 당하고 특별한 스타일을 만들려는 각 태그에 대한 클래스를 지정하기가 쉽습니다.
이전 예에서는 아마도 <h3>가 클래스 = 사이드 헤딩을 지정하여 페이지 내의 다른 제목과 다른 스타일을 지정하는 데 도움이된다고 생각합니다. <ul> 및 <li>에 대한 클래스를 지정하는 것도 같은 이유입니다. 분류 CSS
스타일을 지정할 때 제목이 주황색으로 바뀌기를 원한다고 가정하고, 하단에 밝은 회색 가장자리가있는 Serif 글꼴을 사용하고, SideLinks Unorded List는 작은 점 기호를 제거하고 목록 항목을 굵게 변경해야합니다.
메소드 A에 필요한 CSS 내용은 다음과 같습니다.
.sideheading {
유대 가족 : 조지아, 세리프;
색상 : #C63;
국경-바닥 : 1px solid #ccc;
}
.sidelinks {
목록 스타일 유형 : 없음;
}
.Link {
글꼴 중량 : 대담한;
}
태그에 설정된 클래스 이름 (클래스)을 참조 하여이 태그에 대한 특수 스타일을 지정할 수 있으며, 페이지의 다른 부분이 이러한 방식으로 구성되어 있다고 상상할 수도 있습니다 : 내비게이션 바, 페이지 끝 및 컨텐츠 영역, 각 태그가 완전히 제어되도록 혼합되어 있습니다.
예, 효과가 있지만 CSS를보다 쉽게 읽고 구성 할 수 있도록 이러한 클래스 속성을 저장하는 간단한 방법이 있습니다. 그런 다음 방법 B 방법 B : 자연 선택
<div id = sidebar>
이 사이트에 대한 <h3> </h3>
<p> 이것은 내 사이트입니다. </p>
<H3> 내 링크 </h3>
<ul>
<li> <a href = archives.html> 아카이브 </a> </li>
<li> <a href = about.html> 나에 대해 </a> </li>
</ul>
</div>
방법 B는 짧고 간결합니다! 그러나 잠깐만, 범주는 어디로 가고 있습니까? 글쎄 ... 당신은 곧 우리가 실제로 필요하지 않다는 것을 알게 될 것입니다. 주로 우리는이 태그를 고유 한 이름 (이 경우 사이드 바)와 <div> 관계로 바꾸기 때문입니다.
이것은 상속 선택기가 사용되는 곳입니다. 이러한 불필요한 분류 속성을 제거하려면 레이블 이름이있는 사이드 바에 위치한 태그를 직접 지정하면됩니다. 관계 전후의 내용으로 CSS를 지정하십시오.
메소드 A와 같은 스타일을 살펴 보겠습니다. 그러나 이번에는 상속 선택기를 사용하여 사이드 바에있는 태그를 지정합니다.
#SideBar H3 {유대 가족 : 조지아, 세리프;
색상 : #C63;
국경-바닥 : 1px solid #ccc;
}
#SideBar ul {목록 스타일 유형 : 없음;
}
#SideBar li {글꼴 중량 : 대담한;
}
#SideBar ID를 참조하면 여기에 포함 된 태그의 특수 스타일을 지정할 수 있습니다. 예를 들어, <div id = sidebar> 내에있는 <H3> 태그 만 위의 CSS 규칙을 설정합니다.
컨텐츠 전후의 관계를 기반으로 스타일을 지정하는이 방법은 콘텐츠를 단축하는 열쇠입니다. 일반적으로 컨텐츠의 시맨틱 구조를 설계 한 후 레이블에 분류 속성을 추가 할 필요가 없습니다. 사이드 바에 만 사용되는 것은 아닙니다
우리는 페이지의 하나의 단락 (즉, 사이드 바) 만 표시하지만이 방법은 전체 페이지 구조에 적용될 수 있습니다. 논리 (아마도 #Nav, #Content, #SideBar, #Footer)에 따라 태그 내용을 여러 단락으로 나눈 다음 상속 선택기를 사용 하여이 단락에서 태그의 특수 스타일을 만듭니다.
예를 들어, 페이지의 #Content 및 #SideBar 단락이 <H3> 태그를 사용하고 Serif 글꼴을 사용하기를 원하지만 한 단락의 <H3>을 자주색으로 표시하고 다른 단락이 주황색이되기를 원합니다.
태그 수정과 분류 속성이 필요하지 않습니다. 우리는 글로벌 스타일로 공유 할 모든 <h3> 태그에 대한 규칙을 지정한 다음 상속 선택기를 사용하여 태그의 위치에 따라 색상을 설정할 수 있습니다.
H3 {
유대 가족 : 조지아, 세리프; / * 모든 h3s는 serif */
}
#content h3 {
색상 : 보라색;
}
#SideBar H3 {
색상 : 오렌지;
}
모든 <H3> 태그가 동생 글꼴을 사용하도록 지정하고 컨텐츠 컨텍스트에 따라 자주색 또는 주황색을 사용하도록 색상을 선택해야합니다. 현재 공유 규칙 (이 예에서는 글꼴-패밀리)을 반복 할 필요가 없으므로 CSS의 내용이 단축 될 수 있고 중복 규칙이 여러 문장에서 발생하지 못하게 할 수 있습니다.
클래스 속성에 필요한 추가 마킹 공간을 줄일 수있을뿐만 아니라 CSS 구조도 더 의미가있어서 내용을 읽고 페이지 세그먼트에 따라 구성 할 수 있습니다. 또한 특정 규칙을 수정하는 것이 매우 간단 해집니다.이 규칙은 크고 복잡한 조판에 특히 명백합니다. 현재 수백 개의 CSS 규칙이 동시에있을 수 있기 때문입니다.
예를 들어,이 예에서는 각 선언에 공유 규칙을 추가하고 모든 <h3>를 Sans Serif 글꼴로 교체하려면 나중에 세 곳을 수정해야하며 한 번에 수행 할 방법이 없습니다. 분류가 적을수록 유지 보수가 향상됩니다
사용해야하는 소스 코드 공간을 줄이는 것 외에도 중복 범주를 상속 곡 선택기로 대체하면 컨텐츠를 확장 할 수있는 미래의 용이성을 나타냅니다.
예를 들어, 나머지 페이지와 같이 파란색을 사용하는 대신 사이드 바 안의 링크가 빨간색으로 바뀌기를 원하므로 다음과 같은 앵커 태그에 추가되는 빨간색 클래스를 만듭니다.
<div id = sidebar>
이 사이트에 대한 <h3> </h3>
<p> 이것은 내 사이트입니다. </p>
<H3> 내 링크 </h3>
<ul>
<li> <a href = archives.html class = red> archives </a> </li>
<li> <a href = about.html class = red> 나에 대해 </a> </li>
</ul>
</div>
이러한 링크를 빨간색으로 바꾸려면 (사전 설정 링크 색상이 빨간색이 아니라고 가정) 다음과 같은 CS가 필요합니다.
A : Link.red {
색상 : 빨간색;
}
이러한 행동은 괜찮고 정상적으로 작동 할 수 있습니다. 그러나 미래에 마음을 바꾸고이 링크를 녹색으로 바꾸고 싶다면 어떨까요? 또는 더 실용적으로, 상사는 때때로 올해 빨간색이 구식이라고 말하므로이 사이드 바 링크를 녹색으로 변경하십시오! 문제 없습니다. CSS에서 빨간색 클래스를 수정하고 완료해야하지만 마킹 컨텐츠의 클래스 속성은 여전히 빨간색입니다. 분명히, 이것은 다른 색상을 분류 이름으로 사용하는 것과 마찬가지로 의미론과 완전히 일치하지 않습니다.
이것은 디스플레이 효과를 분류 이름으로 사용하기에 좋은 장소는 아니지만 분류를 전혀 지정하지 않으면 분류를 처리하는 데 많은 노력 (및 코드)을 절약하고 콘텐츠 의미를보다 합리적으로 만들 수 있습니다. 상속 선택기가있는이 사이드 바에 대한 링크를 선택하고 필요에 따라 스타일을 지정할 수도 있습니다.
태그 내용은 방법 B와 정확히 동일하며 사이드 바에서 링크를 설정하는 데 필요한 CSS는 다음과 같습니다.
#SideBar li A : 링크 {색상 : 빨간색;
}
기본적으로 이것은 <li> 태그에서 <li> 태그에 href 속성을 사용하는 앵커 태그 만 <div id = sidebar> 내에도 표시되어야 함을 의미합니다.
이제 우리는 짧고 유연한 태그 컨텐츠를 유지하며 향후 업데이트에는 링크가 빨간색, 녹색, 대담한 또는 이탤릭체를 돌리기를 원하든 CSS 만 필요합니다.
다음으로 태그를 간소화하는 다른 방법을 살펴 보겠습니다. 불필요한 <div> 태그를 제거하고 기존 블록 레벨 태그를 직접 사용하십시오.
이전 페이지 1 2 3 다음 페이지 전체 텍스트 읽기