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을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 더욱 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄 간격, 배경 색상, 배열 위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

역사

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 문법을 분리함으로써 코드를 간결해지기 때문에 오류와 버그의 확률이 줄고 수정이 편리, 유지보수가 용이해진다.
• 위 줄에서부터 스타일 적용되어 마지막에 선언된 스타일이 최종 표현되기 때문에 선언 순서가 중요.
• 골격(태그 + 데이터)과 서식을 분리

종류

Internal (Embed) 방식

• 스타일을 적용하려는 특정 문서에 직접 선언
• 선언된 특정 문서에만 스타일이 적용
• 일반적으로 head 요소 내부에 style 태그를 이용

External (Linked) 방식

• 별도의 CSS 문서를 작성해서 스타일을 적용하려는 html 문서에 연결
• 한 번의 스타일 선언으로 여러 html 문서에 동일한 스타일 적용 가능
• head 요소 안에 link 태그를 이용

Inline 방식

• 스타일을 적용하려는 태그에 직접 선언하는 방식
• style이라는 태그 속성을 이용
• 유지보수가 불편, 코드가 길어짐
• 응급조치, 테스트용으로 사용

장단점

장점

• 기능의 확장성 : HTML의 대부분의 요소의 단순한 기능에 다양한 기능을 추가할 수 있으며 심지어는 기능 변경도 가능하여 홈페이지 제작자는 자신만의 독특한 문서형식을 설계 할 수 있으며, HTML에서 지원하지 않는 다양한 폰트 사이즈와 줄 간격 등의 기능도 사용 가능합니다.
• 양식의 모듈화 : 웹사이트 전체에 문서의 양식을 통일감 있게 사용할 수 있고 스타일 시트를 HTML에 부가적으로 활용하여 일정한 양식을 CSS로 작성해 놓고 문서마다 불러서 사용하면 전체 문서가 같은 양식으로 통일감 있게 구성될 수 있습니다.
• 간편성 : 문서의 형식을 쉽고 다양하게 구성할 수 있고 복잡한 형태의 표도 쉽게 제작하며 각 요소를 문서의 원하는 위치에 자유롭게 배치할 수 있다.

단점

• 양대 브라우저가 다른 방식으로 지원

HTML에서도 마찬가지로 양대 브라우저의 호환성에 약간의 문제를 가지고 있지만. 특히 CSS는 Netscape와 Explorer가 서로 다른 방식으로 스타일 시트를 지원하고 있기 때문에 문제가 많습니다. 이러한 문제점을 최소화하기 위해서는 양대 브라우저가 공통적으로 사용하는 방식만을 사용하는 것이 좋으며, 일단 한 브라우저를 중심으로 제작한 다음 다른 브라우저에서도 무난하게 표현할 수 있도록 약간의 수정 보완을 해주는 것이 최선의 방법이 아닐까 생각한다. 

문제점과 대안

@import 규칙으로 불러들인 CSS 파일은 그 개수 만큼 서버에서 요청이 늘어남으로써 로딩 속도에 상당한 악영향을 미치고 @import 규칙은 병렬방식이 아닌 직렬 방식으로 다운로드하기 때문에 전체 로딩 시 그만큼의 로딩 시간도 길어지는 문제점이 있다. 심지어, 인터넷 익스플로러에서는 다운로드 순서가 다르게 작동하는 문제가 발생하기도 한다. 다시 말해서, 각 역할에 따라 분리한 CSS 파일을 웹 문서에서 적용할 때는 @import 규칙으로 호출하면 안 되고, HTML 문서 내에 <link> 태그 요소를 사용하여 호출하는 방법을 권장한다.

평가와 전망

과거보다 훨씬 수요가 줄어들고 있다. 특히 소득 수준이 높은 국가들에서 뚜렷한 하락세를 보이며, 반대로 브라질이나 러시아 등 소득 수준이 높지 않은 국가들에서는 여전히 성장세를 이어나가고 있다. 일반적으로 볼 때, 기술의 하락세가 일단 시작되고 나면 회복이 쉽지 않다. IT는 유행처럼 돌고 도는 것이 아니기 때문이다. 그렇다고 해당 기술이 완전히 죽음을 맞이한다는 것은 아니다. 단지 더 이상의 성장세를 누리지 못하게 된다는 의미일 뿐이다.

참고자료

• 〈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

같이 보기

• HTML
• 웹브라우저

이 CSS 문서는 프로그래밍에 관한 토막글입니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 이 문서의 내용을 채워주세요.

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반