CSS Advanced 2

CSS 2D Transforms

transform : 도형의 변형을 설정한다

 

- translate(x, y) : 현재 위치에서 주어진 위치까지 이동시킨다 (X-axis, Yaxis)

- translateX(n) : 현재 위치에서 주어진 X만큼 이동시킨다

- translateY(n) : 현재 위치에서 주어진 Y만큼 이동시킨다

- rotate(angle) : 주어진 각도만큼 요소를 회전시킨다 (degree) 

 

- scale(x,y) : 요소의 크기를 키우거나 줄인다 (width, height)
- scaleX(n) : 요소의 가로길이를 조절한다
- scaleY(n) : 요소의 세로길이를 조절한다

 

- skew(x-angle, y-angle) : 요소를 비스듬히 왜곡한다
- skewX(angle) : 요소를 X-axis를 기준으로 비스듬히 왜곡한다
- skewY(angle) : 요소를 Y-axis를 기준으로 비스듬히 왜곡한다

- matrix(n,n,n,n,n,n) : 모든 transform 메소드를 한데 모아 한꺼번에 도형의 모양을 설정할 수 있다

                      matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

 

---

CSS 3D Transforms

transform : 도형의 변형을 설정한다

 

- rotateX() : 주어진 값만큼 도형을 X축을 기준으로 이동시킨다
- rotateY() : 주어진 값만큼 도형을 Y축을 기준으로 이동시킨다
- rotateZ() : 주어진 값만큼 도형을 Z축을 기준으로 이동시킨다

 

---

CSS Transitions

transition : 도형의 움직임을 설정할 수 있다 (delay, duration, property, timing-function 4개 한번에 설정 가능) 

 

  transition: width 2s, height 2s, transform 2s;

 

효과를 추가할 CSS 속성 (transition-property )과 효과의 지속시간 (transition-duration) 은 필수적으로 설정해줘야 한다.

 ex) transition: width 2s, height 4s;

 

div:hover{ } 로 마우스를 올렸을때 도형이 어떻게 변화할지 설정할 수 있다

transition의 속성은 hover이 아닌 곳에 한꺼번에 설정해주면 된다

 

다음 예제는 정사각형 도형의 transition effect이다. 효과를 추가할 속성으로는 width와 지속시간은 2s이다

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

 

transition-delay : transition 효과의 딜레이 시간을 설정할 수 있다

transition-duration : transition 효과가 얼마의 시간에 걸쳐 이행될지를 설정한다

transition-property : transition 효과를 줄 CSS 속성을 지정한다

transition-timing-function :  transition 효과의 속도를 조절할 수 있다

 - ease : specifies a transition effect with a slow start, then fast, then end slowly (this is default) 
 - linear :  specifies a transition effect with the same speed from start to end
 - ease-in :  specifies a transition effect with a slow start
 - ease-out : specifies a transition effect with a slow end
 - ease-in-out : specifies a transition effect with a slow start and end
 - cubic-bezier(n,n,n,n) : lets you define your own values in a cubic-bezier function

 

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {
  width: 300px;
}

 

---

CSS Animations

@keyframes : 어떤 요소에 적용되는 스타일을 새로운 스타일로 부드럽게 전환시켜 준다

전환 과정의 어디 부분에서 어떤 스타일을 적용할지 퍼센트로 각각 정해줄 수 있다

- from : 0% / to : 100% / 0 ~100%

 

애니메이션이 작동하게 하려면 animation-name으로 @keyframes 를 연결시켜줘야한다.

 

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-name : 애니매이션의 이름
animation-duration : 애니매이션이 걸리는 시간
animation-delay : 애니매이션의 딜레이 시간 ( - 값을 주면 그 값의 시간만큼 지난 모습으로 애니메이션이 시작된다)
animation-iteration-count : 애니메이션이 반복되는 수 (숫자나 infinite)

animation-direction : 애니메이션의 방향

 - normal - The animation is played as normal (forwards). This is default
 - reverse - The animation is played in reverse direction (backwards)
 - alternate - The animation is played forwards first, then backwards
 - alternate-reverse - The animation is played backwards first, then forwards

 

animation-timing-function : 애니메이션의 속도변화를 조절

 - ease : specifies a transition effect with a slow start, then fast, then end slowly (this is default) 
 - linear :  specifies a transition effect with the same speed from start to end
 - ease-in :  specifies a transition effect with a slow start
 - ease-out : specifies a transition effect with a slow end
 - ease-in-out : specifies a transition effect with a slow start and end
 - cubic-bezier(n,n,n,n) : lets you define your own values in a cubic-bezier function

