<!--
※글자 속성
font-family : 글꼴을 지정 (운영체제에 설치된 폰트)
font-size : 폰트의 크기를 지정
color : 폰트의 색상을 지정 (색상코드, rgb(), rgba())
font-weight : 폰트의 두께를 지정 (thin, regular, bold, 지원되는 지정값)
text-align : 글자 정렬(left(기본값), center, right)
line-height : 글자 행 간격을 지정
text-transform : 영문자를 대문자, 소문자로 변경 (uppercase, lowercase, captalize)
text-decoration : 글자의 언더바를 제거(none), 밑줄 표시(underline), 윗줄표시(overline)
text-shadow : 글자에 그림자 생성 (값1, 2, 3, 4)
값1-오른쪽 그림자의 거리
값2-아래쪽 그림자의 거리
값3-번짐의 정도
값4-그림자의 색상
※ 글꼴 지정 방식: 웹사이트 전체에 적용하는 글꼴(본문 내용)이 있고 제목에 적용하는 글꼴이 있다. 본문 내용은 고딕체(sans-serif)로 사용하고, 제목은 주로 명조체(serif)로 사용한다. 본문 내용에 사용하는 글꼴의 지정은 body요소에 적용하고 제목에 사용하는 글꼴의 지정은 h요소에 적용한다.
(ex.body { font-family : roboto, sans-serif; }
h1, h2, h3 { font-family: Uchen, serif; } )
지정한 폰트가 없는 유저를 위해 대체 폰트를 여러개 적을 수 있다.
※웹 폰트
운영체제에 설치된 서체를 적용하는 것이 아니라 웹 서버에 있는 글꼴을 적용.
① @font-face 속성의 사용
-eot 와 woff 폰트 포맷을 생성한다.
-@font-face 속성으로 글꼴을 적용.
② 구글 웹 폰트 서비스의 사용
※폰트 크기 단위
①고정형: px
②가변형: %, em, rem
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>글자속성</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=Gugi&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: chs; /*글꼴명 지정*/
src:url(./fonts/ChosunNm.eot);
src:url(./fonts/ChosunNm.woff) format('woff');
}
body { font-family: 'Gugi', cursive; font-size: 15px; color: #333; text-align: center;}
h1, h2, h3, h4, h5, h6 { font-family: chs, serif; font-size: 42px; color:#fff; text-align: center; text-decoration: underline; text-transform: uppercase; text-shadow: 1px 1px 5px hotpink; letter-spacing: -2px; word-spacing: 5px;}
section h3 {text-indent: -3000px;} /*텍스트를 웹 브라우저에 표시하고 싶지 않은 경우에 사용한다*/
section p { width: 200px; margin:200px auto;
white-space:nowrap; /*줄바꿈을 하지않음*/
overflow: hidden; /*박스 영역 외부 콘텐츠를 감춤*/
text-overflow: ellipsis; /* 박스 영역 외부 콘텐츠를 ...처리 */
}
</style>
</head>
<body>
<h2>I wanna go home</h2>
<p>졸리다 집에 갈래</p>
<section>
<h3>가릴내용</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</body>
</html>
-------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
.shadow{
width: 250px; height: 250px; margin: 250px auto;
background:#999;
border: 5px solid #36f;border-radius: 50%;
box-shadow: 20px 20px 10px #000,
inset 20px 20px 10px rgba(255, 255, 255, 0.8), 0 0 10px 20px rgba(0,0,255,0.7);
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 복습/실습 (0) | 2021.07.20 |
|---|---|
| CSS 선수학습(8) (0) | 2021.07.19 |
| CSS 선수학습(6) (0) | 2021.07.15 |
| CSS 선수학습(5) (0) | 2021.07.14 |
| CSS 선수학습(4) (0) | 2021.07.14 |