컴퓨터 알아가기/HTML CSS
-
<HTML/CSS> Animation : 카드 뒤집기컴퓨터 알아가기/HTML CSS 2022. 9. 25. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. ▒ 카드 뒤집기 CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글..
-
<HTML/CSS> Transform 3 : Rotation 회전 이해컴퓨터 알아가기/HTML CSS 2022. 9. 24. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 이제 처음 왼손법칙을 설명할때 알아두어야 한 회전에 대해 공부를 해보고자 합니다. x, y, z축에 대한 회전축과 방향은 아래 링크를 다시한번 보고 오면 이해가 쉽습니다. (꼭 기억해 두어야 합니다. 나름대로 제가 만든거니) 2022.09.22 - [컴퓨터 알아가기/HTML CSS] - Transform 1 : 기본개념 이해 ▒ Rotation 속성 Transform의 rotation 속성은 요소를 회전시키는 Animation 효과입니다. 이를 위해서 지나번 부모태그인 에 perspective를 적용하는게 아니라 이미지 자체에 perspective를 지정해 줍니다. (별도로 태그에 지정하면 다른 모양이 나올 수 밖..
-
<HTML/CSS> Transform 2 : Perspective와 translate축 이해컴퓨터 알아가기/HTML CSS 2022. 9. 23. 19:30
CSS의 Transform의 내역은 Rock's Easy Web을 기본으로 공부하고 있습니다. 이번 시간에는 Transform을 사용하면서 바라보는 관점인 Perspective에 대한 이해와 3개의 축인 x, y, z축에 변화를 주어 어떻게 형태가 변하는지 이해해 보는 시간을 갖도록 하겠습니다. 역시 HTML은 placeimg.com에서 더미이미지를 활용하도록 하겠습니다. 이전시간 translateX를 사용하여 x축으로 이동하는 연습을 해 보았습니다. 이번에는 y추곽 z축을 이동하면서 transform의 개념을 잡아 보겠습니다. 1. Translate (x, y, z 축 변화) y축으로 움직여 보면 다음과 같이 할 수 있습니다. 상기 이미지처럼 아래로 100px 이동하였습니다. 첫번째 법칙을 정리한 왼손..
-
<HTML/CSS> Transform 1 : 기본개념 이해컴퓨터 알아가기/HTML CSS 2022. 9. 22. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 지금부터는 Transform에 대한 내역을 공부를 해보도록 하겠습니다. Transform은 말 그대로 전송하고 변형시키는 겁니다. 이 과정에서는 관점(Perspective)에 대한 이해를 하는게 포인트입니다. 관점이란 바라보는 기준점이라 생각하면 됩니다. 역시 개발자들이 사용하는 더미이미지 사이트인 placeimg.com 에 접속하여 연습용 사진을 가지고 알아보도록 하겠습니다. 참고로 더미이미지 사이트인 만큼 저장할 때 마다 그림이 바뀌는 것은 감안하고 보기 바랍니다. 다음과 같이 HTML 내용을 작성하고 브라우저를 보면 다음과 같이 나옵니다. 상기 이미지를 우측으로 더 정확히는 X축으로 100px 움직이는 애니메..
-
<HTML/CSS> Animation 4 : 마우스를 올리면 배경이 바뀌면서 타이틀 나타내기컴퓨터 알아가기/HTML CSS 2022. 9. 21. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 기본 그레이색을 가지고 있는 2개의 섹션 영역에 마우스를 올리면 배경색과 타이틀이 나오는 Animation을 공부해 보고자 합니다. 개발자들이 테스트용으로 사격형 영역을 불러올때 place-hold.it을 사용합니다. 이곳에서는 태그를 이용하여 400 X 200 사이즈의 두개의 섹션을 가상으로 다음과 같이 만들어 보겠습니다. 상기 HTML을 브라우저로 보게되면 다음과 같습니다. 이제 이 그림위에 마우스를 올리면 검은색(투명도 80%)으로 바뀌면서 Animation 연습이라는 타이틀이 가운데 오도록 Animation 효과를 공부해 보고자 합니다. ① 위치잡기 타이틀이 가운데 온다는 이야기는 span요소가 가운데 위로..
-
<HTML/CSS> Animation 2 : 마우스 이벤트실행시 요소 움직이기컴퓨터 알아가기/HTML CSS 2022. 9. 20. 19:30
CSS Animation 기초는 Rock's EasyWeb을 기본으로 공부하고 있습니다. Animation 기초 동작으로 시계방향으로 사각형을 색을 변화시키면서 작업을 해 보았습니다. 이럴 경우 브라우저가 작동이 되면 바로 실행이 되기 때문에 실질적으로 활용 가치가 떨어집니다. 하지만 Animation의 기본을 이해하는데 있어 충분하다고 보여집니다. 이제는 마우스를 올리거나 클릭할 경우 (이 모든것을 이벤트라고 함) 움직이는 Animation을 이해하고자 합니다. 간단히 생각해서 마우스를 올린다는 것은 hover 기능이고 그만큼 어떤 틀속에서 움직여야 하기때문에 태그 안에 태그를 적용하면 될 듯 합니다. 여기서 Animation 속성을 사용하면 되는데 Transition과 마찬가지로 속성값을 축약해서 쓸..
-
<HTML/CSS> Animation 기초 : 요소 움직이기컴퓨터 알아가기/HTML CSS 2022. 9. 19. 19:30
CSS에서 애니메이션 기초는 Rock's EasyWeb을 기본으로 공부하고 있습니다. Transition의 기본 개념을 이해 하였으니 좀 더 시각적으로 효과적인 Animation 기초를 공부할 필요성을 느꼈습니다. 정말 공부를 하고자 하면 할 내용이 참 많군요. Animation을 공부할 포인트는 어떤 요소를 화면에서 움직이게 하는 기본형태를 공부할 예정인데 다음 순서대로 CSS를 공부해 보고자 합니다. ① 하나의 요소의 색을 변하게 ② 애니메이션 효과를 통하여 요소를 움직이게 ③ 움직이는 요소의 색이 변하게 우선 첫번째 과제를 위하여 기본적인 네모난 요소를 만드는데 HTML상 class명이 square인 태그 기준으로 진행하고자 합니다. 1. 하나의 요소의 색을 변하게 첫번째로 화면에서 빨간 사각형이 ..
-
<HTML/CSS> Transition 4 : Sub-Menu 만들기 - 위에서 아래로 흐르는 커튼 효과컴퓨터 알아가기/HTML CSS 2022. 9. 18. 19:30
CSS 애니메이션 기초는 Rock's Easy Web을 기본으로 공부를 하고 있습니다. 1. 연관되는 영역 Position 잡기 submenu구성에서 위에서 아래로 흐르는 커튼 효과를 만들어 보도록 하겠습니다. 영역으로 봤을때 mainmenu가 있는 태그의 position이 현재 absolute로 되어 있으므로 submenu의 position을 mainmenu에 맞게 움직이도록 position을 relative로 지정하는 것으로 시작합니다. 서로 2개의 영역을 확인하기 위해서 opacity는 빼줍니다. 다음과 같이 일단 영역을 표현할 수 있습니다. (글씨도 깨지긴 하지만 나중에 조정할 예정) submenu를 mainmenu밖으로 아예 없애도록 합니다. top값을 -로 설정하면 submenu를 올릴 수 있..