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를 지원하여 다양한 환경에서 웹 페이지를 일관되게 표시할 수 있습니다. 이는 웹 디자이너와 개발자가 다양한 브라우저에서 일관된 사용자 경험을 제공할 수 있게 합니다.

기본 구조

CSS는 HTML과 함께 사용되며, HTML 요소에 적용되는 스타일 규칙을 정의합니다. 스타일 규칙은 선택자(selector)와 선언부(declaration)로 구성되어 있습니다. 선택자는 어떤 HTML 요소에 스타일을 적용할지를 지정하고, 선언부에는 해당 요소에 적용할 스타일 속성과 값이 정의됩니다.

선택자

CSS에서 선택자는 HTML 문서에서 특정 요소를 선택하는 데 사용됩니다. 여러 종류의 선택자가 있으며, 각각의 역할과 사용법이 다릅니다.

형식 선택자

HTML 태그 이름으로 요소를 선택합니다.

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는 다양한 스타일 속성을 제공하며, 이를 활용하여 웹 페이지의 다양한 요소들을 스타일링할 수 있습니다.

개요