버튼을 클릭하면 명언이 나와요
-이름이 나와요
문자 관련 스타일 설명
CSS에서는 문자에 대한 스타일을 다양하게 지정할 수 있습니다. 주요한 문자 관련 속성들은 다음과 같습니다.
- color: 문자의 색상을 지정합니다.
- font-family: 문자의 폰트를 지정합니다.
- font-size: 문자의 크기를 지정합니다.
- font-weight: 문자의 두께를 지정합니다.
- line-height: 행간을 지정합니다.
- text-align: 텍스트의 수평 정렬 방법을 지정합니다.
- text-decoration: 텍스트에 밑줄, 취소선 등의 장식을 추가합니다.
- text-transform: 텍스트의 대문자/소문자 변환을 지정합니다.
- letter-spacing: 문자 간격을 지정합니다.
- word-spacing: 단어 간격을 지정합니다.
- text-shadow: 텍스트에 그림자 효과를 추가합니다.
- white-space: 공백 처리 방법을 지정합니다.
- text-overflow: 텍스트가 요소를 벗어나는 경우의 처리 방법을 지정합니다.
- overflow-wrap: 텍스트 줄바꿈 처리 방법을 지정합니다.
이러한 속성들을 적절하게 조합하여 원하는 텍스트 스타일을 만들어 낼 수 있습니다. 예를 들어, font-family, font-size, font-weight, color 등을 사용하여 텍스트의 폰트, 크기, 두께, 색상을 지정하고, line-height로 행간을 조절하며, text-align으로 텍스트를 수평 정렬하고, text-decoration으로 밑줄, 취소선 등의 장식을 추가할 수 있습니다.
문자 관련 스타일 모음
1.font-family : "속성", 기본속성;
문자의 글꼴을 지정하는 속성입니다.
(사용자의 브라우저에서 사용될 폰트를 지정합니다. 만약 폰트가 없을 경우에 대비해 기본 속성은 sans-serif를 써줍니다.)
font -family : "돋움", Dotum, Arial, Helvetica, sans-serif;2.font-size
문자의 글자 크기를 지정하는 속성입니다.
- px : 기본 단위 입니다.(기본은 16px + 반응형 만들때 글자가 고정되어 움직여서 반응형 만들때 비추천 입니다.)
- % : 부모 요소의 글자 크기를 100%를 기준으로 계산한 단위 입니다. (150%는 15px이 될것입니다.)
- em : 부모 요소의 글자 크기를 100%를 기준으로 계산한 100분의 1단위 입니다. (1em은 16px입니다.)
- (부모 폰트가 18px이면 18px * 원하는em = px이 나옵니다)
- rem : rem은 em과 비슷하지만 부모 요소가 아닌 최상의 요소의 크기를 100% 기준으로 계산합니다.
- (1rem은 16px입니다.)
- (rem은 최상위 요소의 글씨 크기를 따릅니다. 최상위 요소 글씨 크기가 24px이면 / 24px * 현재rem=px입니다.
- vw : 뷰포트 너비값의 100분의 1단위 입니다. (10vw은 뷰포트 너비의 10% 크기 입니다.)
- vh : 뷰포트 높이값의 100분의 1단위 입니다. (10vw은 뷰포트 너비의 10% 크기 입니다.)
3.font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight: bold | font-weight: normal; |
4.font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정하는 속성입니다.
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style: italic; | font-style: normal; |
5.font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
| 작은 대문자로 설정 | 원래대로 설정 |
| font-variant: small-caps; | font-variant: normal; |
6.line-height
줄간격을 px, %, em등의 단위로 지정할 수 있습니다.
(단위를 생략하면 em으로 처리됩니다. 1.4em은 140%입니다.)
(줄간격 없이 딱 붙이고 하고자 할경우에는 100%또는 1em값을 지정하면 됩니다.)
- px : 기본 단위 입니다.(기본은 16px + 반응형 만들때 글자가 고정되어 움직여서 반응형 만들때 비추천 입니다.)
- % : 부모 요소의 글자 크기를 100%를 기준으로 계산한 단위 입니다. (150%는 15px이 될것입니다.)
- em : 부모 요소의 글자 크기를 100%를 기준으로 계산한 100분의 1단위 입니다. (1em은 16px입니다.)
- rem : rem은 em과 비슷하지만 부모 요소가 아닌 최상의 요소의 크기를 100% 기준으로 계산합니다.
- (1rem은 16px입니다.)
- vw : 뷰포트 너비값의 100분의 1단위 입니다. (10vw은 뷰포트 너비의 10% 크기 입니다.)
- vh : 뷰포트 높이값의 100분의 1단위 입니다. (10vw은 뷰포트 너비의 10% 크기 입니다.)
line-height: 1.4;7.font
"font-"로 시작하는 속성들은 line-height와 함께 "font:~" 한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시
다음 세가지 순서에 맞추어 써야 합닌다. 글자 크기와 글꼴은 결코 생략할 수 없습니다.
body {
/* [font-weight, font-style, font-variant]
[font-size/line-height]
[font-family]
*/
font: 12px / 1.4 "굴림, Gulim;
}8.웹폰트
글꼴 파일이 없는 사용자의 화면에서는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있습니다.
언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다.
(웹폰트는 라이센스가 필요한 유료 폰트가 많이 있으므로 반드시 확인하고 사용하는게 좋습니다.)
@font-face
CSS3에서는 글꼴 파일을 업로드하여 사용하는 @font-face를 사용할 수 있습니다.
p { font-family: NG; }9.color
글자의 색상을 지정하는 속성입니다.
(HEX값도 가능합니다. #123456 -- #하고 뒤에 숫자 6개를 작성하면 됩니다.)
color: blue;| 속성 값 | 속성 설명 |
| color: orange; | 글자를 오렌지색으로 표현 |
| background: geige; | 배경을 베이지색으로 표현 |
| border-color: tomato; | 테두리를 토마토색으로 표현 |
10.letter-spacing
글자 간의 간격을 지정합니다.
(음수를 부여하면 원래 자간이 떨어진 글꼴일 경우 더욱 밀착 시킬 수 있습니다.)
letter-spacing: -1px;11.word-spacing
단어 간의 간격을 지정합니다.
word-spacing: 2em;12.text-decoration
글자에 밑줄, 윗줄, 가운데줄을 치거나 줄을 없앨 수 있습니다.
| 속성 값 | 속성 설명 |
| underline | 밑줄 |
| overline | 윗줄 |
| line-through | 가운데줄 |
| none | 줄 없음 |
13.text-transform
대소문자 변경을 실행합니다.
| 속성 값 | 속성 설명 |
| uppercase | 소문자를 대문자로 변경 |
| lowercase | 대문자를 소문자로 변경 |
| capitalize | 첫글자만 대문자로 변경 |