오늘 목표
CSS 파트
Colors 🙆♀️
Typography 🙆♀️
Grid 🙅♀️
오늘 공부한 것
Color
Color 를 적용하는 방법은 4가지
/* color name keywords */
h1 {
color: aqua;
}
/* rgba */
h2 {
background-color: rgba(0, 255, 0, 0.2);
}
/* hsla */
h3 {
color: hsla(200, 60%, 70%, 0.7);
}
/* hex */
h4 {
color: #ffffff;
}Typography
Fallback Fonts : 특정 폰트가 없을 때 대체 사용할 폰트 지정
/* Helvetica 가 없으면 sans serif 폰트를 대신 사용*/
h1 {
font-family: "Helvetica", "sans serif";
}font-weight : 폰트 굵기
- "bold" 로 표현하거나 숫자로 표현(100 ~ 900)
- default 는 normal 숫자로는 400
- 폰트마다 숫자 범위가 다르다 확인하고 사용
/* p 태그에 bold 주기 */
p {
font-weight: 700;
}line-height : 텍스트 줄 사이의 수직 간격을 설정
- 음수는 적용 X, 단위가 있는 숫자(px, %, em, rem, ect.)나 없는 숫자(2, 3, ect.) 가능
p {
line-height: 12px;
}linking fonts : 웹 폰트를 사용할 때 링크로 연결한다
<head>
<link href="웹 폰트 주소" rel="stylecheet">
</head>@font-facerule : 웹 폰트를 바로 불러올 수 있다
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}어려운 부분
폰트 부분에서 line-height 가 조금 헷갈렸다.
