Font
Note
- Try not to use more than two fonts per project. If it's only used for couple times, better to make them as images and use because fonts are quite heavy.
- Don't forget to check copyrights (if it can be used commercially free!)
Using @font-face & custom property(variable)
@font-face {
font-family: 'Cafe24SsurroundAir';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* using custom property(variable) when using font. it's good to use if the font name is long */
:root {
--main-font: Cafe24SsurroundAir;
}
p {
font-family: var(--main-font);
}
Using downloaded font / trueType
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-3</title>
<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=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
@font-face {
/* You can also make it shorter! */
font-family: 'Gm';
src: url(../font_file//GmarketSansTTFLight.ttf) format('trueType');
}
p {
font-family: 'Gm';
}
strong {
font-size: 20px;
}
</style>
</head>
<body>
<p>안녕하세요~~! <strong>지마켓 폰트</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta enim magnam,
aperiam quos
quae
inventore
tempore facere, reiciendis voluptates ratione accusantium officia repellat error? Laborum numquam pariatur
consequatur est!</p>
</body>
</html>
Using link
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-2</title>
<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=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<p>안녕하세요! Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta enim magnam, aperiam quos quae
inventore
tempore facere, reiciendis voluptates ratione accusantium officia repellat error? Laborum numquam pariatur
consequatur est!</p>
</body>
</html>
Things to read
about optimising font
- https://d2.naver.com/helloworld/4969726
- https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0
why use rem?
<flex-grow>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.container {
display: flex;
height: 300px;
margin: 10px;
/* flex-direction: column; */
}
.items {
border: 2px solid black;
border-radius: 6px;
background-color: pink;
margin: 10px;
}
.items:nth-child(1) {
flex-grow: 5;
}
.items:nth-child(2) {
flex-grow: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</body>
</html>
flex-grow and flex-shrink: accept unitless value that serves as proportion. If an item has flex-grow or flex-shrink value, it grows or shrink.
If flex-shrink: 0, it will not shrink but it will shrink from value of 1.
flex-basis
:It only works if the element is a flex item. It's not width or height but more like proportion of its axis.
if flex-direction: row, this will take space based on x-axis and flex-direction: column, it will take space based on y-axis.
flex
: shorthand for flex-grow, flex-shrink and flex-basis combined.
** It is recommended that you use this shorthand property rather than set the individual properties.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.container {
display: flex;
height: 300px;
margin: 10px;
/* flex-direction: column; */
}
.items {
border: 2px solid black;
border-radius: 6px;
background-color: pink;
margin: 10px;
}
.items:nth-child(1) {
flex: 1;
}
.items:nth-child(2) {
/* flex-basis: 200px; */
flex: 200px;
}
.items:nth-child(3) {
flex: 1;
}
.items:nth-child(4) {
flex: 1;
}
.items:nth-child(5) {
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</body>
</html>
flex-wrap
It's good to use for responsive design!
If elements are flex item and have value of flex-wrap: wrap, flex items goes to the next line automatically when the screen gets smaller.
flex-flow
It's a shorthand for the flex-direction and flex-wrap. The default value is row and nowrap.
/* example */
.container {
flex-flow: column wrap;
}
Flexbox practice
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<title></title>
<style>
body {
display: flex;
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
}
header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #2d3436;
}
nav {
width: 96%;
display: flex;
justify-content: center;
align-items: center;
background-color: #dfe6e9;
}
nav ul {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
width: 92%;
background-color: #74b9ff;
margin: 0 20px;
}
ul li {
width: 30%;
background-color: #e84393;
margin: 0 14px;
}
main {
width: 100%;
background-color: #dfe6e9;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
section {
display: flex;
width: 70%;
justify-content: space-around;
align-items: center;
width: 72%;
background-color: #00cec9;
}
article {
width: 45%;
background-color: #dfe6e9;
margin: 20px;
}
aside {
flex: 1;
background-color: #636e72;
}
footer {
width: 100%;
background-color: #fdcb6e;
}
@media screen and (max-width: 1000px) {
section {
display: flex;
width: 100%;
flex-wrap: wrap;
}
article {
width: 80%;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>menu</li>
<li>menu</li>
</ul>
<ul>
<li>menu</li>
<li>menu</li>
</ul>
</nav>
</header>
<main>
<section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, saepe nihil nulla
laborum eligendi rerum possimus ullam doloribus iure quis, quos soluta vero quas esse voluptatibus fuga
numquam fugiat?
Modi, quo! Aspernatur ullam sed maxime illum quisquam voluptatibus incidunt dolorum sint non fuga
excepturi veniam ratione nihil, culpa temporibus reprehenderit aliquam voluptas eius obcaecati itaque
atque aperiam odio. Deserunt.</article>
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi commodi provident delectus beatae
dolorem explicabo fugit, maxime sit modi cum saepe dolores recusandae! Nostrum unde sequi, provident hic
alias nisi.
Corrupti provident blanditiis tempore. Magni facilis incidunt fugiat quis quasi corrupti cum ut
laudantium eum, hic recusandae cupiditate consequatur, magnam, eligendi vero odio sit reprehenderit
placeat dolores esse officia. Incidunt?</article>
</section>
<aside>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi commodi provident delectus beatae
dolorem explicabo fugit, maxime sit modi cum saepe dolores recusandae! Nostrum unde sequi, provident hic
alias nisi.
Corrupti provident blanditiis tempore. Magni facilis incidunt fugiat quis quasi corrupti cum ut
laudantium eum, hic recusandae cupiditate consequatur, magnam, eligendi vero odio sit reprehenderit
placeat dolores esse officia. Incidunt?</aside>
</main>
<footer>footer</footer>
</body>
</html>
Top comments (0)