CSS 기초

CSS

직관적이고 쉬운 UI( user interface ) 제작은 프론트엔드 개발자의 기본 소양이다.

• UI : user interface의 약자로 interface는 컴퓨터와 교류하기 위한 연결고리이다. 즉 사용자와 컴퓨터의 연결고리이다.

• UX : user experience 의 약자로 사용자 경험이다.

좋은 사용자 경험(UX : user experience)은 직관적이고 쉬운 UI(user interface)에서 나온다.

기본 CSS 속성

• 색상

글자색상,배경색상,테두리색상 등 여러가지 속성이있다.
color, background-color, border-color 등

.class {
  color : black; // 글자 색상
  background-color: green; // 배경 색상
  border-color: blue; // 테두리 색상
}

• 글꼴

font-family로 글꼴도 정할 수 있다.

.class {
  font-family: 'SF Pro KR'; // 글꼴
}

• 크기
  글자의 크기를 변경하기 위해서는 font-size속성을 사용함.

.class {
  font-size: 24px; // 글자 크기
}

• 굵기 : font-weight

• 밑줄, 가로줄 : text-decoration

• 자간 : letter-spacing

• 행간 : line-height

• 정렬
  가로정렬 : text-align

이외의 속성들이 아주 많다.

단위

글꼴 크기, 화면크기 등 크기를 다룰 떄는 크기의 단위가 중요하다.
크기의 단위는 크게 절대단위, 상대단위 두 가지로 구분된다.

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

글꼴 사이즈를 정할때

• 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 -> 절대 단위인 px(픽셀)dmf tkdydgksek.
• 일반적인 경우 -> 상대 단위인 rem을 주로 추천한다.