Study/Javascript, Jquery, CSS

[CSS] 문자 스타일

v명월v 2020. 1. 27. 22:58

안녕하세요. 명월입니다.


이 글은 CSS에서 문자열 스타일에 대한 글입니다.


CSS는 웹 페이지에서 style sheet, 레이아웃과 스타일에 대한 정의 마크업입니다. 그중 문자열 스타일은 웹페이지에서 사용되는 글자에 대한 스타일입니다.

문자열은 아마 제가 생각하기로 웹 페이지를 만드는 요소 중에 가장 많은 요소를 차지하지 않나 싶습니다. 물론 웹 페이지의 특성상 이미지나 동영상, 글자보다는 다른 요소가 많은 경우도 있습니다만, 대부분은 문자열이 대부분일 것입니다.


문자열 스타일은 css에서 어미에 거의 font라는 키워드를 포함하고 있습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="test">Hello World!!!!</div>
  </body>
</html>

html {
  font-size: 12px;
}
body {
  font-size: 12px;
}
div.test {
  /* 문자 사이즈 설정 */
  font-size: 1em;
  /* 문자 폰트 스타일 */
  font-style: italic;
  /* 폰트 종류*/
  font-family: arial;
  /* 폰트 굵기 */
  font-weight: 800;
  /* 문자 색깔*/
  color: red;
  /* 문자 정렬 방법 left, center, right*/
  text-align: center;
  /* 폰트 효과 - 언더바, 취소선 등..*/
  text-decoration: line-through;
  /* 문자 그림자 효과*/
  text-shadow: 1px 2px 4px;
  /* 줄바꿈 설정(라인이 해당 요소의 크기를 넘어서면 자동 줄바꿈 하는 설정) */
  white-space: nowrap;
}

실제 문자열 스타일은 위 예제보다 더 많이 있습니다.

링크 - https://www.w3schools.com/css/css_font.asp

하지만 저도 위 예제 이상의 스타일은 잘 사용하지 않습니다.


font-size는 문자 사이즈입니다. 문자 단위에서는 "px", "pt", "em", "rem"가 있습니다.

"px"의 경우는 픽셀 단위로 문자의 크기를 폭, 세로 모니터 12 픽셀 크기입니다.

"pt"의 경우는 폰트 크기의 단위이지만, 기준으로는 필자도 잘 모릅니다. 대게 다른 워드 프로세서(엑셀이나 워드)에서 pt단위로 글자 크기를 설정하는 데 같은 크기입니다.

"em"과 "rem"는 비율 크기 설정인데, "em"의 경우 요소가 포함되어 있는 바로 상위 설정의 크기에 따라 배율를 설정하는 것이고 "rem"의 경우"root "의 크기, "html"태그에서 설정한 크기의 배율입니다 .


위 예제에서 "em"으로 정의했습니다. "div.test"은 "body"의 파생 위치에 있기 때문에 body 태그의 "font-size : 12px"로 설정됩니다.

"font-style"는 이탤릭체 등의 설정입니다. "font-family"는 글꼴의 종류를 설정하는 키워드입니다.

"font-weight"은 폰트의 굵기를 설정하는 곳입니다. 수치는 무엇을 의미하는 지에 대해서는 모르겠는데, 「100」단위로 글자의 굵기가 굵어집니다. 수치의 설정이 아닌 bold과 bolder, lighter에서도 설정할 수 있습니다.

"font-color"는 글꼴 색상 설정입니다. 대표적인 색상은 영어로 설정합니다만, 보통 HEX 색상 값으로 설정하여 좀 정말한 색 설정을 할 수 있습니다.

link - https://htmlcolorcodes.com/


"text-align"는 텍스트의 정렬 설정입니다. 텍스트 정렬은 바로 위 상위에 사이즈에 의해 정렬이 되는데, inline형식이면 정렬이 되지 않겠네요.

"text-decoration"의 경우는 취소 선 및 밑줄 등을 설정할 수 있습니다.

"text-shadow"의 경우 그림자 효과입니다 만, 상-하-좌-우-거리의 순서로 구성 할 수 있습니다.


white-space 문자 줄 바꿈 설정이지만 테이블의 경우 자동 줄 바꿈을 설정하면 테이블이 깨질 수 있으니 이건 상황에 맞게 설정해야 합니다.

여기까지 CSS에서 문자열 스타일에 대한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.