Programmers

display: inline / display: block / display: inline-block

Programmers — Wed, 15 Dec 2021 07:39:17 +0900

1) display: inline;

줄바꿈x, width, height속성 지정x, margin, padding 상하간격 반영 x

예) <span>, <a>, <em>

2) display: block;

줄바꿈o, width, heigth, margin, padding속성 지정o

예) <div>, <p>, <h1>

3) display: inline-block;

줄바꿈x, width, height, margin, padding속성 지정o

예) <button>, <input>, <select>

CSS) 변환 예제 - 카드 뒤집기

Programmers — Wed, 27 Oct 2021 09:10:47 +0900

1) 변환 예제 - 카드 뒤집기

<div class="cards">
  <div class="card">
    <div class="face face-front">
      <img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
    </div>
    <div class="face face-back">
      <img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML5">
    </div>
  </div>
</div>

.cards {
  
}
.card {
  width: 150px;
  height: 220px;
  position: relative;
  perspective: 600px;
}
.card .face {
  width: 150px;
  height: 220px;
  border: 1px solid lightgray;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 2s;
  position: absolute;
  backface-visibility: hidden;
}
.card .face-front {
  background: url("https://heropy.blog/css/images/pattern.png");
  transform: rotateY(0deg);
}
.card:hover .face-front {
  transform: rotateY(-180deg);
}
.card .face-back {
  transform: rotateY(180deg);
}
.card:hover .face-back {
  transform: rotateY(0deg);
}
.card .face-front img {
  width: 90px;
  filter: grayscale();
  opacity: .7;
  
}
.card .face-back img {
  height: 120px;
}

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

CSS) 변환 속성 - matrix()

Programmers — Wed, 27 Oct 2021 08:36:50 +0900

1) matrix(a,b,c,d,e,f)

요소의 2차원 변환(Transforms) 효과를 지정
scale(), skew(), translate() 그리고 rotate()를 지정

※ 요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용됨.
(2D 변환 함수는 matrix 로, 3D 변환 함수는 matrix3d 로)
따라서 일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 됨

matrix 연산방법

matrix 연산 예시

위의 예시와 같이 사용한다정도만 알면 된다.
scale(), skew(), translate() 그리고 rotate()를 지정하는 것이 편리하다!

CSS) 변환속성 - backface-visibility

Programmers — Tue, 26 Oct 2021 08:38:08 +0900

1) backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김을 설정

속성 값

값	의미	기본값
visible	뒷면 숨기지 않음	visible
hidden	뒷면 숨김

사용법

<img class="img1"src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
<img class="img2" src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

.img1 {
  width: 300px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: perspective(400px) rotateY(180deg);
  backface-visibility: visible;
}
.img2 {
  width: 300px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: perspective(400px) rotateY(180deg);
  backface-visibility: hidden;
}

※ backface-visibility를 보면 좌측img1은 visible로 보여지지만, 우측img2는 hidden으로 보여지지 않는다.

CSS) 변환 속성 - perspective-origin

Programmers — Tue, 19 Oct 2021 08:59:06 +0900

1) perspective-origin

원근 거리의 기준점을 설정 - 어디서 바라볼 것이냐

눈의 위치에서 바라보는 파란색 사각형

속성 값

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%

사용법1

perspective-origin: 50% 50%;

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:600px;
  perspective-origin: 50% 50%;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

perspective-origin: 50% 50%;

사용법2

perspective-origin: 100% 200%;

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:600px;
  perspective-origin: 100% 200%;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

perspective-origin: 100% 200%;

CSS) 변환 속성 - perspective

Programmers — Tue, 19 Oct 2021 08:48:25 +0900

1) perspective

하위 요소를 관찰하는 원근 거리를 설정

속성 값

값	의미	기본값
단위	px, em, cm 등 단위로 지정

사용법

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:200px;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

※ perspective는 상위 부모에게 적용해야 하위 자식들에게까지 적용이 됨
perspective의 값이 작을 수록 원근감이 커짐

2) perspective 속성과 함수의 차이점

속성 값

값	의미	기본값
perspective	관찰 대상의 부모 요소	perspective-origin
transform: perspective()	관찰 대상	transform-origin

※ perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정함.

CSS) 변환속성 - transform-style

Programmers — Tue, 19 Oct 2021 08:27:58 +0900

1) transform-style

3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

속성 값

값	의미	기본값
flat	자식 요소의 3D 변환을 사용하지 않음	flat
preserve-3d	자식 요소의 3D 변환을 사용함

사용법

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:500px;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

※ 부모요소에서 transform-style: preserve-3d;를 설정해주지 않으면 자식요소는 transform이 정상적으로 동작하지 않는다.
또한 부모요소에서 자식의 자식으로 설정이 되지 않기 때문에 각 부모와 자식 사이에 transform-style: perserve-3d가 설정되어야 한다.

CSS) 변환 속성 - transform-origin

Programmers — Tue, 19 Oct 2021 08:11:05 +0900

1) transform 변환 속성

속성 값

값	의미
transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

2) transform-origin

요소 변환의 기준점을 설정

속성 값

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%
Z축	단위	0

사용법1

transform-origin: 100% 100% 적용-> 요소의 기준값이 이미지의 우측 하단끝이 됨

<img
     src="https://heropy.blog/css/images/logo.png"
     alt="HEROPY"
>

img {
  width: 200px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: rotate(45deg);	// 0deg -> 45deg적용시 동작을 확인 할 수 있음
  transform-origin: 100% 100%;
}

0deg

45deg

사용법2

transform-origin: right bottom 적용-> 요소의 기준값이 이미지의 우측 하단끝이 됨

<img
     src="https://heropy.blog/css/images/logo.png"
     alt="HEROPY"
>

img {
  width: 200px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: rotate(45deg);	// 0deg -> 45deg적용시 동작을 확인 할 수 있음
  transform-origin: right bottom;
}

0deg

45deg

JAVA) import lombok.data

Programmers — Mon, 18 Oct 2021 19:18:49 +0900

import lombok.data

Lombok is library that adds code as specific anotation when java compiling.

@data is powerful anotation which include @ToString, @EqualsAndHashCode, @Getter, @Setter, @RequiredArgsConstructor. But it occurs many disadvantages. So use carefully.

VUEJS) vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\USER\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 ..

Programmers — Mon, 18 Oct 2021 08:54:52 +0900

1) vue.cmd create vue-form

error

vue.cmd create vue-form