HTML5 및 CSS3 프로그래밍에 로컬 스타일 사용 방법 - 더미

비디오: 웹 애플리케이션 만들기 - 라이브러리3-3 : TwitterBootstrap 레이아웃 2024

스타일은 HTML5 본문에서 직접 정의 할 수 있습니다. 다음은 이러한 유형의 코드 예제입니다. 로컬 스타일은 페이지의 요소의 특정 인스턴스를 수정하기 때문에 요소 수준 스타일이라고도합니다.

localStyles. html

로컬 스타일

이 단락은 로컬로 정의 된 경계

이 단락에는 일련의 글꼴 및 텍스트 규칙이 적용됩니다.

이 코드를 살펴보면 두 가지 사실이 분명해집니다.

No 요소가 헤더에 있습니다. 일반적으로 페이지 머리글의 섹션을 사용하여 모든 스타일을 정의합니다. 이 페이지에는 이러한 세그먼트가 없습니다.
단락에는 고유 한 스타일 속성이 있습니다. HTML 본문의 각 단락에 스타일 속성이 추가되었습니다. 모든 HTML 요소는 style 속성을 지원합니다.
전체 스타일 코드는 한 쌍의 따옴표로 묶입니다. 스타일이 지정된 각 요소에 대해 하나의 HTML 속성이기 때문에 스타일 전체가 따옴표로 묶입니다. 들여 쓰기와 공백을 사용하여보다 쉽게 이해할 수 있습니다. 로컬 스타일을 사용하는 경우

로컬 스타일이 가장 먼저 선택되지 않아야하지만 경우에 따라 유용 할 수 있습니다.

워드 프로세서 또는 다른 도구에서 번역 할 프로그램을 작성하는 경우 지역 스타일을 사용하면 번역 작업을 가장 쉽게 할 수 있습니다. 워드 프로세서를 사용하여 페이지를 생성하고 HTML로 페이지를 저장하라는 말을하면 워드 프로세서가 종종 독자적인 형식으로이 기술을 사용하기 때문에 로컬 스타일을 사용합니다.

보통 로컬 스타일이 많은 HTML 페이지를 볼 때 자동 번역 도구가 페이지를 작성했기 때문입니다.

때로는 코드 예제에 사용 된 로컬 스타일을 볼 수 있습니다. 예를 들어, 다음 코드를 사용하여 다른 테두리 스타일을 나타낼 수 있습니다.

localBorders. html

인라인 테두리

이 단락은 검은 색 테두리가 단색입니다.

이 단락에는 검은 색 테두리가 두 개 있습니다.

예를 들어, 요소 바로 옆에 스타일을 표시하는 것이 유용합니다. 이 코드는 데모 또는 테스트 목적으로 유용 할 수 있지만 (일부 테두리 스타일을 간략하게 보려는 경우), 프로덕션 코드에는 적합하지 않습니다.

지역 스타일은 우선 순위가 매우 높으므로 지역 스타일로 적용하는 모든 것이 다른 스타일 규칙보다 우선합니다. 상황이 예상대로 작동하지 않는 경우 유용한 해결 방법이 될 수 있지만 해결 방법에 의존하는 것보다 스타일이 올바르게 작동하는 것이 좋습니다.

로컬 스타일의 단점

로컬 스타일을 적용하기는 꽤 쉽지만, 대부분은 999 비효율:

와 같은 몇 가지 문제가 있기 때문에 일반적으로 권장되지 않습니다 스타일 속성을 사용하여 요소 수준에서 스타일을 정의하면 특정 인스턴스 만 정의 할 수 있습니다.이런 식으로 전체 페이지의 단락 색을 설정하려면 많은 스타일 규칙을 작성해야합니다.

문장 난이도: 페이지 전체에 스타일 정보가 산재 해 있으면 표제 (또는 외부 문서)에 중앙에 위치하는 것보다 찾기 및 수정이 훨씬 어렵습니다.
분리 부족: 요소 수준에서 스타일을 배치하면 내용을 스타일에서 분리하는 목표를 달성하지 못합니다. 변경하기가 훨씬 더 어려워지고 스타일과 내용이 섞이면 코드를 읽고 수정하기가 더 어려워집니다.
어색함: CSS 규칙의 전체 배치는 한 쌍의 따옴표가있는 단일 HTML 속성에 채워 져야합니다. CSS 흐름이 HTML 흐름에 직접 통합되어 있기 때문에 읽기가 까다로울 수 있습니다.
인용문 문제: HTML 속성에는 따옴표가 필요하고 일부 CSS 요소에는 따옴표 (예: 공백이있는 글꼴 모음)가 필요합니다. 단일 요소에 여러 수준의 인용 부호가 있으면 문제를 해결할 수 있습니다.