CSS 기초 : UI와 CSS 속성&단위

HTML이 웹의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 내/외부를 꾸미는 역할이다. 같은 HTML구조를 가지고 있더라도 각기 다른 CSS 파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있다.

 

---

CSS와 프론트엔드 개발

CSS(Cascading Style Sheets)란 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고 난 뒤, 더 나은 사용자 경험(UX, User Experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹페이지를 완성할 수 있다.

 

📌 UI, User Interface

초기 컴퓨터는 자신이 만든 애플리케이션과 소통하기 위해 복잡한 코드를 이용해 소통했다. 하지만 최근은 이미 입력되어 있는 아이디창에 아이디를 입력하거나, 돋보기 키를 눌러 검색을 하는 직관적이고 쉬운 방법을 사용한다. 이렇듯 일반 사용자도 쉽게 사용할 수 있는 인터페이스 앞에 사용자를 붙여 사용자 인터페이스, UI라고 부른다.

 

📌 직관적인 UI에서 UX가 나온다.

글자에 밑줄을 그어 하이퍼링크로 제작하는 것, 사각형 모양 도형 아래 그림자를 주어 버튼처럼 보이게 하고, 레이아웃을 적절히 배치해 콘텐츠가 더욱 잘 보이게 하는 것 등. 프론트엔드 개발자는 직관적인 UI를 사용해 사용자가 애플리케이션을 사용하게 만들어야 한다.

직관적인 UI를 통해 처음 웹페이지를 사용하는 사용자가 헤매지 않고 원하는 콘텐츠를 찾거나 상호작용하게 만드는 것. 즉, 좋은 사용자 경험(User Experience)는 좋은 UI에서 나온다.

 

📌 프론트엔드 개발자가 가지면 좋은 역량

• 컴포넌트를 기능별로 묶어서 제작
• 화면의 구성이나 배치(레이아웃 디자인)
• 굵은 글씨와 같이 타이포그래피나 색상을 적용
• 정렬이나 배색에 대한 감각
• UX에 대해 고민하고, UX가 잘 적용된 웹이나 앱을 분석

 

 

---

CSS 따라하기

• CSS는 스타일링 도구이므로, 독립적으로 기능하지 않고 반드시 HTML 문서가 있어야 한다.
• HTML는 .html을, CSS는 .css 파일 양식을 사용한다.

 

📌 CSS 내용 분해하기

body {
	color : red;
    font-size : 30px;
}

• body : Selector, 내용을 적용할 요소 이름, id, class 등을 선택한다.
• {} : Declaration block, 선언 블록. 선택한 selector에 적용할 내용을 중괄호 {} 안에 작성한다.
• color: red; / font-size: 30px; : Declaration, 선언
  • font-size : porperty, 속성명. 각 속성들은 세미콜론;으로 구분한다. 예시 외에도 정렬, 서체, 줄간격, 여백 등 굉장히 다양하다.
  • 30px : font-size라는 속성의 value, 속성값. 속성값은 속성에 따라 다른 양식을 갖는다. 크기는 px나 %를 사용하고, 색상은 16진수, RGB, 색상이름을 사용하는 등.

 

📌 CSS의 여러 속성들

• color : red; 글자 색을 바꾸는 속성, 색상값에는 여러 형태가 들어간다. 
  • red, orange, blue 등 색상을 나타내는 단어 (단어로 나타낸 색상 참고)
  • #ff0000, #b9de32 등  16진수 표기법, HEX 코드
  • rgba(152, 96, 0, 0.5) 순서대로 Red, Green, Blue, 투명도를 나타냄 
• backgroud-color : #565656; 배경 색을 바꾸는 속성 (background-color와 backgroud 속성의 차이점을 알아보자)
• font-size:80%; 글자 크기 변경. 여러 단위가 사용된다. (글자 크기 참고 자료)
  • small, medium, large 등 absolute-size
  • smaller, larger 등 relative-size
  • px, em, % 등의 단위
• text-align : center; 텍스트 가운데 정렬을 하는 속성
• text-decoration; 밑줄, 가로줄 등 글자를 꾸미는 속성
• letter-spacing; 글자 사이의 간격, 자간을 조절하는 속성
• line-height; 줄과 줄 사이의 간격, 행간을 조절하는 속성
• font-family: ""; 서체를 바꾸는 속성.
  • 사용하려는 폰트가 없거나 디바이스에 따라 지원하지 않을 경우를 대비해 fallback 폰트를 추가할 수 있다. 여러 글꼴을 사용할 시 쉼표로 구분하며, 입력된 순서대로 fallback이 적용된다.
  • 입력한 폰트는 사용자 디자이스에 설치되어 있지 않으면 적용되지 않는다. 이 문제는 웹폰트 기술을 이용해 해결할 수 있다. 영문 및 기본 한글 서체는 Google Fonts를, 한글 서체는 각 폰트 다운로드 사이트 또는 눈누 참고. (웹폰트 관련 참고자료)

 

📌 CSS 스타일 적용법

• 인라인 스타일 : 같은 줄에서 스타일을 적용
• 내부 스타일 시트 : HTML 문서 내 <style> 태그의 요소 내 작성
• 외부 스타일 시트 : 별도의 css 파일을 만들어 연결

관심사 분리의 측면에서 되도록 외부 스타일 시트 방법을 권장한다. css 스타일만 별도로 분리하면 1) 추후 코드를 단순화하고, 2) 수정을 쉽게 하며, 3) 이 코드를 넘겨받을 사람이 접근하기 쉬워지기 때문.

 

 

---

CSS의 단위

• 절대단위 : 출력되는 화면 크기에 관계없이 항상 고정된 단위. px, pt, cm, in 등
• 상대단위 : 어떤 기준에 따라 유동적으로 바뀌는 단위. em, rem, %, vw, vh 등
• 상대단위 em과 rem 비교 참고

 

📌 글꼴 사이즈를 정할 때

px로 글꼴 크기를 설정하면 디바이스나 사용자 설정이 바뀌어도 고정된 값만 출력한다. 또한 모바일 기기처럼 작은 화면+고해상도일 경우 흐리게 나올 때도 있다.

때문에 일반적으로는 상대단위인 rem을 추천한다. 브라우저의 기본 글자 크기를 1rem으로 놓고, 두 배로 크게 하려면 2rem, 작게 하려면 0.8rem등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르기 때문에 접근성에 유리하다. (em도 상대단위지만, 부모 요소에 따라 크기가 변경되므로 계산이 어렵다)

 

📌 화면 사이즈를 정할 때

1. 반응형 웹의 기준점
   반응형 웹(responsive web)이란 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 사이트를 말한다. 우리는 한 줄에 너무 많은 정보가 들어가거나, 글자 크기를 조절하기 위해 사용자가 화면을 볼 디바이스에 따라 CSS를 달리 적용해야 한다. 이때 디바이스는 나누는 기준을 보통 px로 정한다. (일반적으로 스마트폰 세로 모드는 450px미만의 너비이다.)
2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 
   이때는 vw(viewport width), vh(viewport height)를 사용한다. 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻한다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트들이 100vw, 100vh를 사용해 구현한 것. (참고 사이트)