웹 프론트엔드 실습 _인터랙티브 웹디자인북

안녕하세요 모닝버드입니다. 오늘은 Front-End 공부 첫 글을 쓰려 합니다. 제대한지 벌서 한달 다되가네요.. 뭐 한 것도 없는데 너무 후딱 지나가서 짜증이 납니다.. ㅋㅋㅋ

1. 필자가 공부한 책 "인터랙티브 웹디자인북" _최성일 지음

부대 안에 있을때 맨날 기준 없이 이것 저것 건들다가 처음으로 책을 통해 정식으로 실습을 해보았습니다. 내용은 책 안에 있는 내용 그대로지만 코드만큼은 이미지와 책 내부 내용 보면서 직접 이해하고 짜 보았습니다.

필자가 본 책은 저자 최성일의 "인터랙팁 웹디자인북" 입니다.

우선 다른 프론트엔드 기본서들 처럼 초반부에 기초적인 html, css, jquery 지식들을 다룹니다. 허나 다른 구 서적들에 비해 나름 최신 기술을 많이 다루고 있는 것 같습니다. 예를 들면 html5, css3에서 새로 업데이트 된 내용들 말입니다. 

또 다른 장점은 기초적인 내용들 뒤로, 배운 것을 토대로 실습할 수 있는 예제들이 다양하게 수록되어 있습니다. 단순히 실습예제라고 해서 퀄리티나 질적인 면에서 떨어지지 않았습니다. 실제로 실무에 적용할 수 있을 만큼 다양하고 고 퀄리티의 내용들이었습니다.  

2. HTML5, CSS3의 놀라움

필자는 기본적인 내용들에 어느정도 자신있다고 판단되어, 바로 실습예제 부분으로 넘어갔습니다. 이번에 필자가 실습한 예제는 책 177page부터 시작하는 "배경 동영상을 활용한 웹 페이지"부분 입니다.

아직 첫 번째 예제 밖에 작업하지 않았지만 처음으로 CSS3 기술들을 다루면서 흥미도 많이 느꼈고 현재까지의 기술이 이정도구나 라는 것도 실감할 수 있었습니다. CSS3부터 적용된 transition과 animation 속성을 통해, 옛날에는 어도비 플래시로 다루었던 애니메이션 부분들을 css코드 몇줄만으로 처리 할 수 있었습니다.

위의 동영상은 제가 실습한 코드를 localhost 서버로 테스트하는 영상입니다. 영상에서 보이는 애니메이션이나 마우스를 오버했을 때 동작하는 부분들 모두 css 코드를 이용하여 작업 한 것입니다.

주로 사용했던 css3 속성

- transform : 박스 모델 변형 효과

- trasition: 마우스 hover 시 박스 모델 이동 효과

- animation: 마우스 hover 시 박스 모델 애니메이션 효과

군대에서 코딩 공부했던 방법! (군대에서 코딩하기) ▼

http://morningbird.tistory.com/3