안녕하세요. 명월입니다.
이 글은 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에서 문자열 스타일에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] Column 요소 스타일 (0) | 2020.02.17 |
|---|---|
| [CSS] 정렬 스타일(float) (0) | 2020.02.12 |
| [CSS] 위치(postion)과 요소 객체 스타일(display) (0) | 2020.01.29 |
| [CSS] 테두리 및 여백 스타일 - border, margin, padding (0) | 2020.01.28 |
| [CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus (0) | 2020.01.23 |
| [CSS] 의사요소 - fist-line, first-letter, before, after (2) | 2020.01.22 |
| [CSS] 의사클래스 - only-child, only-of-type, empty, empty, root (0) | 2020.01.21 |
| [CSS] 의사클래스 - first-child, last-child, first-of-type, last-of-type (0) | 2020.01.16 |