728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>글자</title>
</head>
<style> /* 폰트는 눈누사이트 추천 */
@font-face { /* 웹에서 받아쓰는 웹폰트 */
font-family: 'SUIT-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bit';
src: url("비트비트체.ttf");
}
*{
font-family: SUIT-Regular;
}
section{
font-family: bit;
text-decoration: underline;
}
/* 기본 16px(=1em, 12pt) */
div{
/*font-family: bit;*/
font-size: 25px;
font-weight: bold; /* normal : 기본값, 보통 굵기(400) /bold : 굵게(700) */
font-style: italic;
word-spacing: 10px; /* 단어와 단어/ 태그와 태그 사이 간격 */
text-align: center;
text-shadow: 0px 2px 2px red;
/* 왼쪽,위쪽은 마이너스(-) 오른쪽,아래쪽 플러스(+) */
}
div > div{
font-size: 60%;
}
section{
font-size: 1.25rem; /* 20px */
}
article > div{
text-transform: capitalize; /* cap : 첫 글자 대문자 low : 소문자 */
letter-spacing: 3px; /* 글자사이 간격 */
line-height: 40px; /* 글자 높낮이 */
background-color: lightpink;
/* background-color: rgba(0, 0, 0, 0.8) 마지막은 투명도 */
color: white;
}
</style>
<body>
<div>
<span>This is parents text</span>
<div>This is child text</div>
</div>
<section>This is sample text</section>
<article>
<div>my first story</div>
<div>my second story</div>
</article>>
<!-- div>ul>li TAP누르면
<div>
<ul>
<li></li>
</ul>
</div>
이런식으로 자동 완성 시켜줌 이멧이라고 함 -->
<!-- section>(div>span)*3+a TAP누르면!
<section>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<a href="">
</a>
</section> -->
<!-- section>(div>span{글자$})*3 TAP누르면!
<section>
<div><span>글자1</span></div>
<div><span>글자2</span></div>
<div><span>글자3</span></div>
</section> -->
<!-- Lorem치고 TAP누르면 자동 의미없는 문장 생성 해줌 -->
</body>
</html>
728x90
반응형
'💜 HTML,CSS' 카테고리의 다른 글
| HTML&CSS 10일차 (정리x) (0) | 2024.03.23 |
|---|---|
| HTML&CSS 9일차 (정리x) (0) | 2024.03.23 |
| HTML&CSS 7일차 (정리x) (0) | 2024.03.23 |
| HTML&CSS 6일차 (정리x) (0) | 2024.03.23 |
| HTML&CSS 5일차(정리x) (0) | 2024.03.23 |