인라인 <style> 태그와 인라인 CSS 속성

Question 1

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>

Question 2

스타일 규칙은 다음을 사용하여 첨부 할 수 있습니다.

외부 파일
인 페이지 스타일 태그
인라인 스타일 속성

일반적으로 다음과 같은 이유로 연결된 스타일 시트를 선호합니다.

성능을 위해 브라우저에서 캐시 할 수 있습니다. 과
개발 관점에서 유지하기가 훨씬 쉽습니다.

그러나 귀하의 질문은 style태그 대 인라인 스타일에 대해 구체적으로 묻는 것 입니다. style이 경우 다음과 같은 이유로 태그 를 사용하는 것이 좋습니다 .

스타일과 마크 업을 명확하게 구분합니다.
더 깨끗한 HTML 마크 업을 생성합니다. 과
페이지의 여러 요소에 규칙을 적용하는 선택기를 사용하면 관리를 개선하고 페이지 크기를 더 작게 만들 수 있습니다.

인라인 요소는 해당 요소에만 영향을줍니다.

style태그와 인라인 속성 의 중요한 차이점 은 특이성입니다. 특이성은 한 스타일이 다른 스타일보다 우선하는시기를 결정합니다. 일반적으로 인라인 스타일은 특이성이 더 높습니다.

이 주제를 재미있게 보려면 CSS : 특이성 전쟁 을 읽어보십시오 .

도움이 되었기를 바랍니다.

Question 3

다음은 차이를 지배 할 수있는 한 가지 측면입니다.

JavaScript에서 요소의 스타일을 변경하면 인라인 스타일에 영향을줍니다. 이미 스타일이있는 경우 영구적으로 덮어 씁니다. 그러나 스타일이 외부 시트 또는 <style>태그 에 정의 된 경우 인라인 ""스타일 을 설정하여 해당 소스에서 스타일 을 복원합니다.

Question 4

때에 따라 다르지.

요점은 반복되는 코드를 피하는 것입니다.

동일한 코드를 2 회 이상 재사용해야하고 변경시 동기화되어야하는 경우 외부 스타일 시트를 사용하십시오.

한 번만 사용하면 인라인이 괜찮다고 생각합니다.

Question 5

귀하의 직접적인 질문에 답하려면 : 둘 다 선호하는 방법이 아닙니다. 별도의 파일을 사용하십시오.

인라인 스타일은 마지막 수단으로 만 사용하거나 자바 스크립트 코드로 설정해야합니다. 인라인 스타일은 최고 수준의 특이성을 가지므로 실제 스타일 시트를 재정의하십시오. 이로 인해 제어가 어려울 수 있습니다 ( !important같은 이유로 피해야합니다 ).

임베디드 <style> 블록은 사이트의 여러 페이지에서 스타일 시트를 캐시하는 브라우저의 기능을 상실하므로 권장되지 않습니다.

간단히 말해서 가능하면 스타일을 별도의 CSS 파일에 넣어야합니다.

Question 6

유지 관리의 관점에서 보면 여러 파일에서 여러 항목을 관리하는 것보다 하나의 파일에서 하나의 항목을 관리하는 것이 훨씬 간단합니다.

스타일링을 분리하면 특히 업무가 다른 개인에게 분배 될 때 생활이 훨씬 쉬워집니다. 재사용 성과 이동성은 당신이 길을가는 데 많은 시간을 절약 할 것입니다.

인라인 스타일을 사용하면 설정된 모든 외부 속성을 재정의합니다.

Question 7

나는 외부 스타일 시트가 선호되는 방법이라는 다수의 견해에 동의합니다.

그러나 다음은 몇 가지 실질적인 예외입니다.

동적 배경 이미지. CSS 스타일 시트는 정적 파일이므로 인라인 스타일을 사용하여 동적 (데이터베이스, CMS 등) background-image스타일 을 추가해야합니다 .
페이지가로드 될 때 요소를 숨겨야하는 경우 외부 스타일 시트를 사용하는 것은 실용적이지 않습니다. 스타일 시트가 처리되기 전에 항상 약간의 지연이 있고 그 때까지 요소가 표시되기 때문입니다. style="display: none;"이를 달성하는 가장 좋은 방법입니다.
응용 프로그램이 특정 CSS 값 (예 : 텍스트 색상)에 대한 세부 제어를 사용자에게 제공하려는 경우이를 인라인 style요소 또는 인 페이지 <style></style>블록 에 추가해야 할 수 있습니다 . 예 : style="color:#{{ page.color }}"또는<style> p.themed { color: #{{ page.color }}; }</style>

Question 8

가능할 때마다 클래스 .myclass{}와 식별자 를 사용하는 것이 바람직 #myclass{}하므로 html 내의 전용 CSS 파일 또는 태그를 사용하십시오 . 인라인 스타일은 자바 스크립트를 사용하여 CSS 옵션을 동적으로 변경하는 것이 좋습니다.<style></style>

Question 9

한 가지 방법을 선택하는 데는 다른 이유가있을 수 있습니다.

프로그래밍 방식으로 생성 된 요소에 CSS를 지정해야하는 경우 (예 : 다양한 크기의 이미지에 대한 CSS 수정) 인라인 CSS를 사용하는 것이 더 유지 관리가 용이 할 수 있습니다.
일부 css가 현재 페이지에만 유효하면 별도의 .css 파일보다 스크립트 태그를 사용해야합니다. 브라우저가 너무 많은 http 요청을 수행 할 필요가 없으면 좋습니다.

그렇지 않으면 명시된대로 별도의 css 파일을 사용하는 것이 좋습니다.

Question 10

아래와 같이 세 가지 방법으로 CSS를 설정할 수 있습니다.

1.External style sheet
2.Internal style sheet
3.Inline style

CSS 스타일을 설정하는 선호 / 이상적인 방법은 스타일이 여러 페이지에 적용될 때 외부 스타일 시트로 사용하는 것입니다. 외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다.

샘플 사용법은 다음과 같습니다.

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

단일 문서에 고유 한 스타일을 적용하려면 내부 스타일 시트를 사용할 수 있습니다.

인라인 스타일 시트는 콘텐츠와 프레젠테이션을 혼합하고 많은 장점을 잃어 버리므로 사용하지 마십시오.