#05 CSS에 대해 알아보자

CSS (Cascading Style Sheets) 는 마크 업 언어로 작성된 문서의 표현 의미 (설명 및 형식)를 설명하는 데 사용되는 스타일 시트 언어입니다.
가장 일반적인 응용 프로그램은 HTML 및 XHTML로 작성된 웹 페이지를 스타일링하는 것이지만 일반 XML, SVG 및 XUL을 비롯한 모든 종류의 XML 문서에도 적용 할 수 있습니다.

CSS는 레이아웃, 색상 및 글꼴과 같은 요소를 비롯하여 문서 프리젠 테이션에서 HTML 또는 유사한 마크 업 언어로 작성된 문서 컨텐트를 분리 할 수 ​​있도록 주로 설계되었습니다.

이러한 분리는 컨텐츠 접근성을 향상시키고, 프리젠 테이션 특성의 사양을보다 융통성있게 제어하고, 여러 페이지가 포맷을 공유 할 수 있도록하며, 테이블없는 웹 디자인을 허용함으로써 구조 컨텐츠의 복잡성과 반복을 줄여줍니다.
CSS는 또한 화면 상, 인쇄 중, 음성 (음성 기반 브라우저 또는 스크린 리더로 읽을 때) 및 점자 기반, 점자 기반 등의 다른 렌더링 방법에 대해 동일한 마크 업 페이지를 다양한 스타일로 제공 할 수 있습니다.

촉각 장치. 또한 웹 페이지가 화면 크기 나 장치를 보면서 다르게 표시되도록 허용하는 데 사용할 수도 있습니다.
문서 작성자는 일반적으로 해당 문서를 CSS 파일에 연결하지만 독자는 자신의 컴퓨터에있는 다른 스타일 시트를 사용하여 작성자가 지정한 스타일 시트를 재정의 할 수 있습니다.

 

CSS는 하나 이상의 규칙이 특정 요소와 일치하는 경우 적용 할 스타일 규칙을 결정하는 우선 순위 체계를 지정합니다.
이 소위 캐스케이드에서는 우선 순위 또는 가중치가 계산되어 규칙에 할당되므로 결과를 예측할 수 있습니다.

 

CSS 사양은 월드 와이드 웹 컨소시엄에서 관리합니다.
인터넷 미디어 유형 (MIME 유형) text / css는 RFC 2318 (1998 년 3 월)에 따라 CSS와 함께 사용하도록 등록되어 있으며 무료 CSS 유효성 검사 서비스도 운영합니다.

 

CSS 이전에는 HTML 문서의 거의 모든 속성이 HTML 마크 업에 포함되어있었습니다.
모든 글꼴 색, 배경 스타일, 요소 정렬, 테두리 및 크기는 HTML 내에서 명시적으로 반복적으로 설명되어야했습니다.

CSS를 사용하면 작성자는 해당 정보의 대부분을 스타일 시트인 다른 파일로 옮길 수 있으므로 HTML이 상당히 단순해집니다.

표제 (h1 요소), 하위 표제 (h2), 하위 표제 (h3) 등은 HTML을 사용하여 구조적으로 정의됩니다.

인쇄물과 화면에서 이러한 요소의 글꼴, 크기, 색상 및 강조점을 선택할 수 있습니다.

CSS 이전에, 모든 h2 헤딩에 그러한 활판 인쇄 특성을 지정하기를 원했던 문서 제작자는 해당 제목 유형이 나타날 때마다 HTML 프리젠 테이션 마크 업을 반복해야했습니다.
이로 인해 문서가 더 복잡하고 커지고 유지 관리가 어려워졌습니다.

CSS는 구조와 표현의 분리를 허용합니다.
CSS는 색상, 글꼴, 텍스트 정렬, 크기, 테두리, 간격, 레이아웃 및 기타 많은 활자 특성을 정의 할 수 있으며 화면 및 인쇄 된보기에 대해 독립적으로 수행 할 수 있습니다.
CSS는 또한 청각 판독기가 텍스트를 읽는 속도 및 강조와 같은 비 시각적 스타일을 정의합니다.

 

HTML은 문서의 구조를 표현하기에 적합한 마크업 언어라서 화면상에 컨텐츠를 깔끔하게 보여주기에는 한계가 있습니다.

 

CSS(Cascading Style Sheets)를 배워야 첫번째 이유는 HTML로 표현하기 힘든 부분을 CSS로 보완하기 위함입니다.

HTML 태그로는 아래와 같은 표현이 불가능합니다.

 

언더라인

취소선

 

자간조정

 

CSS를 사용하면 이와같이 HTML에서 지원하지 않는 다양한 스타일의 표현이 가능합니다.
CSS를 사용해야 하는 두번째 이유는 작업의 효율성 때문입니다.

CSS를 사용하면 문서의 컨텐츠와 스타일을 분리할 수 있습니다. 예를들면 CSS는 HTML 문서의 상단에 아래와 같이 정의할 수 있습니다. 

 

<!HEAD 태그의 메타네임 아래에서 스크립트 형태로 작성하여 연습해 봅시다>
<style type="text/css">a {color:red;}</style>
<a href="http://itfix.tistory.com">it-fix</a>는 it 또는 일상생활중의 트러블에 대한 최적의 해법입니다.

 

 

기본 메모장 파일을 첨부하니 head 태그 내에 위와 같은 스크립트 소스코들 집어넣어 텍스트를 htm으로 저장한다음 결과물을 확인해 봅시다.

css 연습용.txt

다운로드

 

 

위의 파란색 부분의 스타일 스크립트 css 소스를 head태그에 넣은 결과물은 다음과 같습니다.

 

 

위의 청색 코드들 중 아래의 부분이 css 코드 입니다.

 <style type="text/css">a {color:red;}</style>

a {color:red;} 는 a 태그의 색상을 red로 지정하라는 의미입니다.

이처럼 문서 상단에 CSS로 스타일을 지정하면 문서 전체의 a 태그의 색상을 결정할 수 있습니다.

만일 a 태그의 색상을 수정해야 한다면 CSS만 수정하면 되기에 문서작업의 효율성이 올라갑니다.