- (1) 색상 (color)
- 값: HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는
주요 색상의 이름을 사용할 수 있습니다.
- 값: HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는
.red {
color: #ff0000;
}-> 예시 코드
red class의 color 속성에 #ff0000 값을 할당합니다. 배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있습니다.
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
}-> 글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있습니다.
- (2) 글꼴 (font-family)
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}-> font-family 속성을 통해 글꼴(폰트)를 설정할 수 있습니다.
글꼴의 이름은 따옴표를 붙여서 적용할 수 있습니다.
-> fallback 글꼴
사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있습니다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있습니다. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책입니다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있습니다. 입력된 순서대로 fallback이 적용됩니다.
- (3)크기(font-size)
.title {
font-size: 24px;
}-> title class에 글자 크기를 24px로 적용합니다.
알아야 할 몇가지 단위
글꼴의 크기에서는 단위가 무엇보다 중요합니다. 글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
-
절대 단위: px, pt 등
-
상대 단위: %, em, rem, ch, vw, vh 등
-
(1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
px(픽셀)을 사용합니다. px은 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리합니다. 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정됩니다. 개발자가 제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다. -
(2) 일반적인 경우
상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.) -
(3) 반응형 웹(responsive web)에서 기준점을 만들 때
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이 때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다. 이 때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해볼 수 있습니다.` -
(4) 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
이 때에는 vw, vh를 사용하세요. 웹사이트의 보여지는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로<body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)
-
-
(4) 기타 스타일링
사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인할 수 있습니다.
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
- (5) 정렬(text-align)
- 값: left, right, center, justify(양쪽 정렬)가 있습니다.
출처 : 코드스테이츠
