계단식 스타일 시트 란 무엇입니까?
웹 사이트는 이미지, 텍스트 및 다양한 문서를 포함하여 개별적인 조각으로 구성됩니다. 이러한 문서에는 PDF 파일과 같은 다양한 페이지에서 링크 될 수있는 문서뿐만 아니라 페이지의 구조와 CSS (Cascading Style Sheet) 문서를 결정하는 HTML 문서와 같은 페이지 자체를 구성하는 데 사용되는 문서도 포함됩니다. 페이지의 모양을 지정합니다. 이 기사에서는 CSS에 대해 알아보고 CSS의 내용과 현재 웹 사이트에서 사용되는 위치에 대해 다룹니다.
CSS 역사 수업
CSS는 웹 개발자가 자신이 만든 웹 페이지의 시각적 모양을 정의하는 방법으로 1997 년에 처음 개발되었습니다. 웹 전문가가 웹 사이트 코드 의 내용 과 구조를 시각 디자인과 분리 할 수 있도록하기위한 것으로 이번에는 불가능했습니다.
구조와 스타일의 분리로 인해 HTML은 원래 그 기반이었던 기능을 더 많이 수행 할 수 있습니다. 일반적으로 "모양과 느낌"으로 알려진 페이지 자체의 디자인과 레이아웃에 대해 걱정할 필요없이 콘텐츠의 마크 업입니다. 페이지의
CSS는 웹 브라우저가이 마크 업 언어의 기본 글꼴 및 색상 이상의 기능을 사용하기 시작한 2000 년 경에 인기를 얻지 못했습니다. 오늘날 모든 최신 브라우저는 CSS 레벨 1, CSS 레벨 2의 대부분, CSS 레벨 3의 대부분의 측면까지 지원합니다. CSS가 계속 발전하고 새로운 스타일이 도입됨에 따라 웹 브라우저는 새로운 CSS 지원을 제공하는 모듈을 구현하기 시작했으며 웹 디자이너에게 강력한 새로운 스타일링 도구를 제공합니다.
과거 (많은) 과거에는 웹 사이트의 디자인과 개발을 위해 CSS를 사용하기를 거부 한 일부 웹 디자이너가 있었지만 그 방법은 오늘날 업계에서 완전히 사라졌습니다. CSS는 이제 웹 디자인에서 널리 사용되는 표준이며, 적어도이 언어에 대한 기본적인 이해를하지 못한 업계의 사람들을 찾기가 어려울 것입니다.
CSS는 약어입니다.
앞서 언급했듯이 CSS는 "캐스 케이 딩 스타일 시트"의 약자입니다. 이 문구를 좀 더 자세히 설명해 보도록하겠습니다.
"스타일 시트"라는 단어는 문서 자체를 의미합니다 (예 : HTML, CSS 파일은 실제로 다양한 프로그램으로 편집 할 수있는 텍스트 문서입니다). 스타일 시트는 수년간 문서 디자인 에 사용되었습니다. 인쇄 또는 온라인 여부에 관계없이 레이아웃의 기술 사양입니다. 인쇄 디자이너는 오랫동안 스타일 시트를 사용하여 자신의 디자인이 자신의 사양에 정확하게 인쇄되도록했습니다. 웹 페이지의 스타일 시트는 동일한 목적을 수행하지만 웹 브라우저에 표시되는 문서를 렌더링하는 방법을 알려주는 기능이 추가되었습니다. 오늘날 CSS 스타일 시트는 미디어 쿼리 를 사용하여 페이지에서 다른 장치 및 화면 크기를 찾는 방식을 변경할 수도 있습니다. 이것은 하나의 HTML 문서를 액세스하는 데 사용되는 화면에 따라 다르게 렌더링 할 수 있기 때문에 엄청나게 중요합니다.
캐스케이드 는 "계단식 스타일 시트"라는 용어의 특별한 부분입니다. 웹 스타일 시트 는 폭포 위의 강과 같은 시트에서 일련의 스타일을 통해 계단식으로 배열됩니다. 강물에있는 물은 폭포의 모든 바위를 때리지 만 바닥에있는 물만이 물이 흐르는 곳에 정확히 영향을 미칩니다. 웹 사이트 스타일 시트의 캐스케이드도 마찬가지입니다.
웹 디자이너가 스타일을 전혀 적용하지 않아도 모든 웹 페이지는 최소한 하나의 스타일 시트의 영향을받습니다. 이 스타일 시트는 사용자 에이전트 스타일 시트 입니다. 다른 지침이 제공되지 않으면 웹 브라우저가 페이지를 표시하는 데 사용할 기본 스타일이라고도합니다. 예를 들어, 기본적으로 하이퍼 링크는 파란색으로 표시되며 밑줄이 그어져 있습니다. 이러한 스타일은 웹 브라우저의 기본 스타일 시트에서 가져옵니다. 그러나 웹 디자이너가 다른 지침을 제공하면 브라우저는 어떤 지침이 우선해야하는지 알 필요가 있습니다. 모든 브라우저에는 고유 한 기본 스타일이 있지만 대부분의 주요 브라우저 및 버전에서 해당 기본 설정 중 많은 부분 (파란색 밑줄이 그어진 텍스트 링크)이 공유됩니다.
브라우저 기본값의 또 다른 예를 들면, 웹 브라우저에서 기본 글꼴은 " Times New Roman "크기 16으로 표시됩니다. 그러나 방문하는 페이지 중 거의 하나도 해당 글꼴 집합과 크기로 표시되지 않습니다. 이는 캐스케이드가 디자이너 자체에서 설정 한 두 번째 스타일 시트 가 폰트 크기 와 패밀리를 재정 의하여 웹 브라우저의 기본값을 무시하기 때문입니다. 웹 페이지 용으로 만든 모든 스타일 시트는 브라우저의 기본 스타일보다 더 특수성을 가지므로 해당 기본값은 스타일 시트가 해당 스타일을 덮어 쓰지 않는 경우에만 적용됩니다. 링크가 파란색과 밑줄로 표시되게하려면 기본값이므로 아무 것도 할 필요가 없지만 사이트의 CSS 파일에 링크가 녹색이어야한다고 표시되면 해당 색상이 기본 파란색을 대체합니다. 밑줄은 다른 예를 지정하지 않았으므로이 예에서 계속됩니다.
CSS는 어디에 사용됩니까?
CSS는 또한 웹 브라우저가 아닌 다른 미디어에서 웹 페이지를 볼 때 정의해야하는 방법을 정의하는 데 사용할 수 있습니다. 예를 들어 웹 페이지를 인쇄하는 방법을 정의하는 인쇄 스타일 시트를 만들 수 있습니다. 탐색 단추 또는 웹 양식과 같은 웹 페이지 항목은 인쇄 된 페이지에 아무런 목적이 없기 때문에 인쇄 스타일 시트를 사용하여 페이지를 인쇄 할 때 해당 영역을 "끄십시오". 많은 사이트에서 일반적인 관행은 아니지만 인쇄 스타일 시트를 만드는 옵션은 강력하고 매력적입니다 (내 경험상 대부분의 웹 전문가는 사이트의 예산 범위가이 추가 작업을 완료하지 않아도되므로 간단하게이 작업을 수행하지 않습니다. ).
CSS가 중요한 이유는 무엇입니까?
CSS는 웹 디자이너가 웹 사이트의 전체 시각적 모양에 영향을 줄 수 있으므로 가장 강력한 도구 중 하나입니다. 잘 작성된 스타일 시트는 신속하게 업데이트 할 수 있으며 사이트에서 시각적으로 우선 순위가 지정된 것을 화면에서 변경할 수 있습니다. 그러면 기본 HTML 마크 업을 변경할 필요없이 방문자에게 가치와 초점을 보여줍니다.
CSS의 주된 도전 과제는 배우기가 약간있다는 것과 브라우저가 매일 바뀌고 있기 때문에 새로운 스타일이 지원되고 다른 것들이 떨어지거나 어떤 이유에서 우호적 인 태도로 바뀌면 오늘날 잘 작동하는 것은 당연한 것입니다. .
CSS는 캐스 캐 이드 및 결합이 가능하고 여러 브라우저가 지시어를 어떻게 다르게 해석하고 구현할 수 있는지를 고려하기 때문에 일반적인 HTML보다는 CSS를 마스터하는 것이 어려울 수 있습니다. CSS는 브라우저에서 HTML이 실제로하지 않는 방식으로 변경됩니다. 그러나 CSS를 사용하기 시작하면 스타일 시트의 힘을 이용하면 웹 페이지를 레이아웃하고 모양과 느낌을 정의하는 방법에 대한 믿을 수없는 유연성을 얻을 수 있습니다. 길을 따라, 당신은 과거에 당신을 위해 일했던 스타일과 접근 방식의 "트릭 백 (bag of tricks)"을 축적 할 것이고 앞으로 새로운 웹 페이지를 만들 때 다시 돌아갈 수 있습니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 (Jeremy Girard) 편집 : 7/5/17,