Color
- 3가지 Type으로 출력 가능
- color 참조 링크 : www.w3schools.com/css/css_colors.asp
CSS Colors
CSS Colors Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. CSS Color Names In CSS, a color can be specified by using a predefined color name: Try it Yourself » CSS/HTML support 140 standard color names. CSS Backgrou
www.w3schools.com
<style>
h1{color:tomato;}
h2{color:rgb(255,40,100)}
h3{color:#FFA500}
</style>font-size
- px(pixel) : 절대값으로 적용
- rem : 유저가 상황에 맞게 사이즈 변경 가능 ( web settings 에서 font size 변경 가능 )
<style>
div{font-size: 100px;}
#rem{font-size: 2rem;}
</style>text-align
- text-align: center or left or right
- 글자 생성기 : lorem20
<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 300px;
text-align:center;
border: 1px solid gray
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt libero in odio doloribus molestias fugit perferendis esse, quod sint aspernatur?
</p>
</body>
</html>
font-family
- font가 없을경우 순위별로 적용 ( font-family: 1순위, 2순위, 3순위; )
- 장식: serif or sans-serif
- 고정폭: monospace
- font-weight(두께): bold (두껍게)
<!DOCTYPE html>
<html>
<head>
<style>
#type1{
font-size: 5rem;
font-family: arial, verdana, "Helvetica Neue", serif;
font-weight: bold;
line-height: 2;
}
#type2{
font: bold 7rem/2 arial, verdana, "Helvetica Neue", serif;
}
</style>
</head>
<body>
<p id="type1">
Hello World <br>
Hello World
</p>
<p id="type2">
Hello World <br>
Hello World
</p>
</body>
</html>
web-font
- head link에 추가하여 직접 호출 가능
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Dancing+Script:wght@600&family=Lato:ital@1&display=swap" rel="stylesheet">
<style>
p{
font-family: 'Bungee Outline', cursive;
}
</style>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.
Vestibulum interdum tellus sed tellus pretium vulputate. Vestibulum a mattis ante. Ut at metus eget eros dictum tristique. Proin sodales nulla eget enim pulvinar imperdiet. Aliquam et congue quam. Duis blandit dui faucibus lorem auctor, ut laoreet dolor aliquet. Vestibulum nec placerat ligula, vitae vehicula neque. Nulla dictum dui et vehicula mattis. Aenean non erat non diam sollicitudin posuere.
Donec placerat felis in elementum ullamcorper. Duis tellus nunc, eleifend non molestie eget, ornare ut risus. Morbi sit amet nunc ante. Donec vestibulum tortor nec massa vestibulum suscipit. Quisque faucibus pulvinar erat, vitae gravida tortor commodo vitae. Suspendisse malesuada urna eu imperdiet tincidunt. Curabitur non scelerisque nulla. Nullam pellentesque ante ex, eget varius odio lacinia nec. Cras sed ligula vitae odio dictum semper ut sed eros. Vivamus sollicitudin elementum felis a accumsan. In vitae mi at sem molestie bibendum nec quis libero. Fusce sed tortor ultrices, maximus risus nec, tincidunt orci.
In hac habitasse platea dictumst. Maecenas congue arcu nulla, vel pharetra mauris condimentum vel. Quisque sit amet sapien arcu. Vestibulum eu consectetur ante, vel iaculis justo. Proin in ipsum vel eros auctor rhoncus sed vel lacus. Vestibulum suscipit dolor eget nunc accumsan semper. In ac porta libero. Pellentesque risus ipsum, egestas sit amet rhoncus eu, finibus sit amet felis. Nunc gravida nulla non elit porttitor, sed maximus arcu semper. Ut nulla ante, ornare nec quam sed, venenatis viverra odio. Ut vitae odio nisi. Nam vitae ullamcorper nulla. Sed eu fermentum velit. Pellentesque id dolor metus. Nullam pharetra pharetra enim, pretium convallis metus ultrices eget. Sed cursus vestibulum orci in cursus.
Integer commodo varius ornare. Vivamus lacus urna, scelerisque nec lectus porta, interdum commodo dolor. Curabitur sagittis diam quis tellus semper commodo. Ut non orci consectetur, cursus urna et, tincidunt est. Donec mollis vulputate tempus. Aliquam sapien leo, venenatis at ligula vitae, vestibulum finibus ipsum. Donec pulvinar pretium mattis. Mauris risus augue, eleifend et suscipit ac, convallis vel nisl. Fusce tincidunt fringilla vulputate. Ut porttitor lorem vitae sodales finibus.
</p>
</body>
</html>[다른폰트 사용법]
1. web font generator 검색
2. 다운로드 받은 font 업로드
3. 법적 문제 점검 체크박스 선택 후 다운로드
4. add folder
5. @font-face의 font-family: 이름을 지정하고 style에서 font-family: ABC 로 사용 가능함
'Devops > HTML' 카테고리의 다른 글
| 03. Layout - 작성중 (0) | 2021.04.27 |
|---|---|
| 01. selector (0) | 2021.04.22 |
