'2020/CSS'에 해당되는 글 30건

CSS: transform 3D 변환 함수

2020/CSS 2020. 3. 23. 21:06
반응형
translate3d(x, y, z) 이동(x축, y축, z축) 단위
translateZ(z) 이동(z축) 단위
scale3d(x,y,z) 크기(x축, y축, z축) 배수
scale(z) 크기(x축) 배수
rotate3d(x,y,z,a) 회전(x벡터, y벡터, z벡터, 각도) 없음, deg
rotateX(x) 회전(x축) deg
rotateY(y) 회전(y축) deg
rotateZ(z) 회전(z축) deg
perspective(n) 원근법(거리) 단위(transform: 가장 앞에 있어야함.)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3차원 변환효과 없음
반응형
저작자표시

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

animation-timing-function  (0) 2020.03.24
@keyframes  (0) 2020.03.24
CSS : transform 2D 변형효과  (0) 2020.03.23
text-indent  (0) 2020.03.23
text decoration  (0) 2020.03.23
블로그 이미지

꽃꽂이하는개발자

,

CSS : transform 2D 변형효과

2020/CSS 2020. 3. 23. 20:57
반응형
.box{

/* 이동 */
transform : translate(x,y);
transform : translateX(x);
transform : translateY(y);
/* 크기, 단위는 배수로만 가능 */
transform : scale(x,y);
transform : scaleX(x);
transform : scaleY(y);
/* 회전 ex) 180deg */
transform : rotate(degree);
/*기울임 ex) 10deg  */
transform : skew(x-deg, y-deg);
transform : skewX(x-deg);
transform : skewY(y-deg);
/* 2차원 변환 효과 */
transform : matrix(n, n, n, n, n, n)
}

 

반응형
저작자표시

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

@keyframes  (0) 2020.03.24
CSS: transform 3D 변환 함수  (0) 2020.03.23
text-indent  (0) 2020.03.23
text decoration  (0) 2020.03.23
css: overflow  (0) 2020.03.23
블로그 이미지

꽃꽂이하는개발자

,

text-indent

2020/CSS 2020. 3. 23. 16:58
반응형

음수값을 사용할 수 있으며 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기 합니다.

 

div{
text-indent: @@px;
}
//들여쓰기 필요시 사용합니다.
//또한 화면에 나와있는 필요없는 text를 밀어내기위해서도 음수값을 입력함으로써 사용합니다.
반응형
저작자표시

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

CSS: transform 3D 변환 함수  (0) 2020.03.23
CSS : transform 2D 변형효과  (0) 2020.03.23
text decoration  (0) 2020.03.23
css: overflow  (0) 2020.03.23
border line  (0) 2020.03.23
블로그 이미지

꽃꽂이하는개발자

,

text decoration

2020/CSS 2020. 3. 23. 16:53
반응형
div {
text-decoration: none; //아무 줄도 없음
text-decoration: line-through; //글자 중간에 선
text-decoration: underline; //밑줄
text-decoration: overline; //윗줄
}
반응형
저작자표시

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

CSS : transform 2D 변형효과  (0) 2020.03.23
text-indent  (0) 2020.03.23
css: overflow  (0) 2020.03.23
border line  (0) 2020.03.23
box-sizing: border-box  (0) 2020.03.23
블로그 이미지

꽃꽂이하는개발자

,

css: overflow

2020/CSS 2020. 3. 23. 15:45
반응형
div {
width : 300px;
height: 300px;
border: 4px solid;
overflow: auto; //넘치는 부분에 스크롤생성
overflow: visible; //넘침
overflow: scroll; // 가로 세로 둘다 스크롤이 생김
overflow: hidden; //넘치는 부분 안보이게 함
}
반응형
저작자표시

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

text-indent  (0) 2020.03.23
text decoration  (0) 2020.03.23
border line  (0) 2020.03.23
box-sizing: border-box  (0) 2020.03.23
reset css  (0) 2020.02.19
블로그 이미지

꽃꽂이하는개발자

,

border line

2020/CSS 2020. 3. 23. 14:59
반응형

solid : 실선

dotted : 점선

dashed 파선

double: 두 줄선

groove 홈이 파여있는 모양

ridge 솟은 모양

inset 요소 전체가 들어간 모양

outset 요소 전체가 나온 모양

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin: 10px;
        display: inline;
      }
      .A {
        width: 100px;
        height: 100px;
        border: 10px solid red;
      }
      .B {
        width: 100px;
        height: 100px;
        border: 10px dotted red;
      }
      .C {
        width: 100px;
        height: 100px;
        border: 10px dashed red;
      }
      .D {
        width: 100px;
        height: 100px;
        border: 10px double red;
      }
      .E {
        width: 100px;
        height: 100px;
        border: 10px groove red;
      }
      .F {
        width: 100px;
        height: 100px;
        border: 10px ridge red;
      }
      .G {
        width: 100px;
        height: 100px;
        border: 10px inset red;
      }
      .H {
        width: 100px;
        height: 100px;
        border: 10px outset red;
      }
    </style>
  </head>
  <body>
    <div class="A">solid</div>
    <div class="B">dotted</div>
    <div class="C">dashed</div>
    <div class="D">double</div>
    <div class="E">groove</div>
    <div class="F">ridge</div>
    <div class="G">insert</div>
    <div class="H">outset</div>
  </body>
</html>
반응형
저작자표시

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

text decoration  (0) 2020.03.23
css: overflow  (0) 2020.03.23
box-sizing: border-box  (0) 2020.03.23
reset css  (0) 2020.02.19
CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn  (0) 2020.02.18
블로그 이미지

꽃꽂이하는개발자

,

box-sizing: border-box

2020/CSS 2020. 3. 23. 14:43
반응형
div {
 width : 100px;
 height : 100px;
 background: red;
 padding: 10px, 20px;
 }
 
 //이렇게만 css를 해준다면가로 100px, 세로 100px, 배경색 빨강, 에다가 padding 10px, 20px를 주기 때문에
 가로는 총 120px, 세로는 110px가 된다. 그러나
 
 div {
 width : 100px;
 height : 100px;
 background: red;
 padding: 10px, 20px;
 box-sizing : border-box;
 }
 를 해준다면 가로 세로 100px 안에padding을 10px, 20px를 자동으로 설정해준다.
반응형
저작자표시

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

css: overflow  (0) 2020.03.23
border line  (0) 2020.03.23
reset css  (0) 2020.02.19
CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn  (0) 2020.02.18
CSS 사진회전, 그림자  (0) 2020.02.18
블로그 이미지

꽃꽂이하는개발자

,

reset css

2020/CSS 2020. 2. 19. 12:21
반응형

모든 기본값을 마진 0으로 만듭니다.

https://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

수많은 태그들이 스타일을 가지고 있습니다.

 

반응형
저작자표시

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

border line  (0) 2020.03.23
box-sizing: border-box  (0) 2020.03.23
CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn  (0) 2020.02.18
CSS 사진회전, 그림자  (0) 2020.02.18
css focus 기능  (0) 2020.02.18
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

티스토리툴바