다연이네

[days04] 1) @font-face 2) 2D 변환 방법 본문

Web/CSS

[days04] 1) @font-face 2) 2D 변환 방법

　다연　 2020. 12. 8. 22:47
반응형

@font-face
컴퓨터에 설치되지 않은 글꼴을 웹 글꼴을 통해 사용할 수 있도록 해준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
@font-face{
	font-family:sans_light_font;
	src:url("../images/sansation_light.woff");
}

*{
 	font-family: sans_light_font;
 }
</style>

</head>
<body>
 
 <h1>@font-face Rule</h1>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit optio.</div>

<!-- p>b>{Note : }^lorem10 -->
<p><b>Note : </b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum iure?</p>
</body>
</html>

 

 

[CSS 2D 변환 방법] - 요소 이동/회전/크기조정/기울기
transform 속성
1. translate() 이동
2. rotate() 회전
3. scaleX() x크기
4. scaleY() y크기
5. scale()
6. skewX() x기울기(비틀기)
7. skewY() y기울기(비틀기)
8. skew()
9. matrix()

 

<style>
div{
	width: 300px;
	height: 100px;
	background: yellow;
	border: solid 1px black;
	/* 1. 변환 - 좌표이동 */
	/* transform: translate(50px 100px);
		-ms-transform: translate(50px 100px); */ /*IE9(익스플로어9버전 이하)  */
	
	/* 2. 변환 - 회전 */
	/* transform: rotate(20deg);
		-ms-transform: rotate(20deg); */
	
	/* 3. 변환 - 크기(너비 높이) */
	/* transform:scale(2,3);
		-ms-transform:scale(2,3); */
	/* transform: scaleX(2);
		transform: scaleY(0.5); */
		
		/* 4. 기울기(비틀기) */
	/* transform:skewX(20deg);
		transform:skewY(20deg); */
		/* transform:skew(20deg, 20deg); */
		
		/* 5. matrix() 회전, 크기, 이동, 기울기 */
		/* matrix(scaleX(), scaleY(), skewX(), skewY(), translateX(), translateY()) */
		 transform: matrix(1, -0.3, 0, 1, 0, 0); 
}
</style>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days05] CSS 전환 - transition  (0) 2020.12.09
[days05] CSS 3D 변환 - transform  (0) 2020.12.09
[days04] 텍스트 효과( text-overflow, word-wrap/break)  (0) 2020.12.08
[days04] gradient 효과, 그림자 효과  (0) 2020.12.08
[days04] background  (0) 2020.12.08
'Web/CSS' Related Articles more
Comments