- 오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다!
- 이번 주에 학원 쌤이 해주시던 말씀이 생각이 나네요 페이지에서 폰트만 달라져도 사이트가 달라보인다고 하시더라구요
- 그만큼 문자의 스타일이 주는 효과가 매우 큰 것 같습니다. ㅎㅎ
- 열심히 배워서 보기 좋은 사이트들을 만들어 봐요!!
내용출처 : 김광수 | 조혜경 저 Responsive Web Publishing
문자 관련 스타일
01.font-family
- 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: '돋움', Arial, Helvetica, sans-serif;02.font-size, 단위의 고찰
- 폰트의 크기를 지정하는 속성입니다.
- 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같습니다.
- px : 해상동 따라 상대적으로 달라지는 기본 단위입니다.
- % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다.
- em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위입니다.
- rem: rem은 em과 비슷하지만 붑모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, himl 요소를 뜻하므로, html 요소에서 지정한 크기가 1rem이 됩니다.
- vw, vh : vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위 입니다.
03.font-weight
- 문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.
- 이 속성은 normal, bold, bolder, lighter, 100~900까지의 숫자 값으로 지정할 수 있습니다.
font-weight: bold; //굵은 문자로 설정
font-weight: normal; //보통 문자로 설정04.font-style
- 문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.
- 폰트의 스타일을 나타내는 속성으로, 일반적으로 normal, italic, oblique 값으로 지정할 수 있습니다.
- italic 값은 이탤릭체 스타일을 나타내며, 글자가 기울어진 모습으로 표현됩니다.
- oblique 값은 이탤릭체와 비슷하지만, 글자를 실제로 기울이는 것이 아니라 기울인 것처럼 보이게 하는 스타일을 나타냅니다.
font-style: italic; //기울어지게 설정
font-style: normal; //기울어지지 않게 설정05.font-variant
- 문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
- 폰트의 변형을 나타내는 속성으로, 일반적으로 normal, small-caps 값으로 지정할 수 있습니다.
font-variant: small-caps; //작은 대문자로 설정
font-variant: normal; //원래대로 설정06.line-height
- 줄 간격을 px, %, em 등의 단위로 지정할 수 있습니다.
- 단위를 생략하면 기본적으로 em 값이 적용됩니다.
ling-height: 1.4;07.font
- 폰트 패밀리, 스타일, 크기, 변형 등의 속성을 결합하여 텍스트의 디자인을 나타내는 개념입니다.
- 'font-'로 시작하는 속성들은 line-height와 함꼐 'font: ~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없습니다.
- 순서는 폰트굵기, 폰트 스타일, 폰트크기및 자간, 폰트이름 순서입니다
body { font: 12px/1.4 '굴림', Gulim; }08.웹폰트
- 기본 글꼴이 아닌 경우 글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로, 언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
- 웹폰트는 라이센스가 필요한 유료 폰트도 많이 있으므로 반드시 확인하고 사용하도록 합니다.
- CSS의 @font-face 규칙을 사용하여 웹 페이지에서 폰트를 사용할 수 있습니다.
09.color, 색상 코드 관찰
- css 색상은 글자색뿐 아니라 배경색, 테두리색 등 다양한 css속성들에 적용됩니다.
- 색상명 : 해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. red,green,blue 등
- HEX값 : 세가지 색상(red, green, blue)을 16진수로 표현하는 것입니다. #rrggbb 형태로 기술합니다.
- RGB값 : rgb형태로 기술하며 red,green,blue는 10진수 0~255사이의 수치로 표현합니다.
- HSL값 : hsl(색상,채도,명도) 형태로 기술하며 hue(색상) 는 0~360 색상환 값, saturation(채도), lightness(명도)는 %값으로 표현합니다.
- RGBA값 : rgba(red,green,blue,alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다
- HSLA값 : hsla 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.
10.letter-spacing, word-spacing
- 글자 간의 간격은 letter-spacing, 단어 간의 간격은 word-spacing 속성으로 값을 부여합니다.
- lette-spacing에 음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착시킬 수 있습니다.
11.text-decoration
- 글자의 밑줄, 윗줄, 가운데줄을 치거나 쳤던 줄을 없애줍니다.
- underline : 밑줄
- overline : 윗줄
- line-through : 가운데줄
- none : 줄 없음
12.text-transform
- 대소문자 변경을 실행합니다.
- uppercase : 대문자
- lowercase : 소문자
- capitalize : 첫글자만 대문자
13.text-shadow
- 그래픽 프로그램의 도움 없이도 글자에 그림자를 주는 속성을 부여할 수 있습니다.
text-shadow: npx npx npx rgba(0,0,0,0);