웹 디자이너는 HTML4와 CSS2.1을 사용하여 멋진 작업을 수행할 수 있습니다. 기존의 테이블 기반 레이아웃을 사용하지 않고도 문서의 논리적 구조를 완성하고 콘텐츠가 풍부한 웹사이트를 만들 수 있습니다. 인라인 태그를 사용하지 않고도 웹사이트에 아름답고 섬세한 스타일을 추가할 수 있습니다. 사실, 우리의 현재 디자인 능력은 브라우저 전쟁, 독점 프로토콜, 깜박임, 스크롤 및 플래시로 가득 찬 추악한 웹 페이지의 끔찍한 시대에서 우리를 멀리 데려갔습니다.

현재 우리는 HTML4와 CSS2.1을 일반적으로 사용하고 있지만 더 잘할 수 있습니다! 코드를 재구성하고 페이지 코드를 더 의미있게 만들 수 있습니다. 페이지를 아름답게 보이게 하는 스타일링 코드의 양을 줄이고 확장성을 높일 수 있습니다. 이제 HTML5와 CSS3가 우리 디자인을 실제로 다음 단계로 끌어올릴 수 있을지 모두가 기대하고 있습니다...

과거에는 디자이너들이 의미 없이 테이블 기반 레이아웃을 사용하는 경우가 많았습니다. 그러나 결국 Jeffrey Zeldman 및 Eric Meyer와 같은 혁신가들 덕분에 현명한 디자이너들은 테이블 레이아웃 대신 상대적으로 더 의미 있는

레이아웃을 천천히 받아들이고 외부 스타일 시트를 부르기 시작했습니다. 그러나 불행하게도 복잡한 웹 디자인에는 다양한 태그 구조 코드가 많이 필요합니다. 이를 "

-soup" 증후군이라고 부릅니다. 아마도 다음 코드에 익숙할 것입니다.

코드 복사코드는 다음과 같습니다.

Lorem ipsum text 어쩌구 저쩌구.

로렘 입숨 텍스트 어쩌구 저쩌고.

content"> ;

Lorem ipsum text 어쩌구 저쩌고.

Lorem ipsum text 어쩌구 저쩌구.

Lorem ipsum 텍스트 어쩌구 저쩌구.

약간 꺼려지긴 하지만 위의 예는 복잡한 디자인을 코딩하기 위해 HTML4를 사용하는 것이 여전히 너무 비대하다는 것을 보여줍니다(사실 xHTML1.1은 그 이상은 아닙니다). 그러나 흥미로운 점은 HTML5가 "

-soup" 증후군을 해결하고 새로운 구조적 요소 세트를 제공한다는 것입니다. 이러한 새로운 HTML5 요소는 의미 없는

태그를 대체하는 보다 자세한 의미를 가지며 동시에 CSS 호출에 대한 "자연스러운" CSS 후크를 제공합니다.

다음은 HTML5 솔루션의 예입니다.

코드 복사

코드는 다음과 같습니다.

<섹션>
<기사>
<헤더>

Div 수프 시연

작성일: 2009년 7월 11일

<섹션>

Lorem ipsum 텍스트 어쩌구 저쩌고.

<바닥글>

태그: HMTL, 코드, 데모

<제쳐두고>
<헤더>

접선 정보

<섹션>

Lorem ipsum 텍스트 어쩌구 저쩌고.

<바닥글>

태그: HMTL, 코드, 데모

나는 HTML5를 사용하여 더 많은 정보를 사용하고 있습니다. 섹스가 불신한 상태에서 우리는 체중 감량을 하고 있습니다 ，并且大是减少了曾经代码中用于CSS必须调에 사용되는 클래스와 이드 특성입니다.

跟class属性说再见，欢迎整洁的标签　　

새로운 기능이 있는 HTML5, CSS3를 사용하여 웹사이트에 접속할 수 있습니다.档代码的控权，有了CSS3의 엄청난 양, 우리는 엄청난 양의 게임을 만들고 있습니다!

