[CSS] CSS에 대해 가장 먼저 알아야 할 것은?

in Study on Study, JavaScript
[CSS] CSS에 대해 가장 먼저 알아야 할 것은?

CSS(Cascading Style Sheets)는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 구성할 수 있다.

CSS와 프론트엔드 개발

사용자 인터페이스 (UI: user interface)

인터페이스는 컴퓨터와 교류하기 위한 연결고리이다.
버튼도, 마우스도 없던 시대 개발자는 자기가 만든 애플리케이션과 소통하기 위해 CLI를 사용했다. (키모드로 작성한 비밀 암호같은 코드를 적어 엔터를 눌러야 애플리케이션 작동 가능했음)
그러나 오늘날에 이르러 일반 사용자도 쉽게 사용할 수 있는 인터페이스가 개발되었고 이를 ‘사용자 인터페이스, UI’라고 부르게 되었다.

직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다.
웹 프론트엔드 개발자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당함.
아무리 훌륭한 내부 기능을 가지고 있더라도 UI가 없으면 소용이 없는 것임.
즉, 사용자가 애플리케이션을 사용하게 하려면 UI가 꼭 필요하다.

좋은 사용자 경험 (UX; user experience)은 직관적이고 쉬운 UI에서 나온다.
복잡한 내용을 단순하게 구분 짓고, 페이지를 나누어 사용자가 한 페이지에서 볼 수 있는 내용을 제한하여 사용자가 내용을 파악하기 쉽고, 편안한 구조를 만들어야 한다.

불행일 수도, 다향일 수도 있는 점은 CSS에 정답은 없다는 것이다.
모범사례가 존재하기는 하지만 어떤 사례들은 서로 상충되기도 하고, 한 요소만 건드렸는데 의도치 않은 사이드 이펙트가 우후죽순 생겨나기도 한다. 그래서 CSS는 쉽고도 어렵다.

텍스트 꾸미기

색상

color : 글자의 색상을 변경하는 속성
background-color : 배경 색상
border-color : 테두리 색상

글꼴

font-family : 글꼴의 속성

크기

font-size : 글자 크기 변경하는 속성

기타

font-weight : 굵기
text-decoration : 밑줄, 가로줄
letter-spacing : 자간 line-height : 행간

절대단위와 상대단위

글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 중요하다.
크기의 단위는 절대단위와 상대단위로 나뉜다.

  • 절대단위 : px, pt 등
  • 상대단위 : %, em, rem, ch, vw, vh 등

글꼴 사이즈 정할 때는?

  1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적 크기로 정하는 경우 px(픽셀)을 사용한다.
    픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.
    • 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정해도 글꼴 크기는 항상 일정함
    • 사용자의 환경에 따라 일반 텍스트보다 작게보일 수 있음
    • 기본적으로 고해상도에서는 1px가 모니터의 한 점보다 크게 upscale되기 때문에 뚜렷하지 못한 형태로 출력되기도 함 => 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리함.
  2. 일반적인 경우 상대 단위인 rem 이 좋다.
    1rem = 브라우저의 기본 글자 크기 (root의 글자 크기)

em은 부모 엘리먼트에 따라 상대적으로 크게가 변하므로 계산이 어려움
rem은 root의 글자 크기에 따라서만 상대적으로 변함

화면 사이즈를 정할 때는?

1. 반응형 웹(responsive web)에서 기준점을 만들 때
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트.
ex) 데스크탑, 폰, 가로모드, 타블렛, 등…
이럴 땐 디바이스 크기별로 CSS를 달리 적용해야 함.
이 때, 디바이스 크기를 나누는 기준을 보통px로 정한다.

2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
vw, vh를 사용하라.
웹사이트의 보이는 영역 = viewport
vw : viewport width
1vw = 보이는 영역 너비의 1/100
vh : viewport height
1vh = 보이는 영역 높이의 1/100

*<body>태그에서 쓰이는 %는 HTML이 차지하는 모든 영역(스크롤해서 보이는 곳까지 모두)포함했을 때의 비율이다.

©lunadein2022 2022. All rights reserved.