Codecademy front-end engineer course
DAY8
- Learn CSS: Typography
*Typography is the art of arranging text on a page
- Font Family [폰트 설정]
: 기본 설정은 Times New Roman, 웹페이지 당 폰트 종류는 3개까지만.
h1 {
font-family: Garamond;
}
- Font weight [글씨 굵기 설정]
: If you want to get a bold text, then use the attribute 'bold'
p {
font-weight: bold;
}
p {
font-weight: normal;
}* number style
header {
font-weight: 800;
}
footer {
font-weight: 200;
}| 400 | the default font-weight of most text. |
| 700 | signifies a bold font-weight. |
| 300 | signifies a light font-weight. |
- Font style [글자 모양]
: italicize the text
h3 {
font-style: italic;
}
-Word-spacing [단어 간격]
* the default amount is 0.25em
-> Therefore, since the word-spacing is set to 0.3em, your <h1> elements get a total of 0.55em word spacing when rendered.
h1 {
word-spacing: 0.3em;
}
- Letter spacing [글자 간격]
:Tracking can be adjusted with the letter-spacing property in CSS.
h1 {
letter-spacing: 0.3em;
}
- Text transform [대소문자]
: uppercase, lowercase property
h1 {
text-transform: uppercase;
}- Text align [정렬]
:To move, or align, text, we can use the text-align property.
*left, center, right
*the default value is left
h1 {
text-align: right;
}
- Line Height anotomy [줄 높이, 행간]
:The vertical spacing between lines of text
-Line Height
: how tall we want the line containing our text to be
| absolute value (ex 1.2) | compute the line height as a ratio of the font size. |
| specified by unit (ex. 12px) | any valid CSS unit (such as pixels, percents, ems, or rems) |
*the unitless ratio value is recommended because it is responsive and based exclusively on the current font size.
p {
line-height: 1.4;
}
- Difference between Serif and Sans Serif
- Fallback Fonts
:Most computers have a small set of typefaces pre-installed.
(ex. Serif font like Times New Roman/ Sans-serif font like Arial)
*These pre-installed fonts serve as fallback fonts
-> if the stylesheet specifies a font which is not installed on a user’s computer.
h1 {
font-family: "Garamond", "Times", serif;
}-> 앞의 폰트가 적용안 되면 fallback font (serif) 적용.
- Linking Fonts [html로 폰트 연결하기]
:New fonts are often centralized in directories made available for public use (non-user fonts)
*Google Fonts is one such directory of thousands of open-source fonts, available for free use. [구글 폰트 연결 가능]
- How to link font style
:Once a font is linked, we can create CSS selectors to target elements.
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,
wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,900"
rel="stylesheet">
</head>
- Font-face1 [css로 폰트 연결]
:you can directly link the fonts by css.
1. CSS rule: (Some of the latin rules are on separate lines. You will need each of these.)
2. Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css
/* Universal Styles */
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/spacemono/v6/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
*참고
아래 링크를 복사하면 font-face 복붙할 링크 나옴
- Font face2 [상대경로로 연결]
: We can supply the user with the desired font family and host it along with our site instead of depending on a different site.
: Local fonts can be added to a document with the @font-face property and the path to the font’s source
| The main difference is the use of a relative filepath instead of a web URL. |
| We add a format for each file to specify which font to use so providing multiple font file options will support more browsers. |
@font-face {
src: url("relative-path") format('format');
}
@font-face {
font-family: "Roboto";
src: url(fonts/Roboto.woff2) format('woff2'),
url(fonts/Roboto.woff) format('woff'),
url(fonts/Roboto.tff) format('truetype');
}
*sources to find fonts to use locally, such as Font Squirrel
*CSS 추가참고사항
1) <img> transform [이미지 원만들기]
2) position [위치 변경]
3) margin, padding [마진, 패딩]
*참고하면 유용한 css관련 사이트
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position - CSS: Cascading Style Sheets | MDN
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. The source for this interactive example is stored in a GitHub repository. If you'd l
developer.mozilla.org
'Web' 카테고리의 다른 글
| [CSS] 10) 박스모델 총정리 (#border #margin) (0) | 2021.01.25 |
|---|---|
| [Front-end] 9) 프로젝트 - 정리노트 웹페이지 만들기 (0) | 2021.01.24 |
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
| [Front-end] 6) Github로 웹페이지 만들기/Semantic CSS (0) | 2021.01.19 |
| [Front-end] 5)CSS 비주얼 규칙/ Visual Studio Code로 웹페이지 만들기 (0) | 2021.01.17 |
