문자 관련 스타일 여러가지
문자 관련 스타일이 어떤 종류가 있고 무엇인지 알아 봅시다.
font-family
폰트 패밀리는 비슷한 디자인 요소를 공유하는 서체의 그룹을 말합니다.
이러한 공유된 디자인 요소는 굵기, 비율 및 문자형 등이 포함됩니다.
폰트 패밀리는 보통 Regular, Bold, Italic 및 Bold Italic 등 다양한 스타일의 서체를 포함합니다.
예를 들어, "Helvetica" 폰트 패밀리는 Regular, Bold, Italic 및 Bold Italic 스타일을 포함하며, 이러한 서체 스타일은 모두 비슷한 디자인 요소를 공유합니다.
폰트 패밀리는 웹사이트나 문서 등에서 일관된 서체 스타일을 유지하는 데 도움이 되며, 디자인적 통일성을 제공합니다.
font-size, 단위의 고찰
폰트 크기는 글자의 높이를 나타내며, 일반적으로 포인트 단위로 측정됩니다.
포인트는 인쇄에서 사용되는 단위로, 1포인트는 1/72 인치를 의미합니다.
웹 디자인에서는 픽셀(px) 단위를 사용하여 폰트 크기를 측정하기도 합니다.
이 경우, 폰트 크기는 화면에서 표시되는 픽셀 수로 측정됩니다. 그러나 픽셀 단위는 화면 해상도나 확대/축소 설정에 따라 폰트 크기가 달라질 수 있기 때문에 상대적인 단위인 em, rem, % 등을 사용하는 것이 권장됩니다.
em은 폰트 크기를 상위 요소(부모 요소)의 크기를 기준으로 상대적으로 설정하는 단위입니다.
예를 들어, 부모 요소의 폰트 크기가 16px일 때, 자식 요소에 1em 폰트 크기를 적용하면 16px이 됩니다.
rem은 최상위 요소(HTML 요소)의 폰트 크기를 기준으로 상대적인 폰트 크기를 설정하는 단위입니다.
예를 들어, 최상위 요소의 폰트 크기가 16px이고, 자식 요소에 1rem 폰트 크기를 적용하면 16px이 됩니다.
%는 상위 요소(부모 요소)의 폰트 크기를 기준으로 상대적인 크기를 설정하는 단위입니다.
예를 들어, 부모 요소의 폰트 크기가 16px이고, 자식 요소에 150% 폰트 크기를 적용하면 24px이 됩니다.
최근에는 viewport 단위인 vw, vh, vmin, vmax를 사용하여 폰트 크기를 설정하는 것이 트렌드입니다. 이러한 단위는 뷰포트(브라우저 창의 크기)의 크기를 기준으로 상대적인 크기를 설정합니다. 예를 들어, 1vw 폰트 크기를 적용하면 뷰포트의 가로 길이의 1%가 됩니다.
font-weight
font-weight는 폰트의 굵기를 나타내는 속성입니다.
이 속성은 normal, bold, bolder, lighter, 100~900까지의 숫자 값으로 지정할 수 있습니다.
normal 값은 평범한 폰트 굵기를 나타냅니다. bold 값은 굵은 폰트 굵기를 나타내며, normal보다 굵습니다. bolder와 lighter 값은 상위 요소(부모 요소)의 font-weight 값에 따라 상대적인 굵기를 설정합니다. 예를 들어, 부모 요소의 font-weight가 normal일 경우, bolder 값은 bold와 같고, lighter 값은 normal과 같습니다.
font-style
font-style은 폰트의 스타일을 나타내는 속성으로, 일반적으로 normal, italic, oblique 값으로 지정할 수 있습니다.
normal 값은 기본 폰트 스타일을 나타냅니다.
italic 값은 이탤릭체 스타일을 나타내며, 글자가 기울어진 모습으로 표현됩니다.
oblique 값은 이탤릭체와 비슷하지만, 글자를 실제로 기울이는 것이 아니라 기울인 것처럼 보이게 하는 스타일을 나타냅니다.
font-style 속성은 주로 디자인적인 목적으로 사용됩니다.
italic 값은 강조할 필요가 있는 단어나 구절에 사용될 수 있습니다. 또한, oblique 값은 특별한 상황에서 italic 값과 같은 효과를 내기 위해 사용될 수 있습니다.
font-variant
font-variant는 폰트의 변형을 나타내는 속성으로, 일반적으로 normal, small-caps 값으로 지정할 수 있습니다.
normal 값은 기본 폰트 변형을 나타냅니다.
small-caps 값은 소문자 글자를 대문자로 변환하고, 대문자 글자는 원래 대문자로 유지한 채, 모든 글자를 대문자 크기의 작은 대문자 스타일로 표시합니다.
font-variant 속성은 일반적으로 디자인적인 목적으로 사용됩니다. small-caps 값은 제목이나 서브헤딩 등에서 강조할 필요가 있는 텍스트에 사용될 수 있습니다. 그러나 모든 폰트에서 small-caps 스타일을 지원하지 않을 수 있으므로, 폰트 선택 시 이에 대한 고려가 필요합니다.
line-height
font-height라는 속성은 CSS에 존재하지 않습니다.
font-size 속성은 폰트의 크기를 설정하는 속성이며, line-height 속성은 줄 간격을 설정하는 속성입니다.
font-size 속성은 텍스트의 크기를 나타내며, 일반적으로 픽셀(px)이나 비율(%) 등의 단위로 지정됩니다. font-size 속성을 사용하면 텍스트의 크기를 조절하여 레이아웃을 쉽게 변경할 수 있습니다.
line-height 속성은 텍스트의 줄 간격을 나타내며, 글꼴의 크기를 기준으로 픽셀(px)이나 비율(%) 등의 단위로 지정됩니다. line-height 속성을 사용하면 텍스트 블록의 가독성을 높이거나, 텍스트가 있는 요소의 높이를 조절하여 레이아웃을 변경할 수 있습니다.
따라서 font-height라는 속성은 존재하지 않으며, font-size 속성과 line-height 속성을 사용하여 폰트의 크기와 줄 간격을 조절할 수 있습니다.
font
font는 폰트 패밀리, 스타일, 크기, 변형 등의 속성을 결합하여 텍스트의 디자인을 나타내는 개념입니다.
폰트 패밀리는 같은 스타일로 구성된 글꼴의 집합을 말하며, 예를 들어 "Arial", "Helvetica", "sans-serif"와 같은 값으로 지정됩니다. 스타일은 폰트의 스타일을 나타내며, normal, italic, oblique와 같은 값으로 지정됩니다. 크기는 텍스트의 크기를 나타내며, 일반적으로 픽셀(px)이나 비율(%) 등의 단위로 지정됩니다. 변형은 small-caps와 같은 값으로 지정되며, 폰트의 변형을 나타냅니다.
CSS에서는 font 속성을 사용하여 이러한 폰트의 속성을 결합하여 텍스트의 디자인을 지정할 수 있습니다. 예를 들어, "font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;"와 같이 지정할 수 있습니다. 이렇게 지정된 폰트는 해당 요소에 적용되며, 브라우저에서 이 요소가 렌더링될 때 폰트의 스타일, 크기 등이 적용됩니다.
웹폰트
Web fonts는 서버에서 다운로드하여 웹 페이지에서 사용하는 폰트 파일입니다.
기존에는 웹 페이지에서 사용되는 폰트는 사용자의 컴퓨터에 미리 설치되어 있는 시스템 폰트나 웹 페이지에서 제공되는 제한된 수의 기본 폰트만 사용할 수 있었지만, 웹폰트의 등장으로 다양한 폰트를 사용할 수 있게 되었습니다.
웹폰트를 사용하면 웹 페이지에서 사용되는 폰트를 서버에서 다운로드하여 사용자의 브라우저에 렌더링할 수 있습니다. 이렇게 사용자의 브라우저에서 폰트를 렌더링하면, 사용자가 해당 폰트를 미리 설치하지 않아도 페이지에서 원하는 폰트를 사용할 수 있습니다.
또한 웹폰트는 CSS의 @font-face 규칙을 사용하여 웹 페이지에서 폰트를 사용할 수 있습니다.
하지만 웹폰트를 사용할 때는 폰트 파일의 용량 문제나 브라우저 호환성 등에 대한 고려가 필요합니다. 또한, 웹폰트를 사용하는 경우 폰트를 다운로드하는 시간이 필요하므로, 페이지 로딩 시간이 느려질 수 있습니다. 이러한 문제를 해결하기 위해 웹폰트 최적화 기술 등이 발전하고 있습니다.
color, 색상 코드 고찰
color는 웹 페이지에서 사용되는 텍스트나 요소의 색상을 지정하는 CSS 속성입니다.
색상은 보통 색상 코드로 표현됩니다.
색상 코드는 색상을 표현하는 방법으로, 대표적으로 RGB(Red, Green, Blue) 코드와 HEX(16진수) 코드가 있습니다.
RGB 코드는 빨강, 초록, 파랑 세 가지 색상의 강도를 0~255 사이의 값을 가지는 10진수로 표현하는 방법입니다.
예를 들어, (255, 0, 0)은 빨강색을 나타냅니다.
HEX 코드는 16진수로 된 6자리 코드로, 각각의 자리는 빨강, 초록, 파랑을 나타내며, #을 앞에 붙여서 사용합니다. 예를 들어, #FF0000은 빨강색을 나타냅니다.
또한, 색상 코드를 간단하게 사용하기 위해 이름으로 된 색상 값을 사용할 수도 있습니다. 예를 들어, "red", "green", "blue"와 같은 값을 사용할 수 있습니다. CSS에서는 미리 정의된 색상 이름 외에도, 사용자가 직접 색상 값을 지정할 수 있도록 RGBA(Red, Green, Blue, Alpha) 코드와 HSL(Hue, Saturation, Lightness) 코드를 지원하기도 합니다.
색상은 웹 디자인에서 매우 중요한 요소이며, 적절한 색상 조합을 선택하는 것은 웹페이지의 시각적인 효과를 결정할 수 있습니다. 따라서, 색상을 선택할 때는 적합한 색상 조합과 대비를 고려하는 것이 중요합니다.
letter-spacing, word-spacing
letter-spacing과 word-spacing은 CSS 속성으로, 각각 문자 간격과 단어 간격을 지정하는 속성입니다.
letter-spacing은 각 문자 사이의 간격을 조절하는데 사용되며, 양수 값으로 설정하면 문자 간격이 넓어지고, 음수 값으로 설정하면 문자 간격이 좁아집니다. 이를 통해 텍스트의 글자 간격을 조절하여 디자인적인 효과를 줄 수 있습니다.
word-spacing은 각 단어 사이의 간격을 조절하는데 사용되며, letter-spacing과 비슷하게 양수 값으로 설정하면 단어 간격이 넓어지고, 음수 값으로 설정하면 단어 간격이 좁아집니다. 이를 통해 텍스트의 단어 간격을 조절하여 레이아웃을 효과적으로 조절할 수 있습니다.
이 두 속성은 주로 타이포그래피 디자인에서 활용됩니다. 예를 들어, 글자와 단어 간격을 늘리는 것은 텍스트를 더 쉽게 읽을 수 있도록 돕고, 간격을 줄이는 것은 글자 또는 단어 사이의 밀접한 관계를 나타내기 위해 사용될 수 있습니다. 또한, 이러한 간격 속성을 활용하여 텍스트 레이아웃을 개선하여 가독성과 시각적인 효과를 향상시킬 수 있습니다.
text-decoration
text-decoration은 CSS 속성 중 하나로, 텍스트의 장식에 관련된 스타일을 지정하는 데 사용됩니다.
text-decoration 속성은 다음과 같은 값들을 가질 수 있습니다.
- underline : 텍스트에 밑줄을 표시합니다.
- overline : 텍스트 위에 선을 그립니다.
- line-through : 텍스트 가운데에 가로 줄을 그립니다.
- blink : 깜빡이는 효과를 추가합니다.
- none : 텍스트에 장식을 표시하지 않습니다.
text-decoration 속성은 일반적으로 링크를 표시하는 데 많이 사용됩니다.
예를 들어, 링크를 클릭할 때 밑줄이 나타나도록 하는 것이 일반적인 사용 방법입니다.
또한, text-decoration 속성은 다양한 요소와 함께 사용될 수 있습니다. 예를 들어, 버튼, 레이블, 블록 요소 등에서도 텍스트 장식에 관련된 스타일을 지정할 수 있습니다.
또한, text-decoration 속성은 자바스크립트와 함께 사용되어 특정 이벤트가 발생할 때 스타일을 변경하는 데에도 유용하게 사용됩니다.
예를 들어, hover 이벤트에 대한 스타일 변경을 적용할 때 text-decoration 속성을 사용하여 밑줄이 추가되거나 제거되는 등의 스타일 변경을 할 수 있습니다.
text-transform
text-transform은 CSS 속성 중 하나로, 텍스트의 대문자와 소문자를 변환하는 데 사용됩니다.
text-transform 속성은 다음과 같은 값들을 가질 수 있습니다.
- none : 아무런 변환을 수행하지 않습니다.
- capitalize : 모든 단어의 첫 글자를 대문자로 변환합니다.
- uppercase : 모든 문자를 대문자로 변환합니다.
- lowercase : 모든 문자를 소문자로 변환합니다.
- full-width : 텍스트를 전각 문자로 변환합니다.
text-transform 속성은 대소문자 변환을 처리할 때 매우 편리합니다. 예를 들어, 모든 헤딩 요소에 대문자를 사용하고 싶다면, 대소문자 변환이 필요하지 않습니다.
대신, text-transform 속성을 사용하여 이것을 자동으로 처리할 수 있습니다.
또한, text-transform 속성은 일부 다국어 웹 사이트에서 유용합니다. 예를 들어, 일본어에서는 일부 단어가 일반적으로 가나 문자를 사용하여 쓰입니다. 이 경우, text-transform 속성을 사용하여 이러한 문자를 올바르게 변환할 수 있습니다.
text-shadow
text-shadow는 CSS 속성 중 하나로, 텍스트 주위에 그림자 효과를 만드는 데 사용됩니다.
text-shadow 속성은 다음과 같은 값들을 가질 수 있습니다.
- h-shadow : 그림자의 가로 위치를 지정합니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동시킵니다.
- v-shadow : 그림자의 세로 위치를 지정합니다. 양수 값은 아래쪽으로, 음수 값은 위쪽으로 이동시킵니다.
- blur-radius : 그림자의 흐림 반경을 지정합니다.
- color : 그림자의 색상을 지정합니다.
text-shadow 속성은 텍스트에 깊이와 높이를 부여하여 3D 효과를 만들 수 있습니다. 이를 통해 텍스트가 페이지에서 더욱 눈에 띄게 만들 수 있습니다. 그림자의 크기와 색상을 조절하여 원하는 결과를 얻을 수 있습니다.
또한, text-shadow 속성은 텍스트를 읽기 쉽게 만드는 데에도 사용될 수 있습니다. 예를 들어, 밝은 배경에 어두운 텍스트를 사용할 때 그림자를 추가하여 텍스트가 더욱 강조되도록 만들 수 있습니다.
많은 문자 관련 스타일을 알아봤는데요, 아는 것도 있었지만 처음 알아본것이 더 많았던거같습니다.. 화이팅!