CSS란?

※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음.

 

 

 프론트엔드 영역의 대표적인 언어인 HTML, CSS, JavaScript는 각각의 역할이 있다. HTML은 웹의 뼈대와 구조를 만들고, CSS는 그 구조를 가지고 스타일링을 통해 사용자 중심의 인터페이스를 만든다. 마지막으로 JavaScript는 정적인 페이지를 동적인 페이지로 만들어 페이지 간 혹은 콘텐츠 간의 상호연결을 가능하게 한다. 이러한 점에서 프론트엔드 영역의 궁극적인 목적은 UI/UX를 고려하여 사용자에게 편리한 사용 경험을 제공하는 웹을 개발을 하는 것이라고 할 수 있다. 그 중에 스타일링 언어인 CSS는 UI/UX를 고려하여 설계하는 것과 가장 밀접한 작업이 아닐까 싶다.

 

 

CSS(Cascading Style Sheets)

웹페이지의 디자인 요소를 시각화하는 스타일시트 언어이다. HTML이 웹페이지의 뼈대와 구조를 만들었다면 CSS는 만들어진 구조의 디자인을 정하고 꾸미는 역할을 한다.

CSS는 스타일링을 위한 도구이므로 독립적일 수 없으며, 항상 HTML과 동반되어야 한다.

 

CSS의 문법 구조

 

사용자 인터페이스(UI; User Interface)와 사용자 경험(UX; User eXperience)

 초기의 컴퓨터 사용자들은 컴퓨터와 소통하기 위해 CLI(Command Line Interface)를 사용했다. 버튼이나 마우스 없이 오로지 검은 화면에 키보드로만 명령을 입력했기 때문에 가독성은 물론 접근성 역시 좋지 않았다. 이후 컴퓨터의 발전과 함께 새로운 입력도구의 등장과 발전으로 UI(User Interface)가 등장했다. UI는 기존의 키보드를 통한 명령어 전달에 그치지 않고 그림 등을 이용한 버튼을 클릭하는 방식으로, 사용자는 프로그램을 보다 직관적이고 쉽게 사용할 수 있다. UI와 함께 빼놓을 수 없는 개념인 UX(User eXperience)도 있다. UX는 사용자의 경험을 통한 종합적인 만족도를 뜻한다. UX를 고려하여 개발한다는 것은 사용자의 사용 경험을 토대로 사용자의 입장에서 개발한다는 의미이다. 사용자가 서비스 이용에 온전히 집중할 수 있게 불편함을 최소화하는 것이 UI/UX를 고려한 개발의 기본이라고 할 수 있다.