CSS란 무엇인가?
이번에는 CSS가 무엇인지 알아보도록 하자.
Cascading Style Sheets
CSS는 Cascading Style Sheets의 줄임말이다.
- Cascading(케스케이딩): 연쇄적으로 적용되는 방식의
- Style Sheets(스타일 시트): 시각적인 규칙 문서
웹페이지의 스타일을 적용하는데 있어서 연쇄적으로 적용되는 방식(Cascading)을 이용하여 필요한 모든 규칙을 모아둔 문서(Style Sheets)라고 할 수 있다.
Cascading?
기본적으로 Cascading은 폭포와 같이 연속적으로 이어지는 즉, 연쇄적인 상황을 뜻한다.
또한 우선순위를 가지고 순서대로 적용되는 모습을 가리키기도 한다.
CSS는 이러한 Cascading 방식을 이용하여 스타일을 적용한다.
CSS를 사용하는 이유
처음에는 HTML 태그의 내부에 직접 스타일을 입력하거나 스타일을 표현하는 태그를 이용하여 웹페이지를 꾸몄다.
이에 코드는 길고 복잡해지고 가독성이 떨어지며 유지보수가 어려워지는 문제가 발생했다.
이러한 문제를 해결하기 위해 하콤 비움 리(Håkon Wium Lie)는 1994년 스타일 시트의 개념을 제안했다.
HTML 문서와 스타일을 분리해 각각의 독립적인 코드를 유지할 수 있으며, 유지보수에 도움이 된다고 생각했다.
그리고 1996년 12월에 W3C에 의해 최초의 CSS 표준이 공식화되었다.
CSS는 실제로 HTML과 스타일을 구분하여 개발자의 능률을 올려주었다.
또한 HTML 파일 내에서 불필요한 스타일성 코드를 제거함으로서 파일의 크기가 줄어들고, 이에 브라우저에서 해당 파일 로딩 속도가 빨라지는 효과도 경험할 수 있다.
또한 검색엔진 및 스크린리더가 쉽게 정보를 파악알 수 있도록 한다.
현대에는 웹페이지를 접속하는 기기가 다양해지면서 각 장치마다 동일한 디자인을 적용시키면서도 적절한 레이아웃을 보여주기 위한 기능도 유용하게 사용된다.
내용 정리
-
웹 페이지의 구조와 스타일의 분리
HTML은 콘텐츠의 구조를, CSS는 디자인을 담당한다.
코드의 가독성과 유지보수성을 향상시킨다. -
일관된 디자인(재사용)
하나의 CSS 파일로 여러 웹페이지에 일관된 디자인을 쉽게 적용할 수 있다.
또한 디자인을 변경해야 할 때 CSS 파일 하나만 수정을 하면 모든 웹페이지를 변경할 수 있다. -
반응형 및 SEO 향상
HTML과 CSS가 각 목적에 의해 구분이 되면서 검색 엔진이나 스크린리더와 같은 보조기술이 콘텐츠를 더 효율적으로 파악할 수 있도록 한다. -
반응형 웹 디자인
미디어 쿼리(Media Queries)와 같은 CSS 기능을 사용하여 다양한 화면 크기와 장치에 맞춰 웹페이지의 레이아웃과 디자인을 유연하게 조절할 수 있다.
(PC, 태블릿, 모바일 등) -
파일 크기 감소 및 로딩 속도 개선
HTML 파일 자체에 작성되던 스타일 코드가 줄어들면서 파일 크기가 감소하고, CSS 파일은 캐싱(caching)하여 페이지 로딩속도를 개선할 수 있다.
CSS 작성 방법
CSS를 작성하는 방법에 대해서 알아보자.
기본 문법
기본적으로 CSS는 HTML 요소를 선택하여 속성을 적용하는 방법을 사용한다.
즉, HTML 요소에게 "너 색을 빨간색으로 바꿔"라는 식으로 적용하게 된다.
/* 너 색을 빨간색으로 바꿔 */
너 {
색: 빨간색;
}이때 값을 바꿀 대상을 선택자(Selector)라고 한다.
이때 어디부터 어디까지가 해당 요소에게 적용되는 것인지 구분하기 위해 중괄호 ({})를 함께 사용한다.
바꾸고자 하는 것을 속성(Property), 바꿀 값을 속성값(Property Value)이라 하며 이는 콜론(:)을 이용하여 대응 시킬 수 있다.
또한 하나를 시킬 때마다 세미콜론(;)을 이용하여 구분한다.
선택자 {
속성: 속성값;
}위와 같은 내용을 p라는 태그에게 적용한다고 하면 아래와 같이 적을 수 있다.
/* p의 색을 빨간색으로 바꿔 */
p {
color: red;
}만약 여러가지의 속성을 적용하고 싶을 때는 세미콜론(;)을 붙여줘야 한다.
세미콜론(;)을 빼먹는다면 스타일이 제대로 적용되지 않는다.
/* p의 색을 빨간색으로, 배경색은 노란색으로 바꿔 */
p {
color: red;
background-color: yellow;
}CSS 속성
CSS에는 아주 다양한 속성들이 존재한다.
처음 50여개의 속성으로 시작해서 지금은 약 350~400여개의 속성이 사용중이라고 한다.
다양한 속성에 대해 알고싶다면 해당 링크를 통해 확인해볼 수 있다.(CSS 속성 종류)
크로스 브라우징
CSS 속성은 HTML, 브라우저와 함께 계속해서 발전하고 있다.
그러다보니 같은 속성이라도 브라우저마다 적용이 되는 정도에 차이가 있다.
예를 들어 크롬에서는 적용이 잘 되는 반면 엣지에서는 적용이 안되는 등의 문제가 생길 수 있다.
일반적으로 웹페이지는 브라우저 혹은 기기의 차이가 있더라도 동일한 화면이 보이도록 하는데, 이러한 작업을 크로스 브라우징이라 한다.
내가 사용하려는 CSS 속성이 브라우저에서 지원을 하는지 궁금할 때는 Can I Use라는 사이트에서 확인할 수 있다.
(Can I Use 사이트 바로가기)
주석
HTML과 마찬가지로 CSS에도 주석을 사용할 수 있다.
임시로 스타일을 비활성화 하거나 스타일의 영역별로 구획을 나누는 경우 사용한다.
혹은 일정 스타일이 수정된 경우 언제 수정되었는지 날짜를 작성하기도 한다.
/* CSS의 주석 */
/*
여러 줄을 주석처리 하는 것도
가능하다.
*/주석을 사용하기 위해서 직접 슬래시(/)와 별(*)을 입력해도 괜찮지만,
Ctrl + / 단축키를 사용하여 주석 처리도 가능하다.
