CSS 글꼴 (font)
- generic family : 비슷한 모양을 가지는 글꼴 집합("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("TImes", "Courier" 등)
- font-family : 해당 속성은 하나의 글꼴만을 설정 할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다. font-family 속성값이 여러개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 옵니다. 사용자에게 해당 글꼴이 있는지 여부를 판단하고 존재하면 해당 글꼴로 존재하지 않으면 다음 글꼴을 가져와 확인합니다.
글꼴의 이름은 반드시 따옴표로 둘러 쌓아야 하고 여러 개의 글꼴을 나열할 때는 쉼표로 구분 짓습니다.
<style>
.serif { font-family: "Times New Roman", Times, serif; }
.sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>- font-style : 주로 이탤릭체를 사용하기 위해 사용하며, 3가지의 속성값이 존재합니다.
- normal : 텍스트에 어떠한 스타일도 적용하지 않는다
normal 스타일
- italic : 텍스트를 이탤릭체로 나타냅니다.
italic 스타일
- oblique : 텍스트를 기울입니다.
oblique 스타일
- font-variant : 속성 값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자 글꼴로 변경합니다. 이때 대문자는 기존 크기대로 출력됩니다.
- normal
Aa Bb Cc Dd
- small-caps
Aa Bb Cc Dd
- font-weight : 텍스트를 얼마나 두껍게 표현할지를 설정합니다. 사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다. 또한 100, 200, 과 같이 숫자로 텍스트의 두께를 설정할 수 있습니다.
- lighter
lighter 적용
- normal
normal 적용
- bold
bold 적용
- bolder
bolder 적용
- 500
500 적용
-1000
1000 적용
font-size
→ 텍스트의 크기를 설정합니다.
| ※주의! 제목을 표현하기 위해서는 단순히 크기만을 늘리는 행위는 절대 해서는 안됩니다. 제목을 위한 태그인 <h1> ~ <h6>를 이용해야 합니다. |
font-size 의 속성값에는 절대적 크기와 상대적 크기가 존재합니다.
- 절대적 크기 : 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
- 상대적 크기 : 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기가 같이 변하는 방식입니다.
font-size의 크기의 대표적인 단위는 백분율 단위(%), 배수 단위(em) 그리고 픽셀 단위(px)가 있습니다.
- 백분률 단위(%) : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.
백분률 100
백분률 50
백분률 150
- 배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.
배수 단위 1em
배수 단위 2.5em
배수 단위 0.5em
- 픽셀 단위(px) : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 설정합니다.
픽셀 단위 20px
픽셀 단위 10px
픽셀 단위 40px
CSS 링크
링크에는 CSS의 다양한 속성들을 적용할 수 있습니다.
링크의 상태는 총 5가지이며, 각 상태마다 다른 스타일을 적용할 수 있습니다.
1. link : 링크의 기본 상태. 사용자가 해당 링크를 통해 연결된 페이지에 아직 방문하지 않은 상태
2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지에 방문한 상태
3. hover : 사용자의 마우스 커서가 링크 위에 올라간 상태
4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태
5. focus : 키보드나 마우의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태
<head>
<style>
a:link { color : red; }
a:visted { color : purple; }
a:hover { color : blue; }
a:active { color : coral; }
</style>
</head>
<body>
<h1>링크에 여러가지 스타일 적용 시키기</h1>
<p><a href = "https://codemanmulsang.tistory.com" target ="_blank"> 프로그래밍 종합 저장소!</a></p>
</body>링크에 여러가지 스타일 적용 시키기
또한, CSS를 이용하면 간단하게 링크를 버튼처럼 만들 수 있습니다.
<head>
<style>
a:link, a:visted {
background-color : #FFA500;
color : maroon;
padding: 15px 25px;
text-align center;
text-decoration: none;
display : inline-block;
}
a : hover, a : active { bacground-color : #FF4500;}
</style>
</head>
<body>
<h1>링크를 버튼으로 만들기</h1>
<p><a href = "https://codemanmulsang.tistory.com" target ="_blank"> 프로그래밍 종합 저장소!</a></p>
</body>링크를 버튼으로 만들기
[출처]
TCPSchool
'웹 > CSS' 카테고리의 다른 글
| CSS 박스 모델 (Box Model) Margin, Padding, border (0) | 2023.06.29 |
|---|---|
| CSS - 계단식 ( Cascade ) (0) | 2023.06.28 |
| CSS - 속성(3) (0) | 2023.06.27 |
| CSS - 속성 (0) | 2023.06.26 |
| CSS (0) | 2023.06.26 |