animation-fill-mode : 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정

 - none : (Default ) Animation will not apply any styles to the element before or after it is executing
 - forwards :      Retains the style values that is set by the last keyframe

                              (depends on animation-direction and animation-iteration-count)
 - backwards : The element will get the style values that is set by the first keyframe 
                              (depends on animation-direction), and retain this during the animation-delay period
 - both :              The animation will follow the rules for both forwards and backwards, 
                              extending the animation properties in both directions

animation : 모든 애니메이션 효과는 animation 속성 하나에 한번에 들어갈 수 있다

 ex) animation: example 5s linear 2s infinite alternate;

 

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

 

---

CSS Tooltip

tooltip 은 어떤 요소에 마우스 포인터를 올려놓았을때 말풍선으로 추가정보를  제공하는데에 쓰인다

 

Tooltip basic structure

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

 

Tooltip Position

top, left, right, bottom 으로 어떤 면에 스타일을 적용할지 정할 수 있다

px : 양수나 음수 값으로 툴팁이 어느 부분에 위치할지 조절할 수 있다 (보통 가운데 위치하게 하기 위해 padding값 만큼 이동해준다)

% :  퍼센트로 툴팁이 어디에 위치할지 조절할 수 있다 (보통 100% 부터 시작해서 원하는 퍼센트만큼 지정한 방향으로 더 이동한다)

 

top: 100% 는 툴팁을 아래, bottom: 100%는 위, left: 50%는 툴팁을 가운데에 위치하게 할것이다

 

/* 오른쪽 툴팁 */
.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}
/* 왼쪽 툴팁 */
.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}
/* 위쪽 툴팁 */
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
/* 아래쪽 툴팁 */
.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

 

Tooltip Arrows

툴팁 말풍선의 화살표 방향을 조절할 수 있다. tooltip 뒤에 ::after 을 붙혀주면 화살표에 대한 스타일링을 할 수 있다.

기존 툴팁에 대한 설정을 놔누고 새롭게 화살표에 대한 설정을 추가해주는 것이다.

 

top: 100% 는 툴팁을 아래, bottom: 100%는 위, left: 50%는 툴팁 화살표를 가운데에 위치하게 할것이다

border-width : 화살표의 크기를 조절. margin-left를 함께 같은 값으로 조절하면 화살표를 가운데에 위치하게 할 수 있다

border-color : 화살표의 색을 정한다. 순서대로 아래쪽, 왼쪽, 위쪽, 오른쪽을 가리키는 방향의 화살표의 색을 조절할 수 있다. 보이지 않게 하기 위해선 transparent로 설정할 것.

Fade In Tooltips (Animation)

opacity: 0~1값으로 투명도를 설정할 수 있고, transition 으로 투명도를 서서히 바뀌게 할 수 있다.

 

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

 

※ hover 사용시 tooltip에 마우스 올렸을때 tooltiptext가 보이게 함

.tooltip:hover .tooltiptext {
  opacity: 1;
}

---

CSS Styling Images

border-radius, border, size, margin, box-shadow, opacity, filter 등을 이용해 다양한 사진을 연출할 수 있다

 

사진 위에 마우스를 올리면 효과가 나타나게 하고 싶을 때 : 

사진 스타일 하나와 그 위에 새롭게 나타나게 할 화면의 스타일 두가지를 따로 만들어준 후 hover로 투명도를 조절하거나 transition 하게 할 수 있다

 

container에 마우스 올렸을때 overlay로 설정한 화면이 보이게 하는 것

.container:hover .overlay {
  bottom: 0; /* 위쪽에서 화면이 내려오게 한다 */
  height: 100%;
}

 

---

CSS The object-fit Property

object-fit : 사진이나 영상이 컨테이너 안에서 어떻게 보여질지 정한다. 깨지거나 늘어나지 않은 원본비율로 사진이 보여지게 해준다

 

fill - (default) 컨텐츠가 주어진 사이즈에 꽉 차게 보여진다 사진이 늘어나거나 줄어들어 깨져보일 수 있다 
contain - 주어진 사이즈의 박스안에 전체사진이 위치하도록 사진 자체가 작아질 수는 있지만 원본 비율이 바뀌지 않는다
cover - 주어진 사이즈의 박스를 꽉 채우지만 원본 비율을 바꾸지 않는다. 사진이 잘릴 수 있다
none - 사진의 크기가 변하지 않고 원본 비율로 그냥 보여진다. 사이즈보다 사진이 크다면 사진이 잘릴 수 있고 주어진 사이즈보다 사진이 작아도 사이즈에 맞게 사진이 조정되지 않는다
scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)

 

---