티스토리툴바

Front End/HTML, CSS

CSS 기초

CSS

Cascading Style Sheets의 약자로 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.

  • CSS는 단순한 디자인을 넘어서 좋은 사용자 경험(UX; user experience)을 제공하기 위한 도구이다. 같은 콘텐츠를 담더라도 가독성이나 시인성의 차이가 분명해지게 되며, 이는 개발자가 CSS를 통해 웹 앱에 접근하는 사용자 인터페이스(User Interface)부터 만들게 되는 이유이기도 함.
  • CSS는 언어 자체는 단순하지만 프로젝트 규모가 조금만 더 커져도 CSS를 의미 있게 구성하기 어렵다. 단순하기 때문에 그 양이 많아질 수록 코드의 양이 방대해지고 관리가 어려워 지기 때문. → 이런 CSS가 가진 고유한 복잡함을 다루기 위해 많은 종류의 다양한 모범 사례(Best practice)가 만들어짐. 실무에서 사용하기 위해서는 이를 아는 것도 중요하다.

사용자 인터페이스 (User Interface)

  • 인터페이스(Interface)란? → 컴퓨터와 교류하기 위한 연결고리.
  • UI의 중요성 → 실제 어플리케이션은 개발 언어로 동작하지만, 이를 사용자가 모두 습득하여 코드를 입력하고 동작하기란 쉽지 않기 때문에 여러 인터랙션과 아이콘, 레이아웃을 통해 쉽게 사용하게 해줌. → UI는 사용자가 어플리케이션을 사용하게 하는데 매우 중요한 역할을 하고, UI가 없으면 어플리케이션과 소통이 불가능 함.

직관적이고 쉬운 UI 제작은 FE 개발자의 기본 소양

  • 아무리 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용 없다. 프론트엔드 개발자는 단순 기능을 구현하는 데에서 그치는 것이 아닌, 그 기능을 직관적이고 편리하고 사용할 수 있도록 UI를 만들어야 한다.
  • 좋은 사용자 경험(UX)은 직관적이고 쉬운 UI에서 나온다. 사용자가 어플리케이션을 사용 할 때 쓰는 기기(PC / Mobile)부터, 레이아웃, 아이콘, 버튼 등을 활용해 심미성과 사용성을 모두 고려한 UI가 필요하다.

프론트엔드 개발자가 갖춰야 할 것

  • 컴포넌트 기능 별로 묶어서 제작
  • 화면의 구성이나 배치 (레이아웃 디자인)
  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

CSS의 문법 구성

body{
	color: red;
	font-size: 30px;
}
  • 셀렉터 Selector : 요소나 id, class를 선택한다.
  • 선언 블록 {} : 중괄호 안에서 셀렉터에 적용 할 내용을 작성한다.
  • 선언 : 속성 명과 속성 값을 콜론 : 으로 구분하여 작성하고 선언을 구분(선언 구분자)하기 위해 세미 콜론 ; 으로 작성한다.

CSS 파일 연결

  • CSS 등 HTML 파일과 다른 파일을 연결 할 때는 <link> 태그를 사용한다.
    • ex. <link rel=”stylesheet” href=”style.css” /> → href 속성에는 파일의 주소가 들어간다. → rel 속성에는 파일의 역할이나 특징이 들어간다.
❓
CSS 스타일을 적용 할 수 있는 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 파일로 구분하지 않고 <style> 태그 내에 작성하는 내부 스타일 시트, 그리고 앞서 기술한 파일을 연결해서 사용하는 외부 스타일 시트가 있다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않는다.

CSS의 대표적인 글자 속성

색상 color

값은 HEX(16진수로 RGB를 표현함) 또는 주요 색상의 이름을 사용한다. 배경 색상background-color이나 테두리의 색상border-color도 변경 할 수 있다.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

글꼴 font-family

