[패스트캠퍼스] 프론트엔드 강의 정리
[패스트캠퍼스] 프론트엔드 강의 #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%;
}
[내일배움카드취업], [국비지원교육]