22.06.16 - [ CSS 스타일 ] transition, transform, floot

 

 

 

 

[ 트랜지션 ]

transition

transition-delay 

transition-timing-function

 

 

 

---

 

 

 

# 기본 세팅 

 

 

 

---

 

 

1.  transition

• 전환 애니메이션이 완료되는 데 걸리는 시간을 설정
• transition : -duration , -delay 순으로 작성
• 실행하긴 하는데 – 지정한 시간에 걸쳐서 실행한다.

 

 

 

 

• 색 변하는 중 ㅎㅎㅎㅎ 색이 변하긴 하는데 2초에 걸쳐서 변한다.

 

 

---

 

 

2. transition-delay

• 해당 시간(초) 동안 전환 효과의 시작을 지연
• 음수 값을 사용하면 전환이 즉시 시작되지만
• 전환이 애니메이션 효과의 중간에 시작되는 것처럼 보입니다.

 

 

1 초 딜레이 후에 트랜지션 시작

 

 

 

---

 

 

 

3. transition-timing-function

 

 

3-1 step-end – 4초후에 바로 완료

• 애니메이션이 끝날 때 마지막 점프가 발생하도록 해준다.

 

 

---

 

3-2 step-start – 딜레이 1초후에 실행

• 전환이 시작될 때 첫 번째 점프가 발생하도록 해준다.

 

 

---

 

 

3-3 steps(2) - 2단계로 나눠서 트랜잭션 실행

• 전환을 따라 n개의 단계로 전환을 표시하고 동일한 시간 동안 각 단계를 표시

50% // 50% -2단계로 나눠서 실행해준다.

 

 

 

 

 

 

---

 

 

 

 

 

[ 트랜스폼 ]

 

rotate() , scale () , skew()

 

---

 

 

 

 

 

 

1. rotate();

• 시계방향으로 회전 ( +, - 가능)
•  rotateX(); 와 rotateY
•  x축으로 / y축으로 회전

 

 

---

 

 

---

 

 

2. scale()

• 요소의 크기 조절 가능
• 확대·축소(scaling)

 

 

 

 

• 내가 원하는 display유지 안 되는 경우 있다. 이런 경우 쉽게 해결하는 방법~ scale(1)로 주면 해결된다~

 

 

scale / scaleX / scaleY  가능

 

 

 

 

---

 

 

3. skew() 

• 비틀기 기능

 

skewX / skewY 가능

 

 

---

 

 

 

4. 여러 개 동시 적용할 때는 뒤에 이어서 사용

 

 

 

 

---

 

 

 

 

[ 실습 2 ]  float 테스트

 

 

 

 

# 기본 세팅

 

 

---

 

 

Test 1 ----- red박스에 { float : left; }

• 파란색 박스 화면에서 사라졌다. 어디 갔나? 
• 빨간색 박스 아래에 있다. ( 3차원적으로 생각 )
• 빨간색 박스가 float적용으로 위로 뜬 상태

 

 

 

 

 

+@ F12 - 검사로 체크

• 특이점 체크 #1 – div요소인데 빨간색 div태그는 그 영역만 차지하고 있다.
• 특이점 체크 #2 – 빨간 div뒤에 파란 div박스는 한 줄 다 차지하고 있다(block)
• 결론 : float 해준 애는 inline-block의 display로 변경되는구나.

 

 

 

---

 

 

 

Test 2 -----  blue박스에  { float : left; }

 

 

 

• red박스 아래에 있던 blue 박스가 --- 이동 ---> red박스 옆으로 정렬되었다.
• 동시에 green 박스 사라졌다. 어디로?
• red 박스 아래로 갔다.  ( 3차원적 시점 )

 

---

 

 

test 3 ----- < br clear = “both” >

 

• blue박스에 이어서 새로운 <br> 태그를 만들고 clear 속성 적용
• clear 속성 적용해주니까 red박스 아래에 있던 - green 박스 등장 
• float 애들의 높이를 인식하게 해주는 clear - (높이 인식 - 크기 인식 - 자리 차지)

 

 

 

 

 

# check

• 의미 없는 엘리먼트를 사용하기 때문에 권장되는 방법은 아니다.
• clear:both; height:0; overflow:hidden; 처리하여
• 엘리먼트가 스스로 높이를 갖지 않도록 하고, 보이지 않도록 처리한다.

 

 

 

---

 

 

test4 -----  가상 선택자 :after로 - clear 하는 방법

 

 

 

# 가상 선택자 

• :link 
• :visited 
• :hover
• :active
• :focus 

 

 

# 가상 엘리먼트

• 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자
• :first-line
• :first-letter
• :before
• :after
• :before와 :after는 - HTML 문서상에 존재하지 않는 콘텐츠를 출력시키기도 합니다. 

 

 

1. 가상의 엘리먼트를 생성시킨 다음 ----- #box : after { content : " " } 
2. float : clear; 처리 ----- { display:block; clear:both; } 처리 추가
3. 의미 없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear 됩니다.

 

 

---

 

 

 

 

review


CSS 스타일 마지막 시간으로
트랜지션, 트랜스폼, float을 배워보았다.

애니메이션 효과들이 신기하였고
잘 사용하면 화려하게 사용할 수 있을 듯!

-- float --
정렬하고 줄 세우는 방법 중
가장 많이 활용할 듯!
clear 처리도 신경 써야 할 듯

후후 이제 레이아웃 짜는 것 같이 연습하고
개인적으로 페이지 만들어보는 시간을 가질 텐데
지금까지 배운 내용들을 잘 활용할 수 있을까
걱정 반 기대 반

내가 정리해놓은 포스팅들
잘 참조해서 ㅎㅎ 만들어보자!