🥴🥴 오늘은 좀 힘든 날이었어요. 자바스크림트 함수가 좀처럼 이해가 안되서..하지만 화이팅 해봅니다!
문자 관련 스타일에 대해서 알아보려고 합니다. 종류가 많은 만큼 간략하지만 정확하게 정리해보도록 하겠습니다.🤫
문자 관련 스타일
01. font - family
문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: '돋움', dotum, Arial, Helvetica, san-serif;
02. font - size와 단위
문자의 크기를 지정하는 속성입니다. 크기를 명시하지 않을 경우 16px기본입니다.
CSS에서 사용하는 단위는 다음과 같습니다.
👉 px
해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다.
font-size: 12px;
👉%
부모 요소의 글자 크기를 100% 기준으로 계산한 %단위로서, 다음과 같이 표현합니다.
font-size: 150%
특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px가
될 것입니다.
👉em
부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위입니다.
font-size: 1.5em
👉rem
rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100%기준으로 계산합니다.
rem의 r은 root 즉, html요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
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: nomal; // 원래대로 설정
👉line-height
줄간격을 px,%,em 등의 단위로 지정할 수 있으며 다음과 같이 표현합니다.
line-height: 1.4;
👉letter-spacing, word-spacing
글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing속성으로 값을 부여합니다.
letter-spacing에 음수를 부여하면 원래 자간이 떨어진 글골일 경우 더욱 밀착시킬 수 있습니다.
letter-spacing: -1px;
👉text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
underline //밑줄
overline //윗줄
line-through //가운데줄
none //줄 없음
👉text-fransform
대소문자 변경을 실행합니다.
uppercase // 대문자
lowercase // 소문자
capitalize //첫글자만 대문자
👉text-shadow
프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
text-shadow: 2px 3pxx 5px rgba(0,0,0,0.4);
2px // 그림자가 원본에서 떨어지는 가로거리
3px //그림자가 원본에서 떨어지는 세로거리
5px // 그림자가 흐릿하게 퍼지는 정도 ( 쓰지 않으면 퍼지는 효과가 없음 )
rgba // 그림자의 색상
03. font
'font~'로 시작하는 속성들은 line-height와 함께 'font:~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야하며 글자 크기와 글꼴은 결코 생략 할 수 없습니다.
body { font: 12px/1.4 '굴림'.gulim; }
웹폰트
기본 글골이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로,
언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
font-face
p { font-family : NG; } // 선택자에 글꼴 이름 부여
font-face { font-family:'NG'; src: url(font/NanumGothic.woff'_format(' woff ');) //CSS에서 이름 파일경로 유형설정
04. color와 색상 코드
color : blue; // 글자를 오렌지색으로 표현
background: beige; //배경을 베이지색으로 표현
bordr-color:tomato; //테두리를 토마토색으로 표현
색상을 나타낼 수 있는 방법으로는 여러가지가 있습니다. HEX값과 RGB값, HSL 값...
HEX 값은 세 가지 색을 16진수 수치로 표현하는 것으로써 #rrggbb형태입니다.
color : #ff00ff;
RGB 값으로도 나타낼 수 있는데요
color:rgb(255, 125, 0);