글꼴 관련 스타일
- font-family속성
font-family:폰트이름;이렇게 사용할 수 있으며 뒤에 ','을 이용해 폰트가 없으면 대체용으로 사용되게할 수 있습니다.Ex)font-family:Consolas, sans-serif;
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #font{ font-family:Consolas, sans-serif } </style> <p id="font">font</p> <p>font</p> </body> </html> | cs |
- font-size속성
절대크기, 상대크기, 단위를이용, 백분율 이렇게 4가지가 있습니다.
(단위는 px, em등이 있습니다.)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #weight{ font-weight:900; } </style> <p id="size">size</p> <p>size</p> </body> </html> | cs |
- font-weight속성
normal, bold, lighter, 300, 500등 다양하게 지정할 수 있으며 글자의 굵기를 지정합니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #weight{ font-weight:900; } </style> <p id="weight">bold</p> <p>bold</p> </body> </html> | cs |
- font-varient속성
글자를 작은 대문자로 표기할 때 사용합니다.(small-caps라는 것으로 조절할 수 있습니다.)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #uppercase_s{ font-variant:small-caps; } </style> <p id="uppercase_s">aaa</p> <p>AAA</p> </body> </html> | cs |
- font-style속성
글자를 이탤릭체로 표시할 때 사용합니다. italic과 oblique가 있지만 italic을 보통 씁니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #italic{ font-style:italic; } </style> <p id="italic">기울어짐</p> <p>안기울어짐</p> </body> </html> | cs |
- font속성
이것은 방금까지 본속성들을 모아서 쓸 수 있습니다.
font:(style) (varient) (weight) (size)/(줄높이) (글꼴)
속성값:caption, icon, menu등으로 자동으로 그에맞는 텍스트양식으로 만들어 줍니다.(font:icon이렇게 사용가능 합니다.)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #f{ font:italic small-caps 900 32px/10px Consolas, sansserif; } </style> <p id="f">all</p> <p style="font:icon">font에서icon</h1> </body> </html> |
텍스트 관련 스타일
- color속성
color:색깔 이렇게 지정가능하며 텍스트의 색깔을 바꿔줍니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #red_color{ color:red; } </style> <h1 id="red_color">글자</h1> <h1>글자</h1> </body> </html> | cs |
- text-decoration속성
underline과같은 밑줄 취소선같은 것들을 표시할 수 있습니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #emphasize{ text-decoration:underline; } </style> <h1 id="emphasize">밑줄</h1> </body> </html> | cs |
- text-trasform속성
텍스트의 대소문자에 대한 태그입니다. 첫 글자 대문자, 대문자변환, 소문자변환같은 것들을 할 수 있습니다.
(속성값:uppercase, capitalize등)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #uppercase{ text-transform:uppercase; } </style> <h1 id="uppercase">abc</h1> </body> </html> | cs |
- text-shadow속성
말그대로 그림자같이 글자를 표시할 때 사용합니다.
가로, 세로, 번짐, 색상순으로 코드에 표기해야합니다.(','로 한 글자 한 글자 지정할 수 있습니다.)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #shadow{ text-shadow:4px 3px 3px #ff0000;//,로 한 글자 한 글자 shadow효과를 지정할 수 있다. } </style> <h1 id="shadow">HTML5</h1> </body> </html> | cs |
- white-space속성
글자의 공백을 하나로 표기할지 여러개 표시 가능하게 할지 줄넘김을 사용할지등을 조정하는 태그입니다.(예로 pre-wrap은 공백을 여러개 표시 가능하게 하고 줄넘김또한 가능하게 합니다.)
(속성값:pre , pre-wrap등)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #white_space{ white-space:pre-wrap; } </style> <h1 id="white_space"> 공 백 줄 넘 김 </h1> </body> </html> | cs |
- word|letter-spacing
단어와 단어사이의 거리와 낱개의 단어사이의 거리를 조정합니다.(보통 em단위를 사용합니다.)
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html 문서</title> </head> <body> <style> #l_space{ letter-spacing:3em; } </style> <h1 id="l_space">글자</h1> </body> </html> | cs |
여기까지 포스팅을 마치도록 하겠습니다.