개요.카드를 웹사이트에서 구현한다고 했을 때 뒤집는 애니메이션이 필요한 경우가 있다. 그냥 앞뒤가 변화는 것보다 3D로 뒤집히는 것이 사용자가 봤을 때 자연스럽고 완성된 요소라고 생각할 수 있다. 뒤집는 것을 생각할 때 보통 해결 하는 방법은 transform의 rotate를 사용하는 것이다. 하지만 일반적으로 rotate를 사용해서 45도를 바꾸면 아래와 같이 나오게 된다. 그냥 네모 박스가 쪼그라든 것 같은 형식이다. 이 이유는 노란색 박스 즉, 카드를 포함하고 있는 부모 요소가 3차원 공간이어야 내부 요소도 3D로 동작한다.  3D 카드 뒤집기.  CARD  먼저 부모 요소와 자식 카드 박스를 만들어준다. 부모 박스가 위 이미지의 노란색 영역이고 카드는 붉은색 카드를 나타낸다...

개요. CSS를 작성할 때 선택자는 당연히 땔 수 없는 관계이다.  하지만 class, id, 자식 선택자 정도는 쉽게 사용하는데 그 이후부터는 항상 찾아봐야 하는 불편함이 있어서 이참에 공부 겸 정리를 하려고 한다.  태그 선택자.해당하는 태그 전체에게 스타일을 주는 선택자이다.  안녕하세요.  div 태그에게 분홍색 배경을 넣어주고 p 태그에게 폰트 크기를 15px로 설정해주고 싶다면 어떻게 해야할까? div { background-color: pink;}p { font-size: 15px;} 태그명을 바로 선택해주면 적용이 가능하다. css 파일에서 태그명 { } 을 통해서 사용이 가능한 방식 id 선택자.특정 id에게만 스타일을 줄 수 있는 선택자이다. id는 한 페이지에 하나만 존..

개요. frame by frame 애니메이션을 css를 통해서 구현해보자.  frame by frame 애니메이션이란 장면별로 하나하나 움직임을 그려서 표현하는 쉘 애니메이션을 이야기한다. css 애니메이션으로 구현하기 위해서는 이미지 스프라이트를 사용해서 구현해야한다.  각 단락별로 연속되는 이미지를 가지고 만들 수 있는 애니메이션이다.  구현하기  애니메이션이 그려질 박스를 먼저 선언해준다. 해당 div 태그에 이미지를 넣어서 화면에 렌더링 시켜줄 계획이다. div 태그가 애니메이션 틀이라고 생각하면 되고 img 태그가 실제 이미지이다.  .spaceship { width: 150px; height: 150px; overflow: hidden;..

개요. 요소에게 변화를 주기 위해서 transform과 transition을 사용했다. 이때 최종적으로 이동되는 위치가 한번 꺽어서 다른 방향으로 이동한다면 transform을 사용해서 구현할 수 없어진다.  이때 사용하는 것이 animtaion이다. animation은 닥독으로 사용되는 것이 아닌 tansform이나 width 등 다른 속성과 함께 사용해서 원하는 동작을 만들어내는 속성이다.  @keyframes실제로 애니메이션의 동작을 작성하는 속성이다. 이것을 활용해서 원하는 애니메이션을 만들 수 있다.  keyframes는  0% ~ 100% 까지의 타임라인이 존재한다. 애니메이션의 시작점이 0%이고 끝점이 100%이다. 중간에 원하는 어떤 지점에도 특정 애니메이션을 넣을 수 있다.  이제 앞서 ..

개요. CSS를 사용할 때 특정 요소를 변경하는 방법은 몇가지가 있다. 요소의 크기를 크게 만드려면 width와 height 값을 조절하면 가능하다.  또한 위치를 이동시키려면 position을 absolute로 바꾸고 top이나 left 값 등을 바꿔주면 가능하다. 또다른 방법으로는 transform이 존재한다. width, height 또는 position과 비교했을 때 어떤 차이점이 있길래transform이 생겨났을까?  바로 성능적인 부분에서 차이가 난다. width와 height을 사용하는 방식은 문서의 레이아웃을 다시 계산하고 요소를 재배치해야해서 브라우저에 많은 계산을요구한다. 하지만 transform 속성을 사용하면 GPU 가속을 활용해서 요소의 크기를 조절하므로 성능상 이점이 있다.  위..

날씨가 우중~~충 하네요. 토토는 분명 자라고 있는 것은 맞는 거 같은데 음,,, 머랄까 먼가 먼가하네요 변화가 없는 것 같지만 없는게 아니랍니다 아마도 점점 자라고 있을거에요. ( 열매는 없지만... )

개요. 개발자로써 [ GitHub만 있으면 그만 아니야? ] 라는 생각으로 살다가 어느날 문뜩 프론트엔드 개발자인데 정작 나를 위한 웹사이트는 하나도 없네? 생각을 하게 되었다. 비교적 옛날 유형어 자기 PR의 시대라는 말이 있는데 나를 알리기 위해서 어떤 것을 보여줄 수 있을까? 하다 못해 관심이 있는 SEO를 마음껏 고려하면서 홈페이지를 만든다면 괜찮지 않을까? 또 내가 배우며 공부한 기능, 기술을 회사에 100% 반영할 수 없는 것은 당연한 현실이다. 공부에서 끝나지 않고 자연스럽게 홈페이지에 적용한다면 그것도 재밋지 않을까? 라는 생각을 했다. 그 첫번째 시작이 개발 환경 구성이다. 히스토리. 현재 회사의 개발 환경은 내가 프로젝트를 진행하면서 경험한 불편함을 보안하면서 만들고 있다. ( 이것을 ..

요즘 황사가 심하다고 하는데 다들 괜찮으신가요?? 전 이맘쯤만 되면 비염에 힘들어하고 있답니다. 코를 훌쩍이면서 살고 있는데 정말 곤란하네요. 아 토토는 여전히 아랫 잎들은 힘으 빠진 것 같아요. 이 잎은 한번 또 정리해주는게 좋을지 모르겠네요. 고민해보고 이발 한번 시켜야겠어요.