참조
| 3dtransforms.desandro.com - carousel (0) | 2019.08.26 |
|---|---|
| WEB.3D.desandro.Cube (0) | 2019.08.19 |
| Online Tutorials.Text Changing Animation (0) | 2019.08.19 |
| Online Tutorials.4Card.Rotate (0) | 2019.08.18 |
| Online Tutorials.4Card.Blur (0) | 2019.08.17 |
| 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 |
1. http://prettydiff.com/?m=beautify
코드 정리 및 비교도 하고 최소화도 해줍니다.
몇가지 속성을 주어서 사용자 입맞에 맞게 코드를 정리할 수 있습니다.
3. http://tools.arantius.com/tabifier
그냥 간단하게...
4. http://html.segio.com/ko/?shell=index.shell:0
코드 정리라기 보다는 불필요한 태그등을 "미리보기"화면을 보면서 정리할 수 있는 사이트
5. http://www.dpriver.com/pp/sqlformat.htm
SQL 코드를 정리해주는 사이트
| WebSocket (0) | 2019.07.24 |
|---|---|
| font awesome with bootstrapcdn (0) | 2018.12.09 |
| Icon 적용하기 (0) | 2018.10.09 |
| 구글 폰트 적용하기 (0) | 2018.10.09 |
| Color Pick, Palette, 280 colors, Collaborating with 13 designers around the world (0) | 2018.10.09 |
| 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 |
| 체크 무늬 3D 배경 회전 (0) | 2019.10.12 |
|---|---|
| Pie Chart (0) | 2019.10.08 |
| Pie Chart (0) | 2019.10.08 |
| Typing Text Animation (0) | 2018.09.28 |
| Gradient Button,그래디언트버튼 (0) | 2018.09.28 |
| 담배연기 Animation + 글자 나타나기 (0) | 2019.10.26 |
|---|---|
| Pie Chart (0) | 2019.10.08 |
| Pie Chart (0) | 2019.10.08 |
| Typing Text Animation (0) | 2018.09.28 |
| Gradient Button,그래디언트버튼 (0) | 2018.09.28 |
<!doctype html>
<html>
<head>
<style>
.pie
{
padding: 48vmin;
border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
}
</style>
</head>
<body>
<div class="pie" style="--value: 40%;"></div>
</body>
</html>| 담배연기 Animation + 글자 나타나기 (0) | 2019.10.26 |
|---|---|
| 체크 무늬 3D 배경 회전 (0) | 2019.10.12 |
| Pie Chart (0) | 2019.10.08 |
| Typing Text Animation (0) | 2018.09.28 |
| Gradient Button,그래디언트버튼 (0) | 2018.09.28 |
<!doctype html>
<html>
<head>
<style>
.pie
{
padding: 48vmin;
border-radius: 50%;
--value: 0%;
background: conic-gradient(red var(--value, 0%), yellow 0 60%, black 0);
}
</style>
</head>
<body>
<div class="pie" style="--value: 40%;"></div>
</body>
</html>
| 체크 무늬 3D 배경 회전 (0) | 2019.10.12 |
|---|---|
| Pie Chart (0) | 2019.10.08 |
| Typing Text Animation (0) | 2018.09.28 |
| Gradient Button,그래디언트버튼 (0) | 2018.09.28 |
| Border 애니메이션 (0) | 2018.09.28 |
--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 |