CSS에 대하여

 

 

CSS

CSS는 HTML이나 XML등 마크업 언어로 쓰여진 문서의 프레젠테이션이나 스타일을 지정하기 위해 사용되는 스타일 시트 언어로 SVG,MathML,XHTML등의 XML 방언을 포함합니다.CSS는 HTML,Java script와 함께 WEB의 기초 기술을 말합니다. CSS는 색상,레이아웃 및 글꼴 등의 콘텐츠와 프레젠테이션을 분리할 수 있도록 설계되었습니다. 이런 분리를 통하여 콘텐츠의 접근성이 향상되고 프레젠테이션 특성 지정에 유연성과 제어성이 높아집니다. 여러가지 웹  페이지에 관련 CSS를 다른 CSS파일로 지정하여 포맷을 공유할 수 있습니다. 이로 인하여 구조 콘텐츠의 반복성과 복잡성이 줄어들고 파일을 공유하는 페이지와 포맷 간의 페이지 로드 속도를 향상시키기 위해서 모듈 파일이 캐시되게 됩니다.

 

CSS의 이해

포맷과 컨텐츠의 분리에 의해, 같은 마크업 페이지를 다른 스타일로 표시하는것도 가능하게 되었습니다.캐스케이트는 지정된 우선순위 방식에서 유래되었으며 여러가지 속성 선언어 특정 요소와 일치하는 경우에 적용되는 선언을 결정가능하고 이런 체계는 예측 가능합니다. CSS의 사양은 , World wide web consortium(W3C)에 의해서 유지되고 있습니다.Internet Media Type텍스트/css는,RFC 2318에 의해서 CSS에 사용하기 위해 등록되었습니다.W3C는.CSS문서에 대하여 무료 CSS검증 서비스도 제공을 하고 있습니다. HTML 외에도 다른 마크업 언어들에는 플레인 XML,XUL,SVG,XHTML등 CSS를 지원하고 있습니다.GTK 위젯 툴킷에서도 CSS를 사용하고 있습니다. CSS에는 간단한 구문들이 있고 다양한 스타일 속성의 이름을 지정하기 위해서 여러가지 영어 키워드들이 사용되고 있습니다.스타일 시트는 규칙 목록으로 구성이되고 각 규칙 또는 규칙 세트는 하나 이상의 셀렉터와 선언 블록으로 구성이 됩니다. CSS 에서 셀렉터는 마크업 자체의 태그와 속성을 대조함으로써 어떤 부분에 스타일이 적용되는지를 선언 하고 있습니다. HTML 태그가 웹 문서의 뼈대를 구성하고있고 CSS는 텍스트 색상을 비롯하여 태그의 위치,크기,색상 등 디자인 요소들을 담당하고 있습니다. 웹문서에 미리 만들어진 스타일 속성을 입력하여 웹페이지를 꾸미는 것을 스타일이라고 합니다.스타일이 사용되는 반복된 속성들을 모아놓은 것을 스타일 시트라고 합니다. 웹 문서를 만들때는 CSS와 HTML로 분리하여 작업하면 구조를 수정하지 않고도 디자인을 수정할 수 있습니다. 여러 웹 사이트들이 비슷한 스타일로 여러 페이지를 제작하고 있습니다. 이렇게 사용할때 수정에 대한 효율성을 높이고자 스타일시트를 사용하게 되었습니다.안에태그를 선언하고 본문의 선택자를 지정하여 스타일을 꾸미고 있습니다.  □            의사 클래스 이해하기 Class 및 ID 는 대소문자가 구분되어 사용되며 첫문장이 문자로 시작하여 영문자 , 숫자, 하이픈 및 언더바를 사용할 숭 있습니다. Class는 임의의 요소의 임의 수의 요소에 적용할 수 있고 ID는 하나의  요소에만 적용할 수 있습니다. 의사 클래스는 문서트리에 포함되지 않은 정보에 기반한 포맷을 허용하기 위하여 CSS에서 사용이 됩니다. 가장 많이 사용되는 의사 클래스는 :Hover입니다. 보통 마우스 커서를 가져가면 사용자가 가리킬땨만 콘텐츠를 식별합니다. a:hover,elementid:hover 와 같이 사용이 됩니다.의사 클래스는 :visired나 :link 와 같은 문서를 분휴하지만 의사 요소는 :first-letter 이나 :first-line 과 같은 부분요소로 구성될 수 있는 선택을 합니다. 여기에 사용되는 더블 콜론 표기와 싱글 콜론 표기의 구별에 주의해야 합니다. 콤비네이터는 여러개의 단순 셀렉터 결합기를 사용하여 결합하여 위치나 요소 유형, id,class 등 이들의 임의의 조합에 따라 요소를 지정할 수 있고 셀렉터의 순서가 매우 중요합니다. 예를 들면: div.boxclass div{color:yellow;} 는 div 요소 내부에 있는 classbox의 모든 요소에 적용되지만,  boxclass div{color:yellow;}는 클래스boxclass요소 내부에 있는 모든 div 요소에 적용됩니다.  클래스 boxclass의 div 요소에 적용되는 div.boxclass{color:yellow;}와 같은 연결된 식별자와 혼동하면 안됩니다. css가 출시되기 이전에는 HTML 문서의 대부분의 프레젠테이션 속성이 HTML 마크업에 포함되어 있었습니다. 모든 배경 스타일,모든 글꼴의 색상,경계선,요소의 정렬, 크기는 HTML 내에서 반복적으로 명시적으로 기술해야만 했었습니다.CSS를 사용하면 그 정보의 대부분의 것을 또다른 파일인 스타일시트로 이동할 수 있게 되었고, 결과적으로는  HTML이 상당히 간결해졌습니다. 그리고 응답 가능한 웹 페이지에 액세스 할 수 있는 디바이스가 증가하고 있기때문에, 다양한 화면 크기와 레이아웃이 표시되기 시작했습니다. 디바이스 크기별로 웹 사이트를 커스터마이징하는 것은 비용이 많이 들고 점점 더 어려워 지고 있어 CSS의 모듈러 특성은 스타일을 사이트의 다양한 부분에서 재사용 하거나 사이트 간에 재사용할 수 있음을 의미하며 일관성과 효율성을 촉진하고 있습니다. 예를 들어 HTML을 이용하여 제목(h1)요소,부제목(h2),부제목(h3) 등을 구조적으로 정의해 화면이나 인쇄에서 이러한 요소의 색이나 폰트 , 사이즈 등 의 강조를 선택하고 제시합니다.