“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
웹사이트를 보다보면 아무리 사진고 동영상들이 있어도 문자가 빠진 웹사이트는 없는 것 같습니다.
문자로 정보를 전달할때 여러가지 속성으로 강조와 꾸밈을 줄 수있습니다.
이번엔 텍스트와 관련된 스타일에 대해 정리하려고 합니다.
font-family
문자의 글꼴을 지정하는 속성입니다.
여러 단어이거나 한글 글골이 경우는 따옴표로 감싸고 여러개 의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family:'맑은 고딕', "돋움", 궁서, Arial, Helvetica ;
font size
문자의 글자 크기를 지정하는 속성입니다. 글자크기는 단위가 px가 기본입니다 하지만 상황에 따라 다른 단위를 사용하기도 합니다.
px
해상도에 따라 상대적으로 달라지는 기본단위입니다.
font-size: 1px;
%
부모요소의 글자크기를 100%기준으로 계산한 % 단위입니다.
font-size: 150%;
em
부모 요소의 글자 크기를 100% 기준으로 계산 한 100분의 1단위입니다.
font-size: 1em;
rem
em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100%기준으로 계산합니다.
font-size: 1.5rem;
vw,vh
vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위입니다.
font-size: 10vw;위의 글자크기는 뷰포트 너비의 10%크기라는 의미입니다.
font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정함는 속성입니다.
|
font-weight: bold;
|
굵은 문자로 설정 |
|
font-weight: normal;
|
보통 문자로 설정 |
font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.
|
font-style: italic;
|
기울어지게 설정 |
|
font-style: normal;
|
기울어지지 않게 설정 |
font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
|
font-variant: small-caps;
|
작은 대문자로 설정 |
|
font-variant: normal;
|
원래대로 설정 |
line-height
줄간격을 px, %, em등의 단위로 지정할 수 있습니다.
line-height: 1.4;단위를 생락하면 em으로 처리됩니다.
font
font: [font-weight, font-style, font-variant][font-size/line-height][font-family] 반드시 위의 세가지는 채워 사용해야 하며 글자 크기와 글꼴은 생략할 수 없습니다.
웹폰트
기본글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시 되지 않을 수 있으므로웹폰트로 사용하는 것이 좋습니다.
@font-face
폰트를 다운받아 업로드하여 사용하며 글꼴 파일의 용량이 그면 로딩 되는 속도가 느리고 용량이 적으며 글자가 약간 뭉개져 보일 수 있으므로 여러 번 테스하여 결정합니다.
color
color: blue;|
color: orange;
|
글자를 오렌지색으로표현 |
|
background: beige;
|
배경을 베이지 색으로 표현 |
|
border-color: tomato;
|
테두리를 토마토색으로 표현 |
hex값
rgb(red,green,blue)의 세가지 색을 16진수 00~ff사이의 수치로 표현한것입니다.
rgb값
red,green,blue을 10진수 0~255사이의 수치로 표현합니다.
hsl값
hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)은 0~360으로 saturation(채도), lightness(명도)는 %값으로 표현합니다.
color: hsl(250, 100%, 50%);위 구문은 색상은 300, 채도는 100%, 명도는 50%입니다
rgba값
rgb값과 함께 alpha을 주며 0~1 사이의 투명도를 나타냅니다.
hsla값
rgba값과 마찬가지로 hsl값과 함께 alpha을 주며 0~1 사이의 투명도를 나타냅니다.
letter-spacing, word-spacing
letter-spacing은 글자간의 간격을, word-spacing은 단어 간의 간격을 부여합니다.
text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
| 속성값 | 속성 설명 |
| underline | 밑줄 |
| oterline | 윗줄 |
| line-through | 가운데 줄 |
| none | 줄 없음 |
text- transform
대소문자 변경을 실행합니다.
| 속성값 | 속성 설명 |
| uppercase | 대문자 |
| lowercase | 소문자 |
| capitalize | 첫글자만 대문 |
text-shadow
그래픽프로그램 없이도 글자에 그림자를 주는 속성입니다.
text-shadow: [원본에서 떨어지는 가로거리] [원본에서 떨어지는 세로거리] [그림자가 흐릿하게 퍼지는 정도] [색상];