🧡 CSS
CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당하는, 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다. 더 나은 사용자 경험(UX)를 제공하기 위해 적절히 구성하는 것은 프론트엔드 개발자로써 해야하는 일입니다.
💚CSS와 FE
-
CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.
웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 해야합니다. 개발자는 사용자 인터페이스부터 만들게 됩니다. -
사용자 인터페이스(UI) : User Interface, 인터페이스는 컴퓨터와 교류하기 위한 연결고리 입니다. CLI(command lind interface)로 적어 작동시키던 것들을 일반 사용자도 쉽게 사용할 수 있게 만든 것입니다. UI가 없으면 애플리케이션과 사용자가 소통하는 것이 어렵습니다.
-
직관적이고 쉬운 UI제작은 프론트엔드(FE)의 기본 소양입니다.
웹 프론트엔드 개발자는 사용자와 애플리케이션 간 소통에 필요한 UI제작이 기본 소양입니다. 아무리 훌륭한 내부 기능을 가졌더라도 UI가 없으면 소용이 없습니다. -
좋은 사용자경험(UX)는 직관적이고 쉬운 UI에서 나옵니다.
-
그렇다고 디자인을 배워야 하는 것은 아닙니다.
검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있고(free app icon), 네모나 동그라미 등의 도형은 CSS로도 쉽게 만들 수 있습니다. -
프론트엔드 개발자가 되려면 다음과 같은 역량이 필요합니다.
① 컴포넌트 기능별로 묶어서 제작
② 화면의 구성이나 배치(레이아웃 디자인)
③ 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일
④ 정렬이나 배색에 대한 감각
⑤ UX에 대해 고민해보고 분석해 본 경험 -
CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중에 하나입니다.
💚 CSS 구문
- CSS는 반드시 HTML이 있어야만 동작할 수 있습니다.
CSS의 문법 구성
(출처 : codestates)
👀 Selector(셀렉터)에 대해서는 다른 포스트에서 다룹니다.
CSS 선언
셀렉터(Selector)
페이지의 일부 요소를 선택하기 위해 선언블록에 붙이는 조건입니다. 셀렉터(선택자)와 선언블록을 묶어 규칙집합(규칙)이라고 합니다. 페이지의 요소는 여러 선택자와 주어진 속성을 다른 값으로 여러 번 포함하는 여러 규칙으로 CSS와 HTML이 충돌할 수 있으므로 CSS표준은 종속 알고리즘에 따라 우선 적용 순서를 정의하고 있습니다.
선언
속성(Property) 와 속성값(value)을 선언이라고 부릅니다. 모두 대소문자를 구분하며 속성과 값은 :(콜론)으로 구분하며, 글자 사이의 공백은 무시합니다. 속성마다 유효한 값이 정의되어 있으므로, 유효하지 않은 값이 오면 그 선언은 부적합하다고 판단되어 무시합니다.
선언블록
내부의 선언들은 ;(세미콜론)으로 구분합니다. (마지막 선언의 경우 생략해도 되지만 선언을 추가하는 상황을 대비해 붙여 주는 것이 좋은 스타일로 여겨지는 경우가 있습니다.) 선언 블록에 아무런 선언도 들어가지 않은 빈 상태로도 존재할 수 있습니다.
💚 CSS 파일 연결
- CSS 파일을 HTML 파일에 연결할 때에는, link 태그를 이용합니다.
CSS 스타일 적용
인라인 스타일
: (HTML파일에서) 같은 줄에서 스타일을 적용하는 것입니다.
<nac style="background: #eee; color: blue;> ... </nav>내부 스타일 시트
: (HTML파일에서) CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style>요소 내에 작성하는 것 것입니다.
외부 스타일 시트
: 별도의 CSS 파일을 작성하는 것입니다.
- 관심사 분리(컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙)측면에서 외부 스타일 시트를 권장합니다. 다만, 파일로 굳이 구분하지 않아도 될 만큼 적은 CSS를 사용하는 경우에 인라인 스타일을 사용합니다.
🎀 관심사 분리
- 관심사 : 컴퓨터 프로그램 코드에 영향을 미치는 정보의 집합이다.
- 관심사 분리 : 정보를 잘 정의된 인터페이스가 있는 코드 부분 안에 캡슐화(정보숨기기의 한 수단) 시키는 것이다. 정보 시스템의 계층화된 디자인은 관심사 분리의 다른 구현이다.
- 관심사 분리를 이용하면 일반적으로는 코드단순화 및 유지보수에서 더 높은 수준의 자유가 생긴다. → 모듈이 인터페이스 뒤에서 관심사의 세세한 부분을 숨기기 때문에 세세사항을 모르더라도 상응하는 변경을 취하지 않더라도 하나의 관심사 코드부분을 개선하거나 수정할 수 있게 된다.
