[패스트캠퍼스] 프론트엔드 강의 정리

[패스트캠퍼스] 프론트엔드 강의 #12

Unsung 2022. 10. 4. 18:59

CSS

변환

  • transform: 변환함수1 변환함수2 변환함수3;
  • transform: 원근법 이동 크기 회전 기울임;

2D 변환 함수

  • translate(x,y) 이동 (x,y축)
  • translateX(x) 이동 (x축)
  • translateY(y) 이동 (y축)
  • scale(x,y) 크기
  • rotate(deg) 회전(각도)
  • skewX(x) 기울임 (x축)
  • skewY(y) 기울임 (y축)


3D 변환 함수

  • rotateX(x) 회전 (x축)
  • rotateY(y) 회전  (y축)
  • perspective(n) 원근법(거리) : 제일 앞에 작성해야 한다.

 

perspective

perspective: 00px;
관찰 대상의 부모에 적용 (기준점 : perspective-origin)
transform: perspective(00px)
관찰 대상에 적용 (기준점 : transform-origin)


backface-visibility
3D 변환으로 회전된 요소의 뒷면 표시 여부

  • visible 기본값
  • hidden 숨김

 

이제껏 배운 CSS 속성을 활용하여...

body {
  height: 100vh;
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
  /* 배경 이미지의 가장 넓은 너비 기준으로 사이즈 조정 */
  background-size: cover;
  /* 배경 이미지의 반복을 제어 */
  background-repeat: no-repeat;
  /* 배경이미지가 뷰포트에 고정 (스크롤x) */
  background-attachment: fixed;

}

.container{
  padding: 50px 0;
}

.container .heroes{
  /* 1차원 레이아웃 블록요소 정의 */
  display: flex;
  /* 아이템 줄바꿈 여부 */
  flex-wrap: wrap; 
  /* 주 축의 정렬방법(수평) */
  justify-content: center;
  max-width: 700px;
  /* 대표적인 중앙정렬 속성. 위아래 여백없이 가로중앙 배치를 의미 */
  margin: 0 auto;
  padding: 40px 20px;
}

.container .heroes .hero {
  width: 80px;
  height: 84px;
  background-color: #555;
  /* 내용이 넘칠 경우 제어 : 숨김 */
  overflow: hidden;
  margin: 4px;
  border: 3px solid #fff;
  border-radius: 10px;
  /* content+padding+border로 크기 계산 */
  box-sizing: border-box;
  /* 변환: x축 기울임 */
  transform: skewX(-14deg);
  /* 전환효과, 기본값 all 전환요소 각자 전환효과 지정가능 */
  transition: 
   transform .1s,
   background-color .6s ;
}

.container .heroes .hero:hover {
  background-color: #ff9c00;
  transform: scale(1.3) skewX(-14deg);
  /* 요소쌓임의 정도를 지정 숫자가 높을수록 위에 */
  z-index : 1;
}

.container .heroes .hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  transform: skewX(14deg) translateX(-16px);
}

.container .heroes .hero:nth-child(1) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");}
.container .heroes .hero:nth-child(2) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");}
.container .heroes .hero:nth-child(3) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");}
.
.
.

.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .logo img{
  width: 100%;
}

 

 

[내일배움카드취업], [국비지원교육]