CSS

우리는 일상생활에서 다양한 웹 사이트와 웹 기반의 서비스를 이용하게 됩니다. 온라인 쇼핑, 뉴스, 소셜 네트워킹 서비스, 동영상 스트리밍 서비스 등, 이 모든 웹 서비스들은 우리의 생활을 편리하게 만들어줍니다.

이러한 웹 서비스들을 이용할 때, 우리가 처음 마주치게 되는 것은 바로 웹페이지의 프론트엔드(링크 업데이트 예정)입니다. 프론트엔드는 사용자가 직접적으로 보고, 느끼며, 조작하는 웹 서비스의 사용자 인터페이스를 구성하는 영역입니다. 이는 웹 서비스의 외관을 결정짓는 부분이며, 사용자가 웹 서비스를 얼마나 편리하고 즐겁게 이용할 수 있을지를 결정짓는 중요한 요소입니다.

프론트엔드는 다양한 요소들로 구성되어 있습니다. 그 중에서도 특히 웹 페이지의 모양과 디자인을 결정하는 것은 CSS, 즉 Cascading Style Sheets입니다. HTML이 웹 페이지의 구조를 결정한다면, CSS는 그 디자인을 결정합니다. CSS는 텍스트의 색상, 배경 이미지, 폰트 스타일, 레이아웃 배치 등 웹 페이지의 시각적 표현을 조절하고 제어하는 역할을 합니다.

개요

CSS는 Cascading Style Sheets의 약자로, HTML 문서의 시각적 표현을 위한 스타일 시트 언어입니다. HTML은 웹 페이지의 구조와 내용을 정의하는 반면, CSS는 웹 페이지의 형식, 레이아웃, 글꼴, 색상, 애니메이션 등을 제어하여 시각적으로 매력적인 페이지를 만들 수 있도록 합니다.

CSS 역사

CSS는 월드와이드웹 컨소시엄(W3C)에서 개발된 스타일 시트 언어로, 초기에는 HTML에 스타일을 적용하기 위한 여러 실험적인 방법들이 있었습니다. 하지만 CSS가 등장하면서 스타일링과 구조를 분리할 수 있게 되었고, 이는 웹 개발에서 중요한 표준으로 자리잡았습니다.

1994년: CSS를 처음 제안한 사람은 Håkon Wium Lie입니다. 그는 웹 페이지의 스타일링을 위한 새로운 방법으로 CSS를 제안하였습니다.
1996년: W3C에서 CSS 1.0 권고안을 발표했습니다. 이 권고안은 웹 페이지의 기본적인 스타일링을 위한 규칙들을 포함하고 있었습니다.
1998년: CSS 2.0 권고안이 발표되었습니다. 이 버전에서는 미디어 타입, 절대 단위 등의 새로운 기능들이 추가되었습니다.
2001년: CSS 2.1 권고안이 발표되었습니다. 이 버전에서는 CSS 2.0의 일부 문제점들이 수정되고, 더욱 정교한 스타일링 기능이 추가되었습니다.
2009년: CSS 3.0 권고안이 발표되었습니다. 이 버전에서는 애니메이션, 그림자, 반응형 웹 디자인 등의 고급 기능들이 추가되었습니다.
2011년: CSS 3.1 권고안이 발표되었습니다. 이 버전에서는 CSS 3.0의 일부 문제점들이 수정되었으며, 그리드 레이아웃 등의 새로운 기능들이 추가되었습니다.
2015년: CSS 3.2 권고안이 발표되었습니다. 이 버전에서는 CSS 3.1의 일부 문제점들이 수정되었으며, 변수, 계산 함수 등의 새로운 기능들이 추가되었습니다.
2017년: CSS 3.3 권고안이 발표되었습니다. 이 버전에서는 CSS 3.2의 일부 문제점들이 수정되었으며, 색상 함수, 플렉스 박스 등의 새로운 기능들이 추가되었습니다.
2019년: CSS 3.4 권고안이 발표되었습니다. 이 버전에서는 CSS 3.3의 일부 문제점들이 수정되었으며, 미디어 쿼리, 그리드 레이아웃 등의 새로운 기능들이 추가되었습니다.
2020년: CSS 3.5 권고안이 발표되었습니다. 이 버전에서는 CSS 3.4의 일부 문제점들이 수정되었으며, 색상 스페이스, 레이아웃 등의 새로운 기능들이 추가되었습니다.
현재: CSS 4.0 초안이 개발 진행 중입니다. 이 버전에서는 웹 디자인의 새로운 표준을 지향하며, 다양한 새로운 기능들이 기대되고 있습니다.

특징

CSS는 다음과 같은 특징들로, HTML과 분리된 스타일 정의를 통해 일관성 있는 디자인을 유지하고, 다양한 레이아웃을 구현할 수 있으며, 웹 페이지의 접근성을 향상시키고, 다양한 브라우저에서 일관된 표시를 보장하여 웹 개발의 효율성을 높입니다.

