CSS (Cascading Style Sheet)

HTML이 웹사이트의 몸을 담당한다고 하면 CSS는 옷과 액세서리같이 꾸미는 역할을 담당한다 할 수 있습니다. 종속형 시트, 캐스캐이딩 스타일 시트는 마크업 언어가 실제로 표시되는 방법에 대해 설명하는 스타일언어입니다. HTML, XHTML, XML에서 사용 가능합니다. 기본 파일명이 style.css입니다. CSS는 하콤 비움 리에 의해 1994년 10월에 처음 제안되었습니다. HTML 구조는 동일하게 둔 상태로 CSS 파일을 변경하면 아예 다른 웹사이트가 됩니다. 현재 개발 중인 CSS3는 그림자 효과를 준다든지 그러데이션과 변형 같은 그래픽 편집 프로그램으로 제작한 이미지에 대해 대체할 수 있는 기능을 추가하였습니다. 그리고 여러 애니메이션 기능을 추가하여 어도비 플래시에 대해 어느 정도는 대체하고 있다고 할 수 있습니다. CSS가 여러 수준의 프로파일을 가지고 있는데 각 수준의 CSS가 일반적으로는 새로운 기능을 담고 있고 4가지 버전으로 나뉩니다. CSS는 계속 새로운 버전이 나오고 있으며 1996년에 도입한 CSS1이 CSS의 바탕으로 사용되었다고 합니다. CSS의 표준이 CSS 2.1이고 이전 버전에 비하면 새로운 기능, 도구의 추가를 확인할 수 있습니다. 대부분의 웹 브라우저가 CSS3를 대체로 지원해주고 있습니다. 현재는 W3C에서 표준으로 만들고 있는 중입니다. 프로파일은 일반적으로 특정 장치 혹은 사용자 인터페이스를 위해서 만들어진 CSS의 하부 집합이라고 합니다. 현재는 휴대용 장치, 텔레비전 수상기나 프린터 같은 제품을 위한 프로파일들이 존재합니다. CSS에는 단순한 문법들이 존재하며 많은 영어 키워드를 써서 다양한 스타일의 프로터피의 이름을 정합니다. 스타일 시트가 규칙의 목록으로 구성된 것을 아시나요? 각 규칙이나 규칙의 집합이 하나 이상의 실렉터, 그리고 하나의 선언 블록을 이룹니다. CSS에는 실렉터(선택자)가 있는데 이는 어느 부분 마크업에 스타일을 적용해야 할지 선언할 수 있습니다. 태그 이름과 클래스와 ID로 선택이 가능합니다. 클래스, ID는 대문자와 소문자를 구분하고 문자로 시작하며 영어와 숫자 그리고 언더바를 포함할 수 있습니다. ID 값 앞에는 #을 붙이고 클래스 값 앞에는. 이 붙습니다. 클래스가 어떠한 요소의 어떠한 수 인스턴스에 적용이 가능하며 ID는 요소 하나에만 적용할 수 있습니다. 괄호로 이루어진 선언들의 목록으로 이루어지는 선업 블록은 각 선언 그 자체가 프로퍼티와 쌍점 그리고 값으로 구성됩니다. 단 하나의 선언이어도 세미콜론이 부여되지 않으면 동작을 하지 않을 수도 있습니다. CSS에 대한 정보는 다양한 곳에서부터 제공받을 수 있습니다. 이러한 원천이 웹 브라우저와 사용자 그리고 제작자가 될 수 있다고 합니다. 제작자의 정보는 인라인과 미디어 타입 중요성, 규칙의 순서, 실렉터를 특정하고 상속, 프로퍼티를 정의하는 것으로 분류가 가능합니다. CSS 스타일은 HTML 문서에 직접 추가하거나 별도의 문서로 따로 뺄 수도 있습니다. 사용자는 여러 설정에 따라서 각기 다른 스타일을 적용할 수 있습니다. CSS 원천의 종류에 대해 알아보자. 중요성은! important를 프로퍼티 뒤에 추가하면 됩니다. 인라인이란 HTML 'style' 속성을 통해서 HTML 요소에 적용되는 스타일입니다. 미디어 특정 CSS는 정의되어 있지 않고 프로퍼티 정의가 모든 미디어 타입에 적용됩니다. 대부분 브라우저는 접근성이라는 기능을 갖추고 있습니다. 특정 콘텍스트 선택자는 일반적 정의에 덮어씁니다. 제일 마지막에 선언된 규칙이 가장 높은 우선순위를 가집니다. 프로퍼티 지정이 없으면 부모 요소에 의해 상속되며 그렇지 않은 프로퍼티도 존재합니다. 브라우저 기본값이 W3C 초기값 사양에 정의되고 우선순위는 가장 낮습니다. CSS 규칙이나 CSS 인라인 스타일이 기본의 브라우저 값을 덮어쓴다고 알려져 있습니다. 이미지를 사용하지 않고 둥근 모서리와 테두리 그리고 버튼 등을 생성할 수 있습니다. 그러데이션은 배경색상을 변경할 때 사용 가능합니다. 선형 그래디언트와 원형 그래디언트 두 가지로 나눌 수 있는데 CSS에서 그래디언트 효과가 가능하도록 웹킷에서 지원하고 있습니다. 다양한 투명도가 사용됩니다. 웹 폰트 경로명을 이용하여 폰트를 쉽게 가져올 수 있습니다. 대부분 요소 프레임에 그림자 효과가 적용됩니다. 텍스트 그림자 속성은 텍스트에 그림자를 적용할 수 있다는 것입니다. 상자 또한 그림자가 추가될 수 있는데 X축, Y축, 흐려짐의 정도, 색상 속성으로 지정이 가능합니다. 숫자와 영문에 띄어쓰기 없이 쓰인 문자가 요소 너비를 무시하여 다음 공백이 나타나면 줄 바꿈 되지 않게 사용할 수 있습니다. 벤더별로 확장하는 속성과 브라우저 엔진에 대해 알아봅시다. 대부분 브라우저 벤더들이 자신의 브라우저는 지금 지원하는 속성이 표준과 다르거나 변경 가능하다고 생각하며 벤더확장 속성을 만들었습니다. 실제 속성이 지원되지만 100% 스펙의 표준이 나온 것은 아니기 때문에 버그가 발생하거나 개선점 등 피드백을 쉽게 하기 위해서 만든 것입니다. 모바일 Page 구조는 div 태그 data-role="page"를 이용해서 표현합니다. 페이지 내부 구조 역시 data-role의 헤더, 콘텐츠, 푸터의 속성을 이용해 표출합니다. 사용자 경험(UX) 선언에 대해 알아보면 정자정부 모바일이 HTML5 DOC 타입으로 선언해야 합니다. 문서에 사용된 문자 인코딩이 간소화된 구문으로 meta 태그를 사용할 수 있으며 문서 인코딩은 UTF-8이 권장됩니다.