TIL (2021.12.26)- [CSS] 텍스트 관련 스타일
텍스트 관련 스타일
스타일 속성과 속성 값은 다양하게 있다. 먼저 텍스트와 관련된 글꼴과 텍스트, 글자 색 등 스타일 설정하는 방법에 대해서 정리해볼 것이다.
글꼴 스타일
font
-
font-weight: 글씨 굵기를 지정하는 속성font-weight: normal(400);: 속성 값 normal, 400은 기본 두께font-weight: blod(700);: 속성 값 bold, 700은 두껍게 설정.font-weight: 100~900;: 100에서 900사이의 수로 두께를 다양하게 설정할 수 있다.
-
font-family: 글꼴을 지정하는 속성-
font-family: 글꼴1, "글꼴2", ... 글꼴 계열;: 한 가지 글꼴만 지정하지 않고, 글꼴1이 없을 경우 글꼴2가 지정되도록, 글꼴 2가 없으면 글꼴3이 지정되도록 여러 개의 글꼴을 지정한다./*애플 홈페이지에 있는 글꼴 속성*/ {font-family: "SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","HelveticaNeue","Helvetica","Arial",sans-serif;}
-
-
웹 폰트 사용
- 구글 폰트
Browse Fonts
구글 폰트 사이트에서 원하는 폰트를 선택하여<link> 또는 @import를 통해서 사용할 수 있다.
- 구글 폰트
<!--<link> 방식 -->
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
</head>
<body>
<h1> Sejin's Homepage </h1>
</body>
</html>/* html <link> 연결 후 css 파일에서 글꼴 지정 */
h1 {
font-family: 'Song Myung', serif;
}
/* ----------------------------- */
/*@import 방식*/
@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');
h1 {
font-family: 'Song Myung', serif;
}
font-size: 글자 크기- px 단위 : 모니터상의 화소 하나의 크기에 대응되는 단위로 고정된 값이어서 사용자가 글꼴의 크기를 조절할 수 없다.
- em 단위 : 부모 요소의 폰트 사이즈에 따라서 상대적으로 크기가 결정된다. 부모의 크기에 영향을 받기 때문에 파악하기 어려워 사용 권장하지 않는다.
- rem 단위 : 루트(html) 요소의 폰트 사이즈에 따라서 상대적으로 크기가 결정된다. rem 단위 사용을 권장한다.
텍스트 스타일
text
-
text-decoration: 문자의 장식(선)text-decoration: none: 밑줄 없앰text-decoration: underline: 밑줄 표시text-decoration: overline: 영역 위로 선을 표시text-decoration: line-through: 취소선을 표시
-
text-align: 문자의 정렬 방식text-align: left: 왼쪽 정렬text-align: center: 가운데 정렬text-align: right: 오른쪽 정렬
-text-indent : 문단 들여쓰기. 음수를 사용하면 반대로 내어쓰기가 된다. 단위로 들여쓸 크기를 지정하거나 백분율을 이용해서 부모 요소의 너비를 기준으로 상대적 크기를 지정할 수도 있다.
ex : {text-indent: 15px;} / {text-indent: 5%}
color
color: 색상;: 글자 색 지정. 색상 값은 16진수나 rgb, hsl 또는 색 이름으로 쓸 수 있다.
line
line-height: 줄 간격 조절. 요소의 글꼴 크기의 배수로 지정이 가능하다.
p {
font-size: 10px;
line-height: 1.4;
}
/*요소의 글꼴 크기가 10px이니 줄 간격은 1.4배인 14px임*/
경험한 것을 기록