2024/06/16 2

CSS 텍스트 표현 방법

em과 rem 단위CSS는 길이(length)를 표현할 때 픽셀 단위(px)를 사용한다. 하지만 픽셀 단위는 '몇 글자 정도의 길이'와 같은 텍스트의 표시 길이를 표현해야 할 때는 그리 적합하지 않다. 예로 '60픽셀'보다는 '문자 20개 정도의 길이'로 표현하는 것이 더 자연스럽다.따라서 CSS는 영문자 'M'의 발음 '엠'을 의미하는 em과 'root M'을 의미하는 rem이라는 단위를 제공한다. 이 단위들은 화면 크기에 따라 반응형 디자인을 구현할 때 유용하다.em 단위em 단위는 현재 요소의 폰트 크기에 상대적인 크기를 나타낸다. 예를 들어, 부모 요소의 폰트 크기가 16px이라면, 자식 요소에서 1em은 16px을 의미한다.상대적인 단위: 요소의 폰트 크기를 기준으로 크기를 계산한다.중첩 효과:..

CSS 2024.06.16

CSS 색상 표현 방법

CSS는 웹 페이지의 스타일을 정의할 때 다양한 방식으로 색상을 표현할 수 있다. 색상 모델과 함수, 불투명도(opacity), 그리고 Tailwind CSS와 같은 프레임워크에서 제공하는 색상 클래스 등을 이해하면 더욱 효과적으로 스타일을 지정할 수 있다. CSS 색상 모델CSS에서는 색상을 표현하는 여러 가지 방법을 지원한다. 주요 색상 모델로는 RGB와 HSL이 있다.RGB (Red, Green, Blue)RGB 색상 모델은 빛의 삼원색인 빨강-초록-파랑을 혼합하여 색상을 표현한다.16진수를 의미하는 # 기호 뒤에 #빨강초록파랑 방식으로 표현한다. 여기서 각각의 색상은 0~ff(즉, 0~255)까지 16진수 값 또는 0부터 1까지의 소수로 나타낼 수 있다.HSL (Hue, Saturation, Li..

CSS 2024.06.16
728x90