HTML과 분리된 스타일 정의: CSS는 HTML 코드와 분리되어 스타일 정보를 별도의 스타일 시트에 기록합니다. 이로써 HTML 코드는 구조에만 집중할 수 있으며, 스타일 정보의 변경이 필요할 때 HTML 코드를 건드리지 않고 스타일 시트를 수정할 수 있어 가독성과 유지 관리성을 향상시킵니다.
일관성 유지: CSS를 사용하면 동일한 스타일을 여러 페이지에 쉽게 적용할 수 있습니다. 이는 웹 사이트의 전체적인 디자인 일관성을 유지하는 데 도움이 되며, 사용자들에게 일관된 경험을 제공합니다.
다양한 레이아웃 구현: CSS를 이용하면 웹 페이지의 레이아웃을 자유롭게 디자인할 수 있습니다. 플렉스박스(Flexbox)나 그리드(Grid)와 같은 레이아웃 시스템을 활용하여 다양한 형식의 레이아웃을 구현할 수 있습니다.
접근성 향상: CSS는 웹 페이지의 시각적인 표현을 담당하기 때문에, 시각 장애인을 포함한 다양한 사용자들이 보다 쉽게 웹 페이지를 이해하고 접근할 수 있도록 도와줍니다. 또한, CSS를 사용하여 구조와 스타일을 분리함으로써 스크린 리더 등 보조 기술과의 호환성을 높일 수 있습니다.
브라우저 호환성: 대부분의 웹 브라우저는 CSS를 지원하여 다양한 환경에서 웹 페이지를 일관되게 표시할 수 있습니다. 이는 웹 디자이너와 개발자가 다양한 브라우저에서 일관된 사용자 경험을 제공할 수 있게 합니다.

p {
    /[italic] 스타일 속성과 값 [/italic]/
}

ID 선택자

# 기호와 함께 ID 속성 값을 사용하여 요소를 선택합니다.

#myElement {
    /[italic] 스타일 속성과 값 [/italic]/
}

클래스 선택자

. 기호와 함께 클래스 속성 값을 사용하여 요소를 선택합니다.

.myClass {
    /[italic] 스타일 속성과 값 [/italic]/
}

후손 선택자

공백 문자를 사용하여 상위 요소와 후손 요소를 선택합니다.

div p {
    /[italic] div 안에 있는 모든 p 요소 [/italic]/
}

자식 선택자

> 기호를 사용하여 직접적인 자식 요소를 선택합니다.

div > p {
    /[italic] div 바로 아래에 있는 p 요소 [/italic]/
}

인접 형제 선택자

+ 기호를 사용하여 직접적인 다음 형제 요소를 선택합니다.

h2 + p {
    /[italic] h2 다음에 나오는 첫 번째 p 요소 [/italic]/
}

일반 형제 선택자

~ 기호를 사용하여 모든 형제 요소 중 선택 요소 다음에 오는 요소를 선택합니다.

h2 ~ p {
    /[italic] h2 다음에 나오는 모든 p 요소 [/italic]/
}

선언 블록

선택자로 선택된 요소에 적용할 스타일 속성과 값을 정의합니다. 선언 블록은 중괄호 {}로 둘러싸여 있으며, 각 속성-값 쌍은 세미콜론 ;으로 구분됩니다.

selector {
    property1: value1;
    property2: value2;
    /[italic] 추가적인 속성과 값 [/italic]/
}

이러한 구조를 통해 CSS는 HTML 요소를 선택하고 해당 요소에 스타일을 적용하여 웹 페이지의 디자인을 조정합니다.

속성: 스타일을 정의할 특징을 나타냅니다.
값: 속성에 적용할 값을 나타냅니다.
중괄호: 선언 블록을 시작하고 끝냅니다.
세미콜론: 각 속성-값 쌍을 구분합니다.

구문

CSS 규칙은 선택자와 중괄호({})로 둘러싸인 선언부로 이루어져 있습니다.

h1 {
    color: blue;
    font-size: 24px;
}

예를 들어, 위와 같이 사용시 h1 요소의 텍스트 색상을 파란색으로, 글꼴 크기를 24px로 지정합니다.

CSS 스타일 속성

CSS는 다양한 스타일 속성을 제공하여 웹 페이지의 시각적 표현을 제어할 수 있습니다. 대표적인 속성으로는 다음과 같습니다.

글꼴 관련 속성

font-family: 텍스트의 글꼴을 지정합니다.
font-size: 텍스트의 크기를 지정합니다.
font-weight: 텍스트의 굵기를 지정합니다.
font-style: 텍스트의 스타일(기울임, 진하게 등)을 지정합니다.

색상 관련 속성

color: 텍스트의 색상을 지정합니다.
background-color: 요소의 배경색을 지정합니다.
text-align: 텍스트의 정렬 방식을 지정합니다.

크기 및 위치 관련 속성

width: 요소의 너비를 지정합니다.
height: 요소의 높이를 지정합니다.
margin: 요소의 바깥 여백을 지정합니다.
padding: 요소의 내부 여백을 지정합니다.

이 외에도 CSS는 다양한 스타일 속성을 제공하며, 이를 활용하여 웹 페이지의 다양한 요소들을 스타일링할 수 있습니다.

개요