　　即使没에는 CSS가 있는데, 우리는 일반적으로 HTML5에 사용하는 것과 다른 클래스와 ID가 없습니다. Image 以往的DIV 사용 방법: div #뉴스 {}

复aze代码代码如下:

div.section {}
div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

저는 HTML5 형식의 예시: 섹션 {}

复system代码代码如下:

기사 {}
헤더 {}
바닥글 {}
제쳐두고 {}

이것은 진전이 있지만 아직 해결해야 할 몇 가지 문제가 있습니다.

인스턴스에서는 class 또는 id 속성을 통해 페이지의 요소를 호출해야 합니다. 이 논리를 사용하면 전체 또는 개별적으로 문서의 모든 요소에 스타일을 적용할 수 있습니다. 예를 들어,

예에서는 .section 및 .content 요소를 쉽게 배치할 수 있습니다. 그러나 HTML5 예에서는 실제 문서에 많은 섹션 요소가 있습니다. 실제로 다양한 섹션 요소를 호출하기 위해 몇 가지 특정 속성 선택기를 추가할 수 있지만 다행히 현재는 다양한 섹션 요소를 대상으로 하는 몇 가지 고급 CSS 선택기가 없습니다.

HTML-5 요소를 찾는 데 클래스와 ID를 사용하지 마세요

이제 클래스와 ID를 사용하지 않고 HTML5 페이지 요소의 인스턴스를 찾는 방법을 살펴보겠습니다. 세 가지 CSS 선택기를 사용하여 인스턴스에서 요소를 찾고 식별할 수 있습니다. 다음과 같습니다:

하위 선택자: [CSS 2.1]: EF
형제 선택자: [CSS 2.1]: E F
하위 선택자: [CSS 2.1]: E >

클래스와 ID를 사용하지 않고 문서에서 섹션 요소를 배치하는 방법을 살펴보겠습니다.

가장 바깥쪽의 <섹션> 요소 찾기

예제가 완전한 HTML5 코드 세트가 아니라는 점을 고려하여 요소 아래에

요소가 있고

요소가 형제 요소라고 가정합니다. 이 경우 다음 코드와 같이 가장 바깥쪽

을 찾을 수 있습니다.

코드 복사코드는 다음과 같습니다.

본문 탐색 섹션{}

다음 <섹션> 요소 찾기

가장 바깥쪽의

요소 아래에 있는 유일한 하위 집합 요소로서 이

요소는 다음과 같이 배치될 수 있습니다.

코드 복사

코드는 다음과 같습니다.

section>section{}

요소 배치

요소를 찾는 방법은 여러 가지가 있지만 가장 간단한 방법은 물론 하위 항목 선택기입니다.

코드 복사

코드는 다음과 같습니다.

섹션 섹션 기사 {}

요소 배치

이 세 가지 요소는 각각 두 곳에 나타납니다. 하나는

요소에 있고 다른 하나는

이러한 차이를 통해 각 요소를 쉽게 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

기사 헤더{}

기사 섹션 {}

기사 바닥글 {}

또는 함께 정의:

코드 복사

코드는 다음과 같습니다.

섹션 섹션 헤더 {}

섹션 섹션 섹션 {}

섹션 섹션 바닥글 {}

지금까지는 CSS2.1 선택기를 사용하여 모든 클래스와 ID를 제외했습니다. 그렇다면 왜 여전히 CSS3를 사용해야 할까요? 물어봐주셔서 기뻐요...

CSS3을 사용한 HTML5 요소의 고급 위치 지정

CSS2.1 선택기를 사용하여 모든 클래스와 ID를 제외했지만, 해결하려면 CSS3 고급 선택기가 필요한 더 복잡한 상황이 분명 많이 있습니다. 다음 예제를 완료하여 불필요한 클래스 및 ID 속성을 사용하지 않고 CSS3를 사용하여 페이지 요소를 배치하는 방법을 알아 보겠습니다.

