CSS의 인라인 스타일의 장점과 단점

CSS 또는 CSS (Cascading Style Sheets)는 현대 웹 사이트 디자인에서 페이지에 시각적 모양을 적용하는 데 사용됩니다. HTML은 페이지의 구조를 만들고 Javascript는 동작을 처리 할 수 ​​있지만 웹 사이트의 모양과 느낌은 CSS의 영역입니다. 이러한 스타일은 외부 스타일 시트를 사용하여 적용되는 경우가 가장 많지만 "인라인 스타일"을 사용하여 CSS 스타일을 단일 특정 요소에 적용 할 수도 있습니다.

인라인 스타일은 페이지의 HTML에 직접 적용되는 CSS 스타일입니다. 이 방법에는 장점과 단점이 있습니다. 먼저,이 스타일이 어떻게 쓰여지는지 정확하게 살펴 보겠습니다.

인라인 스타일 작성 방법

인라인 CSS 스타일을 만들려면 스타일 시트에서와 비슷하게 스타일 속성을 작성해야하지만 한 줄로 작성해야합니다. 스타일 시트에서와 같이 여러 속성을 세미콜론으로 구분하십시오.

배경 : #ccc; color : #fff; 테두리 : 단색 검정 1px;

스타일을 적용 할 요소의 스타일 속성 안에 해당 스타일 행을 배치하십시오. 예를 들어이 스타일을 HTML의 단락에 적용하려면 해당 요소는 다음과 같습니다.

이 예제에서이 특정 단락은 연한 회색 배경 (#ccc가 렌더링 할 것임), 검정색 텍스트 (# 000 색) 및 단락의 네면 전체에 1- 픽셀 단색 검정색 테두리로 나타납니다 .

인라인 스타일의 장점

캐스 캐이 딩 스타일 시트 인라인 스타일 덕분에 문서에서 가장 높은 우선 순위 또는 특수성을 갖습니다. 이것은 외부 스타일 시트에 어떤 것이 쓰여져 있더라도 적용될 것임을 의미합니다 (단 하나의 예외는 시트에 중요한 선언이 주어짐을 제외하고는 생산 현장에서 수행되어야합니다). 피할 수 있음).

인라인 스타일보다 우선 순위가 높은 스타일은 독자가 직접 적용하는 사용자 스타일 입니다. 변경 사항을 적용하는 데 문제가있는 경우 요소에서 인라인 스타일을 설정해보십시오. 스타일이 여전히 인라인 스타일을 사용하여 표시되지 않으면 계속 진행되고 있음을 알 수 있습니다.

인라인 스타일은 쉽고 빠르게 추가 할 수 있으므로 변경하려는 요소에 스타일을 직접 추가하기 때문에 적절한 CSS 선택기를 작성하는 것에 대해 걱정할 필요가 없습니다.이 요소는 기본적으로 외부 스타일 시트에 쓰는 선택기를 대체합니다 ). 외부 스타일 시트와 같이 완전히 새로운 문서를 만들거나 내부 스타일 시트처럼 문서의 머리 부분에서 새 요소를 편집 할 필요가 없습니다. 거의 모든 HTML 요소에 유효한 스타일 속성을 추가하기 만하면됩니다. 인라인 스타일을 사용하려는 유혹에 빠진 이유는 모두이 방법에 대한 매우 중요한 단점을 알고 있어야합니다.

인라인 스타일의 단점

캐스케이드에서 가장 특정한 인라인 스타일이기 때문에 의도하지 않은 것을 오버 라이딩 할 수 있습니다. 또한 CSS의 가장 강력한 기능 중 하나 인 CSS의 핵심 기능 중 하나 인 CSS 파일에서 스타일을 많이 지정하여 향후 업데이트 및 스타일 변경을 훨씬 쉽게 관리 할 수 ​​있습니다.

인라인 스타일 만 사용해야하는 경우 문서가 빠르게 부풀어 올라 유지 관리가 매우 어려워집니다. 이는 인라인 스타일을 원하는 모든 요소에 적용해야하기 때문입니다. 따라서 모든 단락에 글꼴 모음 "Arial"을 사용하려면 문서의 각

태그에 인라인 스타일을 추가해야합니다. 이렇게하면 디자이너의 유지 보수 작업과 독자의 다운로드 시간이 모두 추가되므로 글꼴 패밀리를 변경하려면 사이트의 모든 페이지에서이 설정을 변경해야합니다. 또는 별도의 스타일 시트를 사용하는 경우 한 곳에서 스타일 시트를 변경하고 모든 페이지가 해당 업데이트를 수신하도록 할 수 있습니다.

솔직히 말해서 이것은 웹 디자인의 한 걸음 뒤로 물러서는 것입니다 - 태그의 시대!