'CSS는 뒤에서 어떻게 작동하나요?'

CSS(Cascading Style Sheets) 는 웹 페이지에 시각 효과를 추가하는 데 사용되는 스타일 시트 언어입니다. HTML 요소의 페이지 레이아웃과 표시를 설명하는 데 사용됩니다. CSS를 사용하면 많은 시간을 절약할 수 있습니다. 동시에 여러 웹 페이지의 레이아웃을 관리하는 데 사용합니다. 이를 통해 개발자는 다양한 요소에 대한 다양한 사용자 정의 속성을 구현할 수 있으므로 웹 페이지의 모양이 향상됩니다. 이번 글에서는 CSS와 그 작동원리에 대해 알아보겠습니다.

CSS는 기본적으로 3가지 종류로 나누어집니다 -

• 외부 CSS - 모든 페이지에서 요소를 사용하고 link> 태그는 head 섹션에 속합니다. 여러 페이지를 동시에 변경하려면 외부 스타일 시트를 사용하세요. 파일 하나만 수정하면 전체 웹 사이트의 모양을 변경할 수 있으므로 이러한 상황에서 매우 유용합니다.

• 인라인 CSS - 단일 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있습니다. head 섹션의 style> 요소에는 내부 스타일 정의가 포함되어 있습니다.

• 내부 CSS - 개별 요소에 고유한 모양을 부여하려면 인라인 스타일을 사용하세요. 적절한 요소에 스타일 속성을 추가하여 인라인 스타일을 사용하세요. 스타일 속성은 모든 CSS 속성의 컨테이너입니다.

문법

예

아래는 HTML 페이지에서 CSS를 사용하는 방법의 예입니다. 여기에 인라인 CSS가 있습니다. h1 요소에는 밑줄이 그어져 있고 div 요소에는 녹색이 표시되어 있습니다.

CSS를 사용해야 하는 이유는 무엇인가요?

• 시간 절약- 시간이 많이 절약됩니다. CSS 스타일 정의는 별도의 CSS 파일에 보관되므로 그 중 하나를 변경하면 전체 웹 사이트에 영향을 미칠 수 있습니다.

• 다중 속성 - 일반 HTML에 비해 CSS는 웹 사이트의 모양과 느낌을 결정하는 데 더 정확한 옵션을 제공합니다.

• 빠른 페이지 로딩- CSS를 사용할 때 항상 HTML 마크업 속성을 작성할 필요는 없습니다. 라벨에 대한 규칙을 한 번 작성하고 해당 라벨의 모든 인스턴스에 적용할 수 있습니다. CSS는 더 적은 코드를 사용하므로 다운로드 속도가 더 빠릅니다.

• 웹사이트 유지관리- 웹사이트 유지관리를 위해 필요합니다. 파일을 전체적으로 수정해야 하는 경우 스타일만 변경하면 웹 페이지의 모든 구성 요소가 즉시 업데이트됩니다. CSS 파일의 유연성으로 인해 웹사이트 디자인을 쉽게 수정할 수 있습니다.

• 다중 장치 호환성- CSS는 전통적으로 호환되므로 이전 언어 버전에서도 사용할 수 있습니다. 따라서 이전 버전의 프로그래밍 언어를 사용하여 CSS 애플리케이션을 생성하고 개발자가 이를 최신 개발 콘텐츠와 병합하는 경우 필요한 조정 사항과 CSS를 쉽게 통합할 수 있으므로 개발자는 기존 코드를 성공적으로 업데이트할 수 있습니다. CSS를 사용하는 콘텐츠는 다양한 장치 유형에 맞게 조정될 수 있습니다.

CSS의 기본 작업

특정 HTML 요소에 대한 최종 CSS 속성을 계산하는 실제 프로세스는 매우 복잡한 일련의 단계입니다. -

데이터 축적

이 단계에서는 특정 요소에 대한 모든 스타일 선언이 사용자 에이전트, 작성자, 사용자 등 다양한 소스로부터 수집됩니다. 이러한 선언은 현재 이 문서에 적용되는 스타일 시트에서 왔으며 구문적으로 유효한지 여부를 확인하기 위해 필터링 및 유효성 검사를 거쳐야 합니다.

캐스케이드

CSS라는 단어는 CSS의 기본 개념인 Cascading Style Sheets의 약자입니다. 이 단계는 개발자의 저작 소스로서 깊은 영향을 받는 유일한 단계이기 때문에 철저하게 이해해야 합니다. 이 단계에서는 이전 단계에서 수집된 선언의 순서가 지정되지 않은 목록을 가져와서 다음 기준을 사용하여 우선순위 내림차순으로 정렬합니다.

• 선언적 소스(사용자 에이전트, 사용자, 작성자, 전환, 애니메이션)를 기반으로 합니다! 중요한 메모의 조합.

• 선택기에 따른 전문성

• 쓴 순서대로

기본값 설정

선언되지 않은 경우 요소의 CSS 속성 값을 설정하려고 할 때 이 단계가 호출됩니다.

수정됨

반응형 디자인의 유연성을 최대화하기 위해 여러 상대 단위(auto, em, rem, vh), 상대 URL, 백분율 또는 사람이 읽을 수 있는 특정 키워드(작게, 보통, 굵게)를 사용합니다. 이 단계에서는 문서를 배치하거나 네트워크 쿼리를 수행하거나 상위가 아닌 다른 곳에서 값을 가져오지 않고도 가능한 한 많은 속성 값을 확인하려고 시도합니다.

서식을 지정하는 중

이 단계에서는 문서 레이아웃에 사용된 이론적인 절대값을 계산하여 전체 문서의 형식을 지정하고 이전 단계의 나머지 작업을 완료합니다. 이 단계에서는 주로 요소의 상대적 조정, 자동 레이아웃, Flex 레이아웃과 같은 시나리오에 중점을 둡니다. 많은 계산이 필요하지만 브라우저에서 거의 완전히 사용할 수 있는 절대 숫자를 생성합니다.

최종 변경

그리기 전 최종 단계에서는 브라우저 엔진, 미디어 유형, 장치 픽셀 밀도 또는 운영 체제와 같은 서핑 환경에 따라 일부 수정을 수행합니다. 부동 소수점 숫자를 정수 값으로 반올림하거나 사용 가능한 글꼴에 따라 글꼴 크기를 변경하는 것은 두 가지 일반적인 변경 사항입니다.

결론

CSS 캐스케이딩은 CSS에서 가장 잘못 이해되는 측면 중 하나이며 종종 많은 실수의 원인이 되므로, 작동 방식을 이해하면 스타일시트를 관리 가능하게 유지하는 데 상당한 이점을 얻을 수 있습니다. 그러나 CSS 캐스케이드에 대한 이해가 높을수록 책임도 커집니다. 계단식 배열의 보다 전문화된 부분(예: !important, 인라인 스타일 및 ID 선택기)은 나중에 변경하거나 재정의하기가 더 어려운 스타일시트를 생성합니다.

위 내용은 'CSS는 뒤에서 어떻게 작동하나요?'의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!