고유한 게시물(게시물) ID를 사용하여 모든 게시물 찾기

Wordpress는 ID가 포함된 각 게시물에 대한 소스 코드 출력을 제공합니다. 이 정보는 일반적으로 자료의 의도를 탐색 및/또는 이해하는 데 사용되지만 CSS3는 이러한 고유 ID를 활용하여 이러한 게시물의 스타일을 지정할 수 있습니다. 물론, 평소처럼 각 게시물에 class="post" 속성을 추가할 수 있지만 그렇게 하면 우리 연습의 목적이 무너질 것입니다(게다가 재미도 없을 것입니다). "하위 문자열 일치 선택기"를 사용하면 아래와 같이 모든 로그와 다양한 요소를 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

article[id*=post-] {} /* 모든 로그 찾기*/
article[id*=post-] header h1 {} /* 찾기 모든 로그 h1 태그*/
article[id*=post-] section p {} /* 모든 로그에서 p 태그 찾기*/

주석 요소와 해당 하위 항목을 동일한 방식으로 배치할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

기사[id*=comment -] { } /* 모든 댓글 찾기*/
article[id*=comment-] header h1 {} /* 모든 댓글에서 h1 태그 찾기*/
article[id*=comment-] section p { } / * 모든 댓글에서 p 태그 찾기*/

특정 섹션이나 기사 찾기

많은 양의 로그와 댓글이 있는 블로그가 있습니다. HTML 5는

특정

또는

요소를 찾으려면 강력한 ":nth-child" 선택기를 사용해야 합니다.

코드 복사

코드는 다음과 같습니다.

섹션:nth-child( 1) { } /* 첫 번째 선택 */
article:nth-child(1) {} /* 첫 번째 선택 */
section:nth-child(2) { } /* 두 번째 선택 */
article:nth-child(2) {} /* 두 번째 선택 */

마찬가지로 ":nth-last-child" 선택기를 사용하여 일부 요소를 역순으로 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

섹션:nth-last- child(1 ) {} /* 마지막 선택 */
article:nth-last-child(1) {} /* 마지막 선택 */

section:nth-last-child(2) {} /* 마지막에서 두 번째 섹션을 선택합니다. */
article:nth-last-child(2) {} /* 마지막에서 두 번째 섹션을 선택합니다. <기사> */

특정 요소를 선택하는 다양한 방법 사용

HTML5의 특정 요소(머리글, 섹션, 바닥글 등)를 선택하는 또 다른 방법은 ":only-of-type" 선택기를 활용하는 것입니다. 이러한 HTML5 요소는 여러 위치에서 두 번 이상 나타나는 경우가 많기 때문에 상위 요소 아래에 한 번만 나타나는 태그를 찾고자 할 때 이 방법이 편리합니다. 예를 들어, 우리가 선택하고 싶은 것은 다음 코드와 같이 특정 요소의 유일한 요소입니다:

코드 복사

코드는 다음과 같습니다.

> <섹션>

<섹션>이 섹션 요소 찾기
<섹션> <섹션>이 섹션 요소를 찾습니다.

이 섹션 요소를 배치하지 마세요. section> 및 섹션 요소

다음 한 줄 선택기를 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

section>section:only- 유형 {}

다시 말하지만, 각 요소에 ID 속성을 고집스럽게 추가할 수 있지만 구조와 표현을 분리하면 코드의 확장성, 유지 관리성 및 절대적인 단순성을 잃게 됩니다. CSS3를 사용하면 ID 및 클래스 속성이 없는 거의 모든 페이지 요소를 빠르고 쉽게 찾을 수 있습니다.

요약

시간이 흐르고 더 많은 브라우저가 이를 지원할수록 HTML5와 CSS3가 점점 더 대중화될 것이라고 믿습니다. 이는 웹 디자이너에게 더 많은 에너지를 제공하고 웹 프런트엔드를 더욱 향상시킬 것입니다. (텍스트/오니무샤)