찾다
웹 프론트엔드CSS 튜토리얼스타일관리방법_경험교류

WEB 표준을 배우는 친구들은 대개 CSS를 배우면서 시작합니다. CSS는 매우 흥미로운 언어이기 때문에 웹 페이지를 끊임없이 변화시킬 수 있습니다. 아마도 우리의 초기 접촉은 단지 링크 스타일 수정에 관한 것이었지만 점차 CSS가 강력하고 단순하다는 것을 알게 되었기 때문에 CSS를 사용하여 전체 웹 페이지의 레이아웃, 조판, 색상, 그림 등을 제어했습니다. CSS를 배운 후에는 XHTML의 구조가 더 중요하다는 것을 알게 될 것입니다. 좋은 XHTML 구조는 CSS로 많은 작업을 줄일 수 있습니다. 또한 서로 다른 브라우저 간의 웹페이지 차이를 피할 수 있습니다. 그래서 XHTML 코드를 다시 배우기 시작했고, XHTML의 구조적 특징을 계속 탐구했습니다. CSS를 작성할 수 있으면 XHTML 구조의 중요성을 이해하고 이를 유연하게 적용할 수 있다면 그것으로 충분하지 않습니까? 그러면 스타일 관리도 매우 중요하다는 것을 알게 될 것입니다.

적용할 웹페이지에 따라 관리 아이디어가 다를 수 있으므로 이미 자신만의 관리 방법이 있을 수 있습니다. 누구에게나 참고하고 공부할 수 있는 본보기를 제공하고, 아직 자신만의 경영방식을 정하지 못한 친구들에게는 참고예를 제공한다고 볼 수 있다.

나의 스타일 관리는 단일 프로젝트, 단일 스타일 시스템을 갖춘 웹 사이트를 대상으로 합니다. 일반적으로 이러한 웹 사이트는 중소 규모의 웹 사이트이며 스타일이 일관됩니다. 대규모 웹사이트나 스타일이 매우 다양한 웹사이트 시스템에는 적합하지 않습니다. 스타일을 만들기 전에 먼저 스타일의 유지관리 가능성을 생각해야 합니다. 일단 수정이 필요하면 빠르고 편리해야 합니다. 수정 작업 비용이 매우 높기 때문에 이러한 작업에 소요되는 시간이 늘어나는 것을 피하도록 노력해야 합니다. 그런 다음 스타일과 구조 코드를 분리해야 합니다. 나의 디렉토리 할당 방법을 살펴보겠습니다:

스타일관리방법_경험교류

그 중 [이미지]에는 xHTML로 나타나는 이미지가 저장되어 있고, [jonStyle]을 통칭하여 테마 패키지라고 하며, 스타일 패키지에는 [CSS], [img], [js]는 각각 CSS 스타일 시트, 스타일 시트에서 참조하는 이미지, 웹 페이지에서 사용되는 JS를 저장합니다. 여기에 사진을 저장하는 [img]와 두 저장 외부의 [이미지]는 모두 사진을 저장하지만 여기 있는 사진의 성격은 다릅니다. [img]는 CSS에서 참조되는 이미지입니다. 모든 이미지의 표시는 CSS 스타일과 관련이 있습니다. 해당 속성은 [img]의 이미지가 XHTML이 아닌 CSS에 속한다는 것입니다. CSS는 [images]의 이미지를 참조하지 않습니다. [images]의 그림은 xHTML에만 속하며 xHTML은 [img]의 그림을 직접 사용해서는 안 됩니다.

어떤 사람들은 [jonStyle] 폴더에 [js]를 넣는 것이 부적절하다고 생각할 수도 있습니다. 제 생각은 이렇습니다: 동작과 스타일시트가 이 XHTML의 구조를 다채롭게 만듭니다. 스킨을 변경해야 할 경우 이 동작도 교체해야 합니다. 예를 들어 첫 번째 솔루션 세트에서는 특정 블록의 내용을 위아래로 스크롤해야 하지만 두 번째 솔루션 세트에서는 이 블록을 왼쪽과 오른쪽으로 스크롤해야 합니다. 그런 다음 이 동작도 샘플 작업자로 대체해야 합니다. 물론 실제 적용에서는 그렇게 단순한 이유가 아닐 수도 있다.

기본적으로 큰 구조는 이렇습니다. 그렇다면 스타일 시트의 구조는 무엇입니까? 스타일 패키지에는 base.css(기본 공통 스타일) module.css(모듈 스타일) Forms.css(폼 스타일) mend.css(패치 스타일) print.css(인쇄 스타일)가 있습니다. 🎜 >

그 중 base.css는 기본 스타일로, 모든 웹페이지의 공통 스타일이며, 이 스타일은 module.css와 결합 시 기본적으로 일반 페이지를 표시할 수 있습니다. 양식을 구분하는 것은 다양한 장소의 양식 스타일 관리에도 도움이 될 수 있습니다. WEB 표준에는 호환성이 포함되므로 스타일 패치가 필요하며 물론 여기에 나열하지 않을 대상 패치도 있습니다. 인쇄 설정에는 마지막 인쇄 스타일이 제공됩니다.

이 분할을 통해 웹사이트 프로토타입을 유지하고 업데이트하는 것이 매우 쉽습니다. 기본적으로 웹사이트의 스킨 변경은 프로그래머의 참여 없이 완료될 수 있습니다. 웹사이트에 동시에 많은 테마 패키지가 있는 경우 XHTML에서 테마 패키지 이름을 변경하기만 하면 다양한 스타일을 사용할 수 있습니다. 이를 웹사이트의 프로그램과 결합하면 매우 훌륭하고 확장성이 뛰어난 응용 프로그램 웹사이트를 만들 수 있습니다!

위 내용은 상대적으로 제한되어 있으니, 모두의 스타일 관리에 도움이 되었으면 좋겠습니다

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이미지 맵 재 방문이미지 맵 재 방문May 07, 2025 am 09:40 AM

빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.

DEVS 상태 : 모든 개발자를위한 설문 조사DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AM

Devs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다. 

CSS 그리드는 무엇입니까?CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.

CSS 박스 크기 부동산은 무엇을합니까?CSS 박스 크기 부동산은 무엇을합니까?Apr 30, 2025 pm 03:18 PM

이 기사는 요소 치수 계산 방법을 제어하는 ​​CSS 박스 크기 속성에 대해 설명합니다. Content-Box, Border-Box 및 Padding-Box와 같은 값과 레이아웃 설계 및 형태 정렬에 미치는 영향을 설명합니다.

CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?Apr 30, 2025 pm 03:17 PM

기사는 CSS, 주요 특성 및 JavaScript와 결합 된 애니메이션 작성에 대해 논의합니다. 주요 문제는 브라우저 호환성입니다.

CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?Apr 30, 2025 pm 03:16 PM

기사는 3D 변환, 주요 속성, 브라우저 호환성 및 웹 프로젝트에 대한 성능 고려 사항에 대한 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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

mPDF

mPDF

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

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는