1.학습한 내용

1)box-shadow

박스모델에 shadow, 그림자효과를 주는것이 가능하며, 바깥이 아닌 안에도 그림자효과를 주는것이 가능하다.

2)테이블 table

표를 만들어내고, 표의 줄마다의 색깔을 넣거나 마우스를 댔을때 해당부분만 색깔이 변하는 식의 테이블을 만들어 낼수있다.

3)폼 form

제출과 관련된 form에서 글씨의 색, 마우스를 댔을때 해당 범위의 색깔 변경등을 꾸밀수있다.

4)동적 변화

4-1)변환/변형(transform)

transform을 통하여서 이미지를 변형시키는것이 가능하다.

단순히 이미지의 위치를 변경시키는것부터

이미지의 크기를 늘리거나 줄일수도있고

이미지를 회전시키는것 또한 가능하다.

또한 rotate를 통하여 3차원으로 회전하는것 또한 가능하다.


또한 이미지의 시작지점을 박스의 꼭지점별로 변경하는것도 가능하다.

그리고


3차원 회전을 이용하여서 뒷면에서 이미지를 볼수도 있으며, 뒷면은 보이지 않도록 설정하는것 또한 가능하다.

4-2)전환(transition)

transition 을 사용하면, 변화하는 과정을 보여주는것이 가능하다, 예를들어 위의 작은 꽝! 글자에 마우스를 대면 점점 아래의 큰 꽝! 글자로 변하는것을 볼수있다.

이를 이미지에 사용을 하게 되면 위의 주황색 박스에 마우스를 올리면 점차 커다란 갈색 박스로 변하는 것을 볼수있고.

아래의 주황색마우스에 손을 대면 회전을 하면서 커다란 aquamarine 색의 박스로 변하는것 또한 볼수있다.

2.학습내용 중 어려웠던 점

코드를 사용하는 과정에서 입력한 코드가 제대로 적용이 되지 않는 문제를 겪게되었다.

3.해결방법

이는 코드내에서 :를 쓰는것과 안쓰는것, 콤마(,)를 쓰는것과 안쓰는것, 그리고 세미콜론(;) 안에 들어가야하는것과 아닌것, 이러한 차이들에 의해서 나타나지 않은 것이었다.
예를 들어 이미지의 경우 no-repeat를 하려면 이미지를 ;으로 끝낸 후 쓰는것이 아니라 ;으로 끝내기 이전에 넣어야하는것이다.

4.학습소감

이미지가 움직이거나 애니메이션으로 움직이는것들은 지금까지 각 프레임별로 이미지를 입력해서 나오는것이라고 생각했었는데, 명령어 하나를 사용하는것만으로도 부드럽게 움직임을 표현할수있다는 점이 신기하였다.
단순 노가다작업을 하는것을 정해진 명령어로 간편하게 사용할수있는것이 많을것이니, 우선 코드를 많이 쓰는것보다 그 기능을 가진 명령어를 찾는것을 우선시 해야할것같다.