728x90
CSS의 역할
앞선 HTML에 대해서 설명할 때 HTML 구조를 잡아주는 역할을 하게된다고 배웠다.
반면, CSS는 HTML의 구조에 스타일과 레이아웃을 정해주는 역할을 한다.
CSS는 다른 말로 스타일시트 언어라고 한다.
HTML로만 구성된 화면은 유저 친화적이지도 않고 어떠한 기능도 구현되지 않는다.
즉, 우리는 CSS를 통해 좀 더 스타일리쉬한 UX를 제공할 수 있다.
그렇다면 개발자는 CSS로 무엇을 만들 수 있을까?
사용자 인터페이스(User Interface)와 사용자 경험(User Exprience)
인터페이스는 사물과 사람이 물리적으로 연결될 수 있도록 만들어진 영역이다.
사용자 인터페이스는 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령 할 수 있도록 만든 인터페이스(interface)와 사용자(User)가 합쳐진 언어다.
반면 UX는 사용자가 특정 어플리케이션과 UI를 활용하며 직/간접적으로 경험하고 느끼는 '전체적인 만족도'를 의미한다.
따라서 UI/UX가 좋다는 의미는 "사용자가 쉽게 접근할 수 있도록 만들어졌고, 사용 경험도 좋은 어플리케이션"을 의미한다.
따라서 좋은 어플리케이션을 만들기 위해서는 사용자 친화적으로 어플리케이션을 제작해야하며, 어플리케이션의 버튼과 주요 기능들이 사용자 입장에서 직관적으로 구분되고 쉽게 이해할 수 있게 어플리케이션을 제작해야한다.
CSS코드와 내용 분해해보기
body {
color: blue;
}
- 선택자(Selector)
- 선언블록(Declaration block)
- 속성(Property): 선언부에 선언(Declaration)된 요소에 적용 할 수 있는 내용을 속성이라 한다.
- 속성명(Property name): 색상, 글씨체, 글자 크기
- 속성값(Value)
- 선언 구분자
- 속성(Property): 선언부에 선언(Declaration)된 요소에 적용 할 수 있는 내용을 속성이라 한다.
'Front-End > CSS' 카테고리의 다른 글
와이어 프레임(Wire Frame)과 목업(Mock-up) (0) | 2022.08.24 |
---|---|
[CSS] Flexbox 기술 (0) | 2022.08.24 |
[HTML & CSS] HTML&CSS 레이아웃 설정하기 (0) | 2022.08.24 |