CSS 속성을 설정하는 데 선호되는 방법은 무엇입니까?
인라인 스타일 속성 :
<div style="width:20px;height:20px;background-color:#ffcc00;"></div>
<style>...</style>태그의 스타일 속성 :
<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>
답변
스타일 규칙은 다음을 사용하여 첨부 할 수 있습니다.
- 외부 파일
- 인 페이지 스타일 태그
- 인라인 스타일 속성
일반적으로 다음과 같은 이유로 연결된 스타일 시트를 선호합니다.
- 성능을 위해 브라우저에서 캐시 할 수 있습니다. 과
- 개발 관점에서 유지하기가 훨씬 쉽습니다.
그러나 귀하의 질문은 style태그 대 인라인 스타일에 대해 구체적으로 묻는 것 입니다. style이 경우 다음과 같은 이유로 태그 를 사용하는 것이 좋습니다 .
- 스타일과 마크 업을 명확하게 구분합니다.
- 더 깨끗한 HTML 마크 업을 생성합니다. 과
- 페이지의 여러 요소에 규칙을 적용하는 선택기를 사용하면 관리를 개선하고 페이지 크기를 더 작게 만들 수 있습니다.
인라인 요소는 해당 요소에만 영향을줍니다.
style태그와 인라인 속성 의 중요한 차이점 은 특이성입니다. 특이성은 한 스타일이 다른 스타일보다 우선하는시기를 결정합니다. 일반적으로 인라인 스타일은 특이성이 더 높습니다.
이 주제를 재미있게 보려면 CSS : 특이성 전쟁 을 읽어보십시오 .
도움이 되었기를 바랍니다.
답변
다음은 차이를 지배 할 수있는 한 가지 측면입니다.
JavaScript에서 요소의 스타일을 변경하면 인라인 스타일에 영향을줍니다. 이미 스타일이있는 경우 영구적으로 덮어 씁니다. 그러나 스타일이 외부 시트 또는 <style>태그 에 정의 된 경우 인라인 ""스타일 을 설정하여 해당 소스에서 스타일 을 복원합니다.
답변
때에 따라 다르지.
요점은 반복되는 코드를 피하는 것입니다.
동일한 코드를 2 회 이상 재사용해야하고 변경시 동기화되어야하는 경우 외부 스타일 시트를 사용하십시오.
한 번만 사용하면 인라인이 괜찮다고 생각합니다.
답변
귀하의 직접적인 질문에 답하려면 : 둘 다 선호하는 방법이 아닙니다. 별도의 파일을 사용하십시오.
인라인 스타일은 마지막 수단으로 만 사용하거나 자바 스크립트 코드로 설정해야합니다. 인라인 스타일은 최고 수준의 특이성을 가지므로 실제 스타일 시트를 재정의하십시오. 이로 인해 제어가 어려울 수 있습니다 ( !important같은 이유로 피해야합니다 ).
임베디드 <style> 블록은 사이트의 여러 페이지에서 스타일 시트를 캐시하는 브라우저의 기능을 상실하므로 권장되지 않습니다.
간단히 말해서 가능하면 스타일을 별도의 CSS 파일에 넣어야합니다.
답변
유지 관리의 관점에서 보면 여러 파일에서 여러 항목을 관리하는 것보다 하나의 파일에서 하나의 항목을 관리하는 것이 훨씬 간단합니다.
스타일링을 분리하면 특히 업무가 다른 개인에게 분배 될 때 생활이 훨씬 쉬워집니다. 재사용 성과 이동성은 당신이 길을가는 데 많은 시간을 절약 할 것입니다.
인라인 스타일을 사용하면 설정된 모든 외부 속성을 재정의합니다.
답변
나는 외부 스타일 시트가 선호되는 방법이라는 다수의 견해에 동의합니다.
그러나 다음은 몇 가지 실질적인 예외입니다.
-
동적 배경 이미지. CSS 스타일 시트는 정적 파일이므로 인라인 스타일을 사용하여 동적 (데이터베이스, CMS 등)
background-image스타일 을 추가해야합니다 . -
페이지가로드 될 때 요소를 숨겨야하는 경우 외부 스타일 시트를 사용하는 것은 실용적이지 않습니다. 스타일 시트가 처리되기 전에 항상 약간의 지연이 있고 그 때까지 요소가 표시되기 때문입니다.
style="display: none;"이를 달성하는 가장 좋은 방법입니다. -
응용 프로그램이 특정 CSS 값 (예 : 텍스트 색상)에 대한 세부 제어를 사용자에게 제공하려는 경우이를 인라인
style요소 또는 인 페이지<style></style>블록 에 추가해야 할 수 있습니다 . 예 :style="color:#{{ page.color }}"또는<style> p.themed { color: #{{ page.color }}; }</style>
답변
가능할 때마다 클래스 .myclass{}와 식별자 를 사용하는 것이 바람직 #myclass{}하므로 html 내의 전용 CSS 파일 또는 태그를 사용하십시오 . 인라인 스타일은 자바 스크립트를 사용하여 CSS 옵션을 동적으로 변경하는 것이 좋습니다.<style></style>
