찾다
웹 프론트엔드CSS 튜토리얼웹표준에 대한 나의 생각(1)_경험교류

저는 작년 초부터 웹 표준을 배우기 시작했고, 지난 2년 동안 어느 정도 경험을 쌓았습니다. 최근에 직장을 바꾸고 집에서 시간이 있어서 모두와 공유할 글을 썼습니다.

1 웹 표준 및 W3C XHTML 사양의 이해

관습적인 이해에 따르면 이 두 개념은 동일한 것을 가리키는 것 같습니다(이번 호에서 논의하는 내용) 고급 이론"^_ ^). 하지만 사실 기술적인 관점에서 볼 때 이 두 가지는 거의 상관관계가 전혀 없다고 생각합니다. 간단히 말해서, 웹 표준은 페이지의 구조, 성능 및 동작을 독립적으로 구현하는 것입니다. 보다 일반적으로 말하면 오늘날 채용에서 널리 사용되는 언어인 "div+css"입니다. 그러나 W3C XHTML의 어떤 버전도 웹 표준 개념에 제한을 두지 않습니다. 분명히 우리는 xhtml 1.1을 사용하여 테이블 위치의 웹 페이지를 작성할 수 있습니다. 이쯤 되면 내가 말도 안 되는 소리를 많이 하고 있다고 생각할 수도 있다. 그러나 어떤 기술이든 기본 개념을 충분히 명확하게 이해한 경우에만 올바르게 사용할 수 있습니다. 오늘날의 웹 표준 애플리케이션이 잘못된 두 가지 경로에 대해 다음 두 가지 측면에서 이야기하겠습니다.

첫 번째 상황은 매우 간단합니다. XHTML+CSS를 사용하는 한 웹 표준이라고 생각합니다. 페이지는 클래스와 ID로 가득 차 있습니다. 모든 세부 사항에 대해 별도의 클래스를 자유롭게 정의하세요. 이러한 페이지와 기존 HTML의 차이점은 img 태그에 추가 "/"가 있다는 것입니다. 사실, 최소한 사전처럼 항상 스타일 시트를 찾는 것보다 쉽게 ​​글꼴을 사용할 수 있기 때문에 전통적인 HTML로 돌아가는 것이 더 좋습니다. 나중에 이야기할 또 다른 좀 더 미묘하고 일상적인 CSS 사용에 대해 설명하겠습니다.

두 번째 상황은 원하는 성능을 얻기 위해 다양하고 복잡한 div 중첩 및 CSS 문을 사용하려고 하는 상황이 더 이해하기 어렵다고 생각합니다. 아주 간단한 예는 제가 방금 본 게시물에 있습니다. " 이미지를 자르지 않고 페이지의 둥근 모서리 ". 우선, CSS 기능을 사용하여 둥근 모서리를 "그리는" 이 아이디어가 정말 좋은지 확인하고 싶습니다. 이를 위해 디자이너는 해당 위치에 다음과 같은 큰 코드 섹션을 추가해야 합니다.




그러나 이는 웹 표준의 기본 개념인 구조 분리와 분리를 심각하게 위반합니다. 성능 . 웹페이지의 성능을 제어하는 ​​데 사용되는 코드를 구조적 문서에 배치하기 때문입니다. 실제로 실제 성능 코드를 CSS에 넣는다고 말할 수도 있습니다. 그러나 나는 이것이 도난당한 개념이라고 생각합니다. 위의 b 태그는 웹페이지의 구조와 아무런 관련이 없으므로 모두 빈 태그입니다. 즉, 문서 구조에서 요구하는 곳에 무언가를 넣는 것이 존재하지 않습니다. 따라서 그들은 문서 구조에 대한 정크 코드일 뿐입니다.

또 다른 예는 좀 더 미묘할 수 있습니다. 이전에 웹 페이지에 3방향 열을 구현하는 방법에 대한 기사를 alistapart.com에서 본 적이 있습니다. 원칙은 아마도 3~4개의 div를 사용하여 서로 중첩하는 것입니다. 나는 이것도 웹 표준에 위배된다고 생각한다. 왜냐하면 이러한 div 태그가 코드에 배치되는 순서는 단순히 구조적 요구사항이 아니라 웹페이지 성능을 위한 것이기 때문입니다.

물론 위의 관점이 어느 정도 과하다는 점은 인정합니다(하지만 한편으로는 그림이 아닌 둥근 모서리를 구현해야 한다면 그것도 과한거 아닌가요 ㅎㅎ) . 때로는 구조와 성능이 그렇게 쉽게 분리되지 않을 때도 있습니다. 풍부한 성능을 얻으려면 구조를 조정해야 합니다(

사용에 대해 생각해 보세요). 하지만 무엇이 옳고 무엇이 그른지 아는 것이 중요합니다. 우리가 가끔 뭔가 잘못을 해야 할 때도 있습니다.

마지막으로 "그림이 아닌 둥근 모서리"가 의미가 없거나 잘못되었다고 말하는 것이 아니라는 점을 말씀드리고 싶습니다. 나는 또한 작가의 지성과 영감에 감탄합니다. 이런 기술적인 연구는 예전에 CSS를 이용해 국기를 그리는 것과 비슷하고, CSS 기술을 익히는데 많은 도움이 된다고 생각합니다. 그러나 그 사용은 CSS 플래그만큼 제한되어야 하며 실제 응용 프로그램에서는 채택되어서는 안 됩니다. 웹 표준의 기본 원칙을 위반하기 때문입니다.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
GraphQL 캐싱 작업GraphQL 캐싱 작업Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스Mar 10, 2025 am 11:37 AM

이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.

첫 번째 맞춤형 전환을 만듭니다첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

쇼, 말하지 마십시오쇼, 말하지 마십시오Mar 16, 2025 am 11:49 AM

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

NPM 명령은 무엇입니까?NPM 명령은 무엇입니까?Mar 15, 2025 am 11:36 AM

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.

특이성에 대해 이야기하기 위해 (X, X, X, X)를 사용해 보겠습니다.특이성에 대해 이야기하기 위해 (X, X, X, X)를 사용해 보겠습니다.Mar 24, 2025 am 10:37 AM

나는 다른 날에 Eric Meyer와 대화를 나누고 있었고 나는 내 형성 시절부터 Eric Meyer 이야기를 기억했습니다. CSS 특이성에 대한 블로그 게시물을 썼습니다

CSS를 사용하여 텍스트 그림자 및 그라디언트와 같은 텍스트 효과를 만드는 방법은 무엇입니까?CSS를 사용하여 텍스트 그림자 및 그라디언트와 같은 텍스트 효과를 만드는 방법은 무엇입니까?Mar 14, 2025 am 11:10 AM

이 기사에서는 그림자 및 그라디언트와 같은 텍스트 효과에 CSS를 사용하여 성능을 최적화하고 사용자 경험을 향상시킵니다. 초보자를위한 리소스도 나열됩니다. (159 자)

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구