위키원
CSS
CSS(씨에스에스)는 "Cascading Style Sheets"의 약자로서, 웹 문서의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어이다. 씨에스에스라고 읽는다. 종속형 시트 또는 캐스케이딩 스타일 시트라고도 한다. 1996년 CSS1, 1998년 CSS2, 2005년 CSS3가 발표되었다.
목차
개요[편집]
CSS는 웹 페이지의 모양과 느낌을 처리한다. CSS는 텍스트 색상, 글꼴 스타일, 문단 간격, 열 크기 및 배치 방법, 사용되는 배경 이미지 또는 색상, 레이아웃 설계 등 여러 가지를 제어할 수 있다. CSS는 배우기 쉽고 이해하기 쉬우면서도 HTML 문서를 강력하게 제어할 수 있다. 보통 일반적으로 HTML과 XHTML에서 주로 쓰인다. HTML 만으로 웹 페이지를 제작할 경우에는 HTML 요소의 세부적인 스타일들을 따로 일일이 지정해 주어야 하는데 이 작업은 매우 많은 시간이 걸려 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘든데 CSS를 사용하면 웹 페이지의 스타일을 편리하게 개발할 수 있습니다.
등장배경[편집]
웹페이지를 아름답게 디자인하는 방법은 두 가지가 있다. 쉬운 것은 HTML에 직접적으로 style 태그를 추가하는 것이다. 다른 방법은 이보다 어렵기는 하지만 근본적 해결책이라고 할 수 있는 CSS이다. CSS 없이 HTML만 배우는 것은 흑백으로 그림을 그리는 것과 같다. 어떠한 그림이든 그릴 수는 있어도 아름다운 색들을 쓸 수가 없기 때문이다. <style>이란 태그는 HTML의 문법이면서 동시에 이 <style>이라는 태그 안쪽에 있는 내용은 CSS니까 이것을 CSS 라는 언어의 문법에 맞게 해석해서 처리해야 한다. 이 코드를 통해 태그가 1개 이거나 10억 개 여도 순식간에 바뀌는 폭발적인 효과를 얻을 수 있다. 생활 코딩에서는 코딩을 어떻게 잘할지가 아니라 어떻게 할지에 집중한다고 한다. 하지만 유일하게 코딩을 잘하는 방법은 바로 '중복의 제거'이다. 만약 <a> 라는 태그가 10억 개가 있는데 중복하여 스타일을 적용한다면 이 웹페이지의 사이즈는 어마어마하게 커질 것이다. 따라서 CSS의 코드를 이용해 같은 성격의 것을 한꺼번에 바꿀 수 있는 것은 유지 보수를 편하게 하며 가독성을 높일 것이다. 그리고 HTML은 중요하기에 정보라는 특성에 전념하여 HTML로부터 디자인의 기능을 뺐어 등장하게 되었다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 더욱 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄 간격, 배경 색상, 배열 위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. [1]
역사[편집]
CSS는 1994년 하콤 비움 리(Håkon Wium Lie)가 발명했으며 W3C(World Wide Web Consortium)에서 관리하였다.
- CSS1 : 1996년 12월 W3C에서 권고 사항으로 나왔다. 이 버전은 모든 HTML의 태그에 대한 간단한 시각적 포맷 모델뿐 아니라 CSS의 언어에 대하여 설명한다.
- CSS2 : 1998년 5월 W3C의 권장 사항이 되었으며 CSS1을 기반으로 구축되었다. 이 버전은 프린터 및 청각 장치, 다운로드가 가능한 글꼴, 엘레먼트(element) 위치 지정(positioning) 등을 지원한다.
- CSS3 : 2005년 12월 W3C의 권장 사항이 되었으며 역시 이전 버전이 기반이 되었다. 글자의 특수 효과나 간단한 애니메이션 구현이 가능하게 되었다.
- CSS4 : 하나의 통합된 CSS4 사양이 없이 여러 개의 모듈로 나누어져 있다.
특징[편집]
- Cascading Style Sheet
- 웹 문서에 스타일을 적용하기 위한 언어
- 웹 문서의 내용을 구성하는 html과 웹 문서의 스타일 선언하는 CSS 문법을 분리함으로써 코드를 간결해지기 때문에 오류와 버그의 확률이 줄고 수정이 편리, 유지보수가 용이해진다.
- 위 줄에서부터 스타일 적용되어 마지막에 선언된 스타일이 최종 표현되기 때문에 선언 순서가 중요. [2]
- 골격(태그 + 데이터)과 서식을 분리
종류[편집]
Internal (Embed) 방식[편집]
- 스타일을 적용하려는 특정 문서에 직접 선언
- 선언된 특정 문서에만 스타일이 적용
- 일반적으로 head 요소 내부에 style 태그를 이용
External (Linked) 방식[편집]
- 별도의 CSS 문서를 작성해서 스타일을 적용하려는 html 문서에 연결
- 한 번의 스타일 선언으로 여러 html 문서에 동일한 스타일 적용 가능
- head 요소 안에 link 태그를 이용
Inline 방식[편집]
- 스타일을 적용하려는 태그에 직접 선언하는 방식
- style이라는 태그 속성을 이용
- 유지보수가 불편, 코드가 길어짐
- 응급조치, 테스트용으로 사용 [2]
장단점[편집]
장점[편집]
- 기능의 확장성 : HTML의 대부분의 요소의 단순한 기능에 다양한 기능을 추가할 수 있으며 심지어는 기능 변경도 가능하여 홈페이지 제작자는 자신만의 독특한 문서형식을 설계 할 수 있으며, HTML에서 지원하지 않는 다양한 폰트 사이즈와 줄 간격 등의 기능도 사용 가능합니다.
- 양식의 모듈화 : 웹사이트 전체에 문서의 양식을 통일감 있게 사용할 수 있고 스타일 시트를 HTML에 부가적으로 활용하여 일정한 양식을 CSS로 작성해 놓고 문서마다 불러서 사용하면 전체 문서가 같은 양식으로 통일감 있게 구성될 수 있습니다.
- 간편성 : 문서의 형식을 쉽고 다양하게 구성할 수 있고 복잡한 형태의 표도 쉽게 제작하며 각 요소를 문서의 원하는 위치에 자유롭게 배치할 수 있다.
단점[편집]
- 양대 브라우저가 다른 방식으로 지원 : HTML에서도 마찬가지로 양대 브라우저의 호환성에 약간의 문제를 가지고 있지만, 특히 CSS는 넷스케이프(Netscape)와 [[인터넷 익스플로러](Internet Explorer)가 서로 다른 방식으로 스타일 시트를 지원하고 있기 때문에 문제가 많다. 이러한 문제점을 최소화하기 위해서는 양대 브라우저가 공통적으로 사용하는 방식만을 사용하는 것이 좋으며, 일단 한 브라우저를 중심으로 제작한 다음 다른 브라우저에서도 무난하게 표현할 수 있도록 약간의 수정 보완을 해주는 것이 최선의 방법이 될 수 있다.[3]
문제점과 대안[편집]
@import 규칙으로 불러들인 CSS 파일은 그 개수 만큼 서버에서 요청이 늘어남으로써 로딩 속도에 상당한 악영향을 미치고 @import 규칙은 병렬방식이 아닌 직렬 방식으로 다운로드하기 때문에 전체 로딩 시 그만큼의 로딩 시간도 길어지는 문제점이 있다. 심지어, 인터넷 익스플로러에서는 다운로드 순서가 다르게 작동하는 문제가 발생하기도 한다. 다시 말해서, 각 역할에 따라 분리한 CSS 파일을 웹 문서에서 적용할 때는 @import 규칙으로 호출하면 안 되고, HTML 문서 내에 <link> 태그 요소를 사용하여 호출하는 방법을 권장한다. [4]
평가와 전망[편집]
과거보다 훨씬 수요가 줄어들고 있다. 특히 소득 수준이 높은 국가들에서 뚜렷한 하락세를 보이며, 반대로 브라질이나 러시아 등 소득 수준이 높지 않은 국가들에서는 여전히 성장세를 이어나가고 있다. 일반적으로 볼 때, 기술의 하락세가 일단 시작되고 나면 회복이 쉽지 않다. IT는 유행처럼 돌고 도는 것이 아니기 때문이다. 그렇다고 해당 기술이 완전히 죽음을 맞이한다는 것은 아니다. 단지 더 이상의 성장세를 누리지 못하게 된다는 의미일 뿐이다. [5]
각주[편집]
- ↑ 〈CSS〉,《네이버 지식백과》
- ↑ 2.0 2.1 티스토리 - https://hihellen.tistory.com/16
- ↑ CSS의 정의 및 특징 - https://www.1day.co.kr/board/skin/ggambo6210_board/print.php?id=lec_html&no=63
- ↑ 야물딱진 주리부리 라잎 : 네이버 블로그 - https://gmlthd0908.blog.me/221316306915
- ↑ 2018년 IT채용 시장 전말 '뜨는 기술 VS 지는 기술' - http://www.ciokorea.com/insider/36782
참고자료[편집]
- 〈CSS〉,《네이버 지식백과》
- [CSS 1] CSS 특징 및 적용방법 :: - https://hihellen.tistory.com/16
- 야물딱진 주리부리 라잎 : 네이버 블로그 - https://gmlthd0908.blog.me/221316306915
- 2018년 IT채용 시장 전말 '뜨는 기술 VS 지는 기술' - http://www.ciokorea.com/insider/36782
- CSS의 정의 및 특징 - https://www.1day.co.kr/board/skin/ggambo6210_board/print.php?id=lec_html&no=63
같이 보기[편집]
