CSS 뜻과 개념에 대해서 이야기해봅시다.
CSS 뜻과 개념 알기
CSS 뜻(Cascading Style Sheets)은 HTML과 함께 사용하는 언어로 웹 페이지의 레이아웃과 스타일을 디자인하고 정의하는데 사용하는 스타일 시트 언어를 의미합니다.
CSS는 웹페이지의 디자인을 꾸미기 위해서 사용하는 기술적인 방법이 됩니다. 웹페이지의 내용은 기본적으로 HTML(Hyper Text Markup Language) 언어로 작성하지만 CSS를 추가적으로 활용하여 웹페이지의 스타일을 결정하고 정의하여 구성합니다.
CSS(Cascading Style Sheet)는 일종의 스타일 시트(Style Sheet)라고 부릅니다.
HTML만으로는 한계점이 있기 때문에 CSS를 같이 활용하면 같은 내용이더라도 디자인을 크게 바꿀 수 있습니다. HTML과 CSS는 외관과 구조를 분리하기 위해서 CSS를 별도의 파일로 만드는 경우가 많습니다.
CSS를 사용하면 디자인을 지정할 수 있을 뿐만 아니라 PC와 모바일, 프린터 등 사용자가 이용하는 단말기에 따라서 스타일도 전환시킬 수 있습니다.
CSS 뜻과 개념 설명
CSS 뜻(Cascading Style Sheets)은 웹 페이지의 전체적인 스타일에 대해서 미리 정의해서 저장해둔 문서 또는 이를 작성하기 위한 언어를 의미합니다.
CSS는 웹사이트의 웹페이지 내에 있는 색상, 폰트, 간격, 레이아웃을 지정하고 정의하여 웹사이트의 웹페이지를 보다 시각적으로 화려하고 멋지게 만들어줄 수 있도록 하는 역할을 하는 언어입니다.
CSS는 기본적을 3가지 구성 요소로 이루어져 있습니다.
CSS의 3가지 구성 요소는 선택자, 속성, 값입니다.
[CSS의 3가지 구성 요소]
| 구분 | 내용 |
| 선택자(Selector) | 스타일을 적용할 HTML 요소를 선택하는 CSS 요소 |
| 속성(Properties) | 스타일을 적용할 요소의 특성을 나타내는 CSS 요소 |
| 값(Values) | 스타일의 효과를 결정할 수 있는 CSS 속성에 대입하는 값 |
선택자(Selector)는 HTML 요소의 일부에 대해 스타일을 적용하는 대상을 지정하기 위해서 사용되는 개념이고 요소명과 ID, 클래스 명 등에 대해서 스타일을 지정할 수 있습니다.
CSS(Cascading Style Sheet)를 통해 웹페이지의 스타일링이 가능하고 레이아웃을 구성할 수 있으며 반응형 디자인을 구현할 수 있습니다. 특히 CSS3에서는 애니메이션 효과와 전환 기능을 활용하여 동적인 효과를 보다 강화시킬 수 있습니다.
[CSS의 주요 기능] ① 스타일링(웹페이지 디자인) ② 레이아웃 구성 ③ 반응형 디자인(미디어 쿼리 사용) ④ 애니메이션 효과와 전환 기능
CSS는 HTML(Hyper Text Markup Language) 언어와 함께 사용해야 합니다. 웹페이지를 만들기 위해서는 기본적으로 HTML 언어로 만들게 되지만 기존의 HTML의 경우 웹 문서를 다양하고 화려하게 설계하는데는 많은 한계가 있기 때문에 이를 보완할 수 있는 CSS를 함께 사용하여 웹페이지 문서를 만들게 됩니다.
HTML5에서는 기능이 보다 강화되어 CSS의 기능을 많이 흡수하고 있기는 하지만, 기존의 HTML를 이용하여 웹페이지를 만들 때 전체적인 틀에서 세세한 글꼴과 색상을 일일이 하나하나 지정해줘야 하는 구조이기 때문에 불편한 부분이 많습니다.
하지만 CSS를 활용하게 되면 한꺼번에 일괄로 변경 내용을 적용하거나 변경할 수 있는 효과를 만들 수 있습니다. 이를 통해 웹페이지 문서 전체의 일관성과 통일성을 유지할 수 있고 웹페이지 제작 시간을 보다 빠르게 할 수 있습니다.
웹 개발 영역에서는 CSS를 활용하여 보다 화려한 디자인으로 웹사이트와 웹페이지를 구성할 수 있고 글자의 폰트 크기와 종류, 색상, 줄 간격, 배경 색상, 배열 위치 등 구성 내용들을 자유롭게 설정하거나 변경할 수 있으며 웹사이트를 유지하고 운영하는데도 효과적입니다.
CSS핵은 웹 브라우저의 사용 차이에 따른 디자인 차이를 흡수하기 위해서 웹브라우저에 존재하는 오류를 활용하여 레이아웃을 정돈하는 방법을 의미합니다.