| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |
참조) https://webclub.tistory.com/356
|
em
부모의 폰트사이즈 X 자신의 폰트 사이즈가 된다. |
body { font-size:10px } div { font-size:1.2em; } <body> <div> Test (10 * 1.2 = 12px)
<div> Test (12 * 1.2)
<div>
Test (12 * 1.2 * 1.2)
</div> </div> </div> </body> |
|
rem
root (<html>) 의 폰트사이즈 X 자신의 폰트 사이즈가 된다.
width 에도 사용가능하다.
grid 에서 사용된다. |
html { font-size : 14px; } div { font-size : 1.2rem; } <body> <div> Test (10 * 1.2 = 12px) <div> Test (10 * 1.2) <div> Test (10 * 1.2) </div> </div> </div> </body> |
|
vh & vw 뷰포트의 너비값과 높이값
반응형에 사용 |
브라우저 높이가 900px 이면 1vh = 9px, 750px 이면 1vh = 7.5px
|
|
vmin & vmax |
.box1 # 가로는 100%, 세로는 가로길이인 정사각형 |
| Div.가상요소 설명 (0) | 2021.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |
| Div.가상요소 설명 (0) | 2021.04.05 |
|---|---|
| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |
--main-page-color 라는 지역변수를 정의하고, var 로 불러서 사용.
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--main-page-color:blue;
}
div
{
background-color:var(--main-page-color);
}
h1
{
--main-page-color:red;
background-color:var(--main-page-color);
}
</style>
</head>
<body>
<div>Haha</div>
<h1>haha</h1>
</body>
</html>
| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |
| Div p 와 Div > p 의 차이점 (0) | 2018.06.03 |
# Transform ( rotate / skew )
.myclass { transform: rotate(45deg) skew(10deg,0deg); }.ex-03 {
display:inline-block;
width: 120px;
height: 120px;
margin: 0 30px 20px 30px;
background-color: #ff655e;
color:#fff;
font-size:10px;
line-height: 120px;
}
.ex-03.rotate { transform: rotate(45deg); }
.ex-03.skew { transform: skew(20deg,10deg); }
2D Transform 메소드 정리함수설명
| translate(x,y) | 객체의 위치를 가로(x), 세로(y) 방향을 정의하여 이동시킵니다. 단위로는 px, %, em 따위를 사용할 수 있습니다. 예를들어, translate(100px, 100px)은 객체를 우측으로 100px, 하단으로 100px만큼 이동시킵니다. 또한, 양수와 음수를 사용할 수 있습니다. 이 부분은 아래를 더 읽어보세요. | |
| translateX(n) | 객체의 위치를 가로 방향으로만 이동시킵니다. translateX(100px)은 우측으로 100px만큼 이동합니다. -100px과 같이 음수로 기재하면 반대방향인 좌측으로 100px만큼 이동합니다. | |
| translateY(n) | 객체의 위치를 세로 방향으로만 이동시킵니다. -100px과 같이 음수로 기재하면 반대방향인 상단으로 100px만큼 이동합니다. | |
| scale(x,y) | 객체의 크기를 늘이거나 줄일 수 입니다. x는 너비, y는 높이가 됩니다. x와 y는 0부터 1까지 사이의 숫자만 기재합니다. 1이 기본 크기, 2는 2배 크기, 3은 3배 크기이며, 0.9는 기본 크기의 90% 크기, 0.5는 절반 크기입니다. 0은 아예 화면에서 사라지고, 0.15는 기본 크기의 15% 크기입니다. translate와 같이 음수를 사용하지 않고 소숫점 단위의 숫자를 사용한다는 것에 유의하세요. 따라서, 너비와 높이 100px짜리 객체가 있을 경우, scale(2,0.5)를 적용했을 때는 너비 200px, 높이 50px로 변경됩니다. 대부분 객체의 크기는 미리 css의 width와 height 속성을 사용하여 정의를 하기 때문에, Transform에서의 scale() 함수에서는 미리 정해진 크기에 비례하여 늘이거나 줄이는 역할을 합니다. |
|
| scaleX(n) | 객체 x축 방향으로 늘이거나 줄입니다. | |
| scaley(n) | 객체의 y축 방향으로 늘이거나 줄입니다. | |
| rotate(angle) | 객체를 회전시킵니다. rotate(45deg)는, 객체를 시계방향으로 45도 돌립니다. 반시계 방향으로 돌리고 싶다면 rotate(-45deg)처럼 음수를 사용하세요. | |
| skew(x-angle,y-angle) | 객체를 기울입니다. 실제로 기울이는 것이 아니라, 선을 왜곡시켜 그렇게 보이게 하는 의미입니다. x는 수평축 기울임, y는 수직축 기울임입니다. skew(10deg, -10deg)와 같이 표기하며, 음수는 양수의 반대방향입니다. skew는 CSS 표준 초기 초안(Early Draft)에 명시되었다가 삭제된 비표준 함수입니다. 따라서 향후 확정된 권고안이 나오기 전까지는 사용을 자제하는 것이 좋습니다. |
|
| matrix(scaleX, tanY, tanX, scaleY, translateX, translateY) | Transform이 가지고 있는 모든 함수를 한꺼번에 정의할 수 있습니다. 다만, 각 수치의 단위가 달라지거나 아예 다른 단위를 넣어야 하는 등의 혼란스러움이 있기 때문에 설명을 잘 읽어야 합니다. 매트릭스를 잘 사용하면 입력해야 할 코드의 양이 줄겠죠. 구문을 좀 더 알기쉽게 작성하면, matrix(너비, 수직기울기, 수평기울기, 높이, 수평이동, 수직이동)입니다. 더 유심히 보아야 할 부분은 아래의 리스트를 참조하세요.
|
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.ex-04
{
position: relative;
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 1px;
background-color: #e5eeee;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
}
.myClass
{
width: 128px;
height: 128px;
background-color:#ffffff;
border: 1px solid #000000;
transition: transform 1s ease;
}
</style>
<style>
.myClass1:hover
{
transform: translateX(60px);
}
.myClass2:hover
{
transform: translateY(60px);
}
.myClass3:hover
{
transform: translate(60px, 60px);
}
.myClass4:hover
{
transform: scaleX(2);
}
.myClass5:hover
{
transform: scaleY(2);
}
.myClass6:hover
{
transform: scale(2, 2);
}
</style>
</head>
<body>
<div class="ex-04">
<div class="myClass myClass1">transform: translateX(60px)</div>
</div>
<div class="ex-04">
<div class="myClass myClass2">transform: translateX(60px)</div>
</div>
<div class="ex-04">
<div class="myClass myClass3">transform: translateX(60px)</div>
</div>
<div class="ex-04">
<div class="myClass myClass4">transform: translateX(60px)</div>
</div>
<div class="ex-04">
<div class="myClass myClass5">transform: translateX(60px)</div>
</div>
<div class="ex-04">
<div class="myClass myClass6">transform: translateX(60px)</div>
</div>
</body>
</html>
# 좌표계
기준점
- 움직임이 발생시 움직이지 않는 고정점
- 기준점에 따라 객체가 움직인다.
- Syntax
transform-origin: 50% 50%- Example
.myClass {
transform: rotate(360deg);
transform-origin: 0% 0%
}
.myClass {
transform: scale(2,2);
transform-origin: 0px 0px;
}
# 주의할 점
- 웹 애니메이션은 Anti Aliasing 이 없다.
그래서 경계선 일그러짐 (=Jagged) 발생. 해결책은 outline: 1px solid transparent 추가
| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |
| Div p 와 Div > p 의 차이점 (0) | 2018.06.03 |
.element
{
transition: opaticy 300ms ease-in-out 1s;
}
| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| Div p 와 Div > p 의 차이점 (0) | 2018.06.03 |
div p : div 아래에 있는 모든 p
div > p : div 1단계 아래에 있는 p
| 2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch (0) | 2020.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |