'2020'에 해당되는 글 497건

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
블로그 이미지

꽃꽂이하는개발자

,

오버라이딩(Overriding) vs 오버로딩(Overloading)

2020/신입 개발자 면접 질문 모음 2020. 3. 23. 11:44
반응형

오버라이딩(Overriding)이란 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의 하는 것입니다. 즉 상속 관게에 있는 클래스 간에 같은 이름의 메서드를 정의 하는 것을 말합니다.

 

오버로딩(Overloading)이란 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 하는 기술입니다.

 

-오버라이딩 예제

public class Overriding1 {
	String name;
	int speed;
	
	public void OverringCarTest() {
		System.out.println("차의 이름은" + name + "이고, 속도는 평균 " + speed +"km 입니다.");
	}
}

 

public class OverridingTest extends Overriding1 {
	int as;
	
	public void OverridingCarTest() {
		System.out.println("차종의 이름은 " + name + " 이고, 평균 속도는 " + speed +"km 입니다.");
		System.out.println("as보증기간은 " + as + "년 입니다.");
	}
}

 

public class OverridingMain {
public static void main(String[] args) {
	OverridingTest ort = new OverridingTest();
	
	ort.name = "테슬라3";
	ort.speed = 100;
	ort.as = 5;
	
	ort.OverridingCarTest();
}
}

 

-오버로딩 예제

public class Overloading {
	void test() {
		System.out.println("매개변수 없음");
	}
	void test(int a, int b) {
		System.out.println("나의 키는" + a + "이고, 몸무게는" + b + "입니다.");
	}
	void test(double c) {
		System.out.println("점프력은" + c + "입니다");
	}
}

public class OverloadingTest {
	public static void main(String[] args) {
		Overloading ol = new Overloading();
	
		ol.test();
		
		ol.test(170, 70);
		
		ol.test(53.7);	
	
	}
	
	
}

반응형
저작자표시

'2020 > 신입 개발자 면접 질문 모음' 카테고리의 다른 글

면접 질문 # 다형성  (0) 2020.03.26
개발자 면접질문 # 트랜잭션이란  (0) 2020.03.25
신입 개발자 면접 질문 #Servelt & JSP의 4가지 Scope  (0) 2020.03.20
신입개발자 면접 질문 #JSP  (0) 2020.03.16
신입개발자 기술면접 #Spring framework  (0) 2020.03.16
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
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

티스토리툴바