글꼴의 이름은 따옴표를 붙여서 적용 할 수 있다. 사용하려는 글꼴이 없거나 디바이스에 따라 지원하지 않을 수 있기 때문에 이런 경우를 대비해 fallback 글꼴(표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 예비 글꼴)을 추가 할 수 있다. fallback을 위해 여러 글꼴을 사용하는 경우 쉼표 , 로 구분하며 입력된 순서대로 적용된다.

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
❓
다양한 글꼴을 사용하고 싶다면? → 기본적으로 컴퓨터를 비롯한 사용자의 기기에 설치되어 있지 않은 글꼴은 적용되지 않기 때문에 개발자의 의도를 사용자에게 충분히 전달 할 수 없는 문제가 있다. 이를 웹 폰트 기술을 통해 해결 할 수 있으며, link 태그로 웹 폰트를 위한 파일을 연결하면 된다.

크기 font-size

값은 px, pt 등 절대단위와 em, rem, %, vw, vh 등 상대 단위가 들어 갈 수 있다.

굵기 font-weight

값은 normal, bold, bolder, lighter, 100~900 이 있다. 숫자의 경우 400이 normal, 700이 bold와 같다.

밑줄, 윗줄, 취소선 text-decoration

값은 underline, overline, line-through 등이 있으며 해당 속성을 통해 줄의 색상과 스타일(점선 등)을 변경 할 수 있다.

정렬 text-align

가로 정렬을 위한 값은 left, right, center, justify(양쪽 정렬)이 있다.

세로 정렬의 경우 vertical-align이 있지만, 이 경우 부모 요소의 display 속성이 반드시 table-cell 이어야 한다.

행간 line-height

값은 px, pt 등 절대단위와 em, rem, %, vw, vh 등 상대 단위가 들어 갈 수 있다.

자간 letter-spacing

값은 px, pt 등 절대단위와 em, rem, %, vw, vh 등 상대 단위가 들어 갈 수 있다.

절대 단위와 상대 단위

절대단위

cm, mm, in, pt, px 등이 이에 해당하며 다른 것과 관련 없이 항상 동일한 크기로 간주된다.

상대단위

em, rem, %, vw, vh 등이 이에 해당하며 다른 요소(상위 요소의 글자 크기나 viewport 크기)와 관련하여 결정되는 단위이다.

글꼴 사이즈를 정할 때

일반적인 경우에는 rem

root의 글자 크기로 결정되는 rem을 사용하게 되면 사용자가 설정한 기본 글꼴 크기를 따르게 되기 때문에 상대적으로 조절해서 사용 할 수 있으므로 접근성에 유리하다. em의 경우 부모 요소에 따라 결정되기 때문에 계산이 어려우니 root의 글자 크기로 결정되는 rem을 추천.

환경에 영향 받지 않는 절대적인 크기는 px

px는 고정된 절대 단위기 때문에 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하며 일반적인 기기에서는 사용자 접근성이 불리하다. 예를 들어 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴을 더 크게 설정하더라도 px를 사용하게 되면 글꼴의 크기는 항상 설정된 픽셀로 고정되어 접근성을 해친다. 또한 픽셀은 모바일 기기처럼 작은 화면 + 고해상도인 경우에도 1px이 모니터의 한 점보다 크게 업스케일 되기 때문에 뚜렷하지 못한 형태로 출력 될 수 있어 적합하지 않다.

화면 사이즈를 정할 때

반응형 웹(responsive Web)에서 기준점을 만들 때

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 뜻하며, 디바이스 크기 별로 CSS를 달리 적용(미디어 쿼리; media query)해야 한다. 이 때 디바이스 크기를 나누는 기준을 보통 px로 정한다. (ex. iPhone 12 Pro Max의 너비는 414px)

화면 너비나 높이에 따른 상대적 크기가 중요한 경우

vw, vh를 사용 하는 것이 좋다. 웹 사이트에 보이는 영역을 viewport라 부르며 vw, vh는 각각 viewport width와 viewport height를 뜻한다. 백분율로 나눈 단위를 사용하기 때문에 1vw는 viewport width의 1%가 된다.


Uploaded by N2T

티스토리툴바