Seoul Wiz 실전 HTML5 & CSS3 동영상 강좌 제 23강 CSS3 변형 > CSS

Seoul Wiz | 실전 HTML5 & CSS3 동영상 강좌 제 23강 CSS3 변형

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
Seoul Wiz님의 CSS강의 청각장애인을 위한 자막
15450302521445.jpg

 안녕하십니까 풀수 입니다 자 오늘 html css 스물세 번째 시간

css 반영 이라는 것에 대해서 살펴보는 시간을 갖도록 하겠습니다 자
우리가 지난 시간 22강 까지 했던 내용이 사실은 html 과 cs3
에서 가장 중요한 부분을 다룬 것이고요
자 오늘 할 변 형 이라든가 애니메이션 이런 것들은 사실 뭐 그렇게 많이
쓰이거나 그런 기능은 아닙니다
또 css3 에서 이렇게 지원을 하고 있지만 변형이 라든가 애니메이션을
지원하고 있지만 사실은 자바스크립트 라든가 아니면 죄이 커리 같은 조수안
라이브러리 많이 준비되어 있어요 그래서 그런 것들을 이용해서 많이 작업을
하는데
css3 에서도 그런 기능들을 많이 향상시켰습니다
많이 그 기능이 새로 생기기도 했구요
그래서 사용을 하는데 아까 말씀드렸듯이 그다지 많이 쓰거나 음 그렇지
않습니다 그래서 어 여러분들이 쉽게 가볍게 이런 것들이 있다라고 생각을
해 2시고 알아 2시고요 나중에 없이 쓰실 일이 있을 때 그때 좀 쓰시면
될거 같구요
물론 이런 것들을 잘 사용해서 조금 음 다른 사이트와 그 차별화된
사이트를 만든 잎을 도 몇 군데 있습니다
하지만 일반적으로 보편적으로 왔을 때 일반적인 사이트에서 cs 쓸어
가지고 뭔가 애니메이션을 준다
뭔가 변형을 준 다 그런 일은 흔한 일은 아닙니다
그래서 가볍게 여러분이 학습을 해 주시면 될 것 같습니다
자 변형인 되요 뭔가 변형이 되는 거예요 그래서 뭐 이게 뭔지 개요
개념부터 살 표를 보면 살펴보면
엘지의 팀의 html 태그 요소의 속성 형태로 있구요 색상 등등 많은
속성들이 있었죠 그 속성들이 변경될 때 css 변형 속성 을 적용하여
변하는 단계의 움직임을 적용할 수 있습니다
자문 얘기라면
어 여기 보시면 위드 베개 그 세로가 이 백작이 가로 베개 세로가 200
인사통 1 보여요 여기죠
근데 이게 백그라운드가 빨간색 이에요
그죠 작은데 예 속성 중에 트랜지션 2 레이 션 이라는 속성을 줍니다
그리고 삼출 줬어요
3초를 자 변형이 되는데 변형이 되는 2a 션 듀레이션 값이 삼촌
얘기해요
자 이렇게 주고 나서 여기까지 며 나오면 변함 없어요
자 이렇게 중요해서 렉 트 오버 여기다가 마우스를 올려 나서 오버 상태가
됐을 때는 어떻게 되냐면
가로가 이제는 200 이곳에 료가 100 이래요 처음에는 가루가 100
이곳에 류가 200 였는데
마우스를 올리는 순간 어떻게 과로가 202 고 세로가 100으로 변형
시킨 거죠
즉 이렇게 되는거죠 녹색으로 그리고 페이크 라운드 컬러를 연두색으로 녹색
으로 바꾼다고 이렇게 되어 있습니다
자 그러면 일반 놈을 상태가 이건데요 이상태에서 마우스로 올렸을 때 or
s2 상태죠
이 상태에서는 형태도 이렇게 아래쪽으로 되어 있는 직사각형 에서 가로로
놓은 직사각형으로 변 하고요
색상도 빨간색 에서 녹색으로 변화 되죠
이런 속성이 변화될 때 트랜지션 둘의 전을 중 거에요
저 3 첫화 여기서 짠 하고 바로 바뀐게 아니라 삼척 동안 서서히 서서히
중간 단계를 다 보여 주면서 서서히 서서히 3초 동안 변해라 라고 해서
트랜지션 2 레이 션을 좋습니다
이런거를 바로 어 css3 에서 변 형 이라고 우리가 얘기를 합니다 덴
지장
자 하나 더 알아보면 여긴 렉 트 액티브가 있어요 얘네 액티브 뭐냐면
마우스를 올려놓고 클릭을 한 거에요
마우스로 쿵하고 찍어서 클릭을 하면 클릭을 하고 있는 동안 액티브 상태에
있는 동안 상태 선택해 줘
가루가 200 이곳에 루가 202 되요 그럼 정사각형이 된거죠
이렇게 큰 정사각형 되는데 이때 백그라운드 컬러를 파란 색으로 바꾼 되요
접한 바꿨어요
자 근데 이번엔 또 보더 레디 오스 드 백 픽셀로 주고 있어요
즉 여기를 과도하게 둥글게 등교 그래서 결과적으로 이런 통과한 원을 만들
수가 있단 얘깁니다
자 이거 결과물 한번 볼게요
결과를 보면 뭐 별거 아니라는 생각이 바로 들 겁니다
자 보시면
요건 에요
자 방금 같음 대로 이렇게 제 iv 택을 2개를 써왔고 div 태그로
랩이 있구요 그럼 그 안에
에 렉 트 로 하나 만들었습니다 자 그 다음에 첫 번째 태가 백의 100
100 a 백이에요
브라우저를 보면
네 이렇게 된거죠 자 그리고 백그라운드 컬러가 빨간 색이고 트랜지션 들에
이전을 3초 좋습니다
자 그 다음에 위드를 올렸어요 마우스를 올리면 가루가 202 되고 새로
화백이 된데요
형태 변하죠 다음에 백그라운드 컬러는 녹색으로 된대요 색상 잘하죠
자 올려볼게요 마우스를 떠올리는 순간 에 변화되고 있죠 자 언제 이
변화되는 시간이 몇 초 3 초 동안 변화가 계속 된다는 얘깁니다
만약에 이게 없으면 어떻게 되요 순간적으로 짠 하고 바로 바뀝니다
회계학
아시오
예 자세 룡 5층 했고요 자 여기서 없으니까 트랜지션 툴의 전에 없으니까
마우스를 갖다대면 이렇게 짠 밖에요 마우스 빼면 사실 바뀌고 요 자 이걸
왔다가 트랜지션
트랜지션 2 레이 션을 2 가지고 어떻게 3초 동안
좀 빨리 볼까 2초 동안 밖에 라 그러면 어떻게 자세를 고친 하구요
2초 동안 백리 메이션 이 되면서 트랜지션 이 일어날 수가 있겠습니다
3.5 좀 길게 쬲 3초면 좀더 굉 재
이렇게 느리게 표현이 될 수 있겠습니다
자 그 다음에 오버 상태 액티브는 뭐냐면 마우스를 클릭한 거에요 클리
스탠은 가루가 200 세로 200 정사각형을 만들래 요 다음에 폐
크라우드 컬러는 파란색으로 시장 안되요
책상도 변경 됐고 형태도 반면 됐습니다
자 그런데 보도 레 디 어 스 도 처음에 없는 값 썼어요 근데 없는
것이었는데 레디 어스를 줄여요 그래서 100px
좌측 좌상단 우상 단 우아 단자 하다 모두 100p 섹스 된거죠
그러면 어떻게 되나 볼까요 자 여기서 마우스를 콩 하고 찍으면 이렇게
된거죠
정사각형이 만들어 주다가 보도 레디 오스 가 102 들어가니까 동그란
원이 되죠
만약에 이걸 갖다가 명 익혀져 볼게요 그러면
좌 상담과 우하단 만두 물어 지겠죠
그래서
이런 결과가 나올 수도 있겠죠
되시겠죠
그래서 하는데 자 트랜지션 둘의 이전
뭐 새로운 문서 하나 만들어서 짧은 거니까 한번 탈피해 볼까요
로 그다지 그렇게 뭐 많이 쓰이거나 그런 게 아니기 때문에 여러분들이
가볍게 그냥 생각을 하셔도 상관이 없습니다
그러다가 제가
그냥 대략적으로 이렇게 타이핑 해 볼게요
자 됐습니다 자 먼저 사각형의 결국
스타일
deter
이렇게 해 줄까요 자 다음에 기본적으로 백그라운드 컬러를 8 간 색으로
지정을 하겠습니다
됐구요 또 뭐 줄까요
우리가 위드 하고 화이트가 주는 중요하죠
자가로 어 되게
새로 팩트 까요 그냥 아
이렇게 됐습니다 자 브라우저에서 미리보기를 해보면
이거면 잊어 아 여기다가 변화를 주고 싶어요 그래서
마우스 올라갔을 때 뭐 어 마우스 올라왔을 때는
백그라운드 칼라 서 부터 시작을 해서
백그라운드 칼라 는 이런 색으로 바꿔라
다음에 좀 크게 많아 줄까요 자 200의 200으로 커다랗게 변화를 되라
자 그러면 마찰에 의해 만큼 커져요 논란으로 되죠 커지죠
제 근데 이게 7 해요 중간에 애니메이션 단계를 주고 싶어요 그럼
여기다가 트랜지션을 준 겁니다
트렌 지 션 줄에 이처럼 되었죠
3초 동안 변해라 그러면 3초 동안 서서히 변화되는 단계가 보여 주겠죠
자 다음에 트랜지션 듀레이션 있는가 하면 이런 것 있어요
트랜지션 딜레이가 있습니다
자 이제는 말 그대로 딜레이 시킨 거에요 2초 정면 마우스를 올렸을때
애니메이션이 되는데 2초 후에 애니메이션을 시작하는 거예요 자 보면 자
마우스 올리면 1
이 지나고 나서 애니메이션이 되죠
마우스를 뺄 때도 마찬가지입니다 2초 지나고 나서 애니메이션이 진행될 수
있습니다
이렇게 딜레이를 주는거 트랜지션 dj 를 줄 수가 있겠습니다
자 다음에 뭐 이런것 있어요
트랜지션 어 타이밍 평소에 있는데 자 이건 뭐냐면 이 지인이 있고요
자 이렇게 볼게요 좀
갱을 해볼까 요렇게 예 자 이렇게 주고 나 써주면 마우스 올려볼게요 금이
초지에 커지겠죠 커지는데
점점 점점 빨라지는 거에요
애니메 흉터가 처음엔 굉장히 들어요 그래서 점점 빨라 지죠
이 빼면 2초 뒤에 조금씩 조금씩 내리다가 점점 더 빨리 된거 2g
입니다 이제 아웃은 반대예요
반대를 주면 처음에 빠르다 가 점점 점점 늦게 느리게 애니메이션 되고요
뺄 때도 마찬가지입니다 처음에 빠르다 가 점점 점점 느리게 애니메이션된
6가
어 타임 잉 그 성전을 우리가 속성을 이용해서 출 수가 있겠습니다
자한테 여러분까 맞은 듯 이제 요런거 실제적으로 웹 문서를 만들
때는 아직까지는 시기상조 에요
꼭 필요하며 는 자바 스크립트나 제이쿼리 를 쓰지 9시 cs 에서 이렇게
하는것은 아직까지는 음 쓰는 물러 안 쓰임을 앉아 이런거 가지고
요런거 마 활용해서 만든 사이트 드 2 간혹가다 보이긴 해요 근데 그런
것은 특수한 목적에 의해서 만들어진 사이드 지 일반적인 사이트는 아니겠죠
그래서 연도 알아 2시고요
상표 다시 가볼게요 7
자 변형 속성 속성 에서
업황 번역 나오네요 딜레이를 나오고 타이밍 펑션 도 나옵니다 그래서
메뉴에 주로 좀 사용한 요즘에 사용하는게 많이 보이는데요
자 메뉴 요런 메뉴를 만들고 그 다음에 하나씩 애니메이션을 좋았고
마우스를 갖다대면 맨 그 메뉴가 점점 커지는 것
예전에는 이런 걸 처리하기 위해서 뭐 잡아서 쪽이 그 플래시 란 걸 많이
이용 했죠
프레스 1000만 이용했는데 요즘은 씨의 스스로도 요런걸 표현하곤 합니다
자 그래서 보면
음 자 이걸 한번 제가 실행을 해 볼게요
자 이상 차 라구요 마우스를 올리면
예 이렇게 의미 됩니다 말 마 좀있다 진행된 것 보니깐 트랜지션
딜레이가 적용된 것 같습니다
얘는 트렌 젠틀 애정이 안 됐고요 음 이렇게 됩니다
소스코드를 보면 gmb 01 gmb 02 지앤비 공상 040 우가 쭉
나열되어 있습니다
잘 고를 게 수평 구조를 맞추기 위해서 어떻게 했겠어요
오버플로우 히 전에 풀어서 좋겠죠 그리고 위드 백의 높이 50 에
마진 라이트 5px 의 텍스트 워렌 센터 백그라운드 요새 글 좋습니다
자 주고 나서 어 트레디션 프로퍼티를 중 거에요 자 프로 버트 하고
들어줘 이건 뭐 그게 뭐냐면 하나씩 하나씩 우리가 방금 살펴보았던 걸
보면
뼈 프로토 옮겨 볼까요
자 보시면 속성을 그 애니메이션 그 변형 속성을 줄 때 이렇게 하나씩
하나씩 줬어요
헌데 그게 아니라 프로퍼티 에서 백그라운드로 컬러와 높이를 조정 하겠다
이렇게 추고 다음의 두 레이 션 에서
5초 백그라운드 컬러의 는 5초를 주는 거에요
변형 되는데 다음에 높이 하이트 우피 변화에는
2초를 주겠다 되잖아요 즉 백그라운드 색상이 변경 되는 시간은 5초
높이가 변경되는 시간은 몇 조 있죠 그래서 프로퍼티 값을 이용해서 따르
따루 애니메이션을 줄 수가 있겠습니다
자 그 다음에 123 잊어 li 에 첫 번째 1st 차일드 두번째 차일드
세번째 차일드 에 첫번째 차일드 는 딜레이가 들어가 있네요
그래서 2초 뒤에 애니메이션 시작되고 요 다음에 두번째 세번째는 이지
인가 이제 9시 들어가 있어요 점점 빨리 애니메이션 되는거 점점 느리게
애니메이션 되는 효과입니다
잘 암에 오버 1 2 3 5 회 마우스를 올려요 오버 됐을 때
높이는 다같이 250으로 뜨는 안되요
단 높이가 250 늘어날 때 높이가 낮아 얘는 2초 동안 애니 면이
되고요 빨리 순식간에 되고 백그라운드로 컬러가 바라는 걸 5초 동안
이래요
그래서 백그라운드 컬렌 다 제각각 변하고 있죠 근데
백그라운드 컬러가 변할 때는 5초 동안 애니메이션이 되고
높이는 2초만에 순식간에 빨리 애니 면서 되는거겠죠
그리고 칼라 폰테크 앓는다 화이트 구요
실제로 보면
자 첫번째 꺼는 딜레이가 이 초대 있어요
그러니까 어떻게 되겠어요 좀 줄까요
마 사라 되면 1 이 지나고 나서 애니메이션 되겠구요
자 높이는 2초만에 되던가 좀 빨린 그 * 거고 그다음에 백그라운드 는
느리게 되겠죠
되죠 자 그 다음에 두 번째 거는 이지 아 이 쓰인 이 됐고 그 다음
에이즈 하우지 되있어요
세번째 조건은 얘는 점점점 빨리 애니메이션 되겠구요
그죠 자세히 느껴보시면 마우스를 쓸 때 조금 느리게 있는데다가 점점 더
빨리 아니면 된다
자 3번은 처음엔 빨라야 그러다가 나중에는 점점 느려지는 거 눈으로
확인이 되죠
마솔 이며 빨리 아니면 데다가 점점 들여 지고 있구요
자 네 번째도 바질 없네요 그래서 네번째 다섯번째 는 그냥 일반적으로
애니메이션 되고 있습니다
다시 것도 간단한 거니까 한번 해볼까요
차 원조 div 태그 주고요
웰 태그 다음에 li 태그 좋습니다
자 그 다음에 하이퍼링크 걸려 있나요
멀리 있네요 그냥 gmd 라고 할게요
제가 됐구요
자 브라우저에서 확인을 해봅니다 그렇게 됐고요
어 스타일 적용 해야 되겠죠
5 4
자 여기서 음
dive 먼저 줄까요 자
미드를
800 픽셀 로 하겠습니다 그 다음에 마진을
영에 오토로 하구요 다음에 9푼 쫌 하기 위해서 보조를 춤추 케어 1
픽셀의 풍기 뒤에
색상을 주도록 하겠습니다
자 이렇게 되겠구요
가운데정렬 되고요 자네를 같아 플루트 속성을 줘야 겠죠 그래서 이번에는
이 외 래
더블로 를 시즌으로 주겠습니다
자 li 는 어떻게 해요
플루트 속성의 레프트 주면 되겠죠
그러면 옆으로 쭉 붙어 나오겠죠 자 리스트 타입을 다 없애 되겠죠
그래서 리스트 타이 리스트 스타일을 답해 벌이도록 하겠습니다
자하 다음엔 마진을 전체 초기 선택 체를 이용해서 다 없애버릴 게요
따진 0
채팅도 영어를 주도록 하겠습니다
되겠구요 자 그 다음에 음
내가 소프트웨어를 줄까요
자자 아내여 게다가
패딩을 좀 줄게요
예 됐고 백그라운드 총 축하요 색상을 일단 기본적으로 1 줘야 되겠죠
컬러는 파이트를 하겠습니다
예 됐구요
자 사람의 마진도 좀 줘야 되겠죠
빠진 라이트를 좀 줄게요
되구 5
됐습니다 자 이제 마우스 올렸을 때 어떤 변화를 변화를 주기위해서
기네요 좀 내리고 요 자 li 에다가 호버 오벌 했을때 어떻게 해라
이거 높이를 좀 줄까요 이트
높이를 좀 줄게요 그자 높이가 100px
예 행을 통 없애 볼까요 탑을 없음 되겠죠
이렇게요 예 됐습니다 자 여기서 오버 됐을 때 높이를
어떻게 크게 써서 1 3 400정도 400 정도로 늘어나는 거예요
오버 되면 일어날 수 있겠지 이렇게 작은 배 난 이게 싫어요
애니메이션 태는 효과를 보고 싶어요 그럼 어떻게 여기다가 트렌디 장
스 렌 지 션 n
딜레이를 1초 동안 애니메이션 태라 그러면 올리면 점점점 애니메이션 때는
6가 나타낼 수 있겠죠
그 다음에 백그라운드 3번 변경시켜 볼게요 백그라운드 걸러 떻게
음 노란색을 해볼까요
이렇게 자 노란색 으로 바꿔라 그러면 점점점 되겠죠
이렇게 해서 여러분들이 쭉 금속성을 1 씨앗을 적용을 해보면
어 잘 만들면 이쁘 냉면이 되겠죠
죠 자 디자이너의 도움 디자인 하신 분들의 도움을 받아서 좀 이쁜 애니메이션을 만들면서 뭐가 말할 수도 있는데 아직까지는 그렇게 말 널리 널리
사용되는 기법은 아니라는 거 참 구조를 알아 2시면 되겠습니다
자아
됐구요
예 그래서 오늘은 변형 속성에 대해서 간단하게 가볍게 한번 학습을
같습니다
다음 시간에 다시 다른 내용으로 어학 씁 을 하도록 하겠습니다 오늘 시험
여기서 마치도록 하겠습니다 감사합니다

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu