CSS

CSS(Cascading Style Sheets)

CSS(Cascading Style Sheets)

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)와 [[인터넷 익스플로러](Internet 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 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 산업, 기업, 단체, 업무, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반