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