분류 전체보기727 DOM Script DOM을 사용하는 경우는 React를 사용하면서 많이 줄어들었다. 하지만 특정 애니메이션 등을 작업하기 위해서 State 등을 사용할 수 있겠지만 Ref를 사용해서 DOM을 변경하는 것도하나의 방법이다. 즉, React를 사용하면서 Ref를 사용한 DOM 스크립트를 사용할 수 있는데, 사용하는 경우가 적다보니 자주 사용하는 명령어 외엔 어떤게 있는지 모르는 경우가 있어 정리를 해보자 DOM 선택하기 const el = document.querySelector(".element2") 가운데에 있는 요소를 가지고 오기 위해서는 querySelector를 사용하면 간단하게 가지고 올 수 있다. document.getElementById 같은 방식으로 가지고 오는 것이 더 익숙한 사람도 있겠지만.. 2024. 5. 15. 홈페이지 상단에 노출시키기 회사에서 만든 홈페이지가 홈페이지 명으로 검색을 했을 때 8페이지에서 노출되는 문제가 발생했다. 해당 프로젝트는 작년 3월 첫 입사를 하고 [ 모바일 ] 부분만 담당해서 개발하게 된 홈페이지인데, 실제 도메인에배포한지 1년이 넘도록 8페이지에 머물러 있던 것이다. 이런 문제를 인지하지 못하고 있다가 이번에 검색을 하다가 노출되지 않는 것을 확인하고 점검을 시작했다.우선 회사명과 유사한 이름의 서비스가 하나 있었고 동일한 이름의 가수가 무려 2명이나 존재했다.... 일단 홈페이지를 보면서 점검을 진행하면서 부족한 부분을 함께 작업을 진행하기로 했다. OG 태그공유를 할 때 사용되는 태그가 바로 OG 태그이다. 현재 개발 환경이 Next.JS이므로 원한다면 SSR을 통해서 페이지에 맞는 제목과 썸네일을.. 2024. 5. 11. CSS 3D 개요.카드를 웹사이트에서 구현한다고 했을 때 뒤집는 애니메이션이 필요한 경우가 있다. 그냥 앞뒤가 변화는 것보다 3D로 뒤집히는 것이 사용자가 봤을 때 자연스럽고 완성된 요소라고 생각할 수 있다. 뒤집는 것을 생각할 때 보통 해결 하는 방법은 transform의 rotate를 사용하는 것이다. 하지만 일반적으로 rotate를 사용해서 45도를 바꾸면 아래와 같이 나오게 된다. 그냥 네모 박스가 쪼그라든 것 같은 형식이다. 이 이유는 노란색 박스 즉, 카드를 포함하고 있는 부모 요소가 3차원 공간이어야 내부 요소도 3D로 동작한다. 3D 카드 뒤집기. CARD 먼저 부모 요소와 자식 카드 박스를 만들어준다. 부모 박스가 위 이미지의 노란색 영역이고 카드는 붉은색 카드를 나타낸다... 2024. 5. 8. CSS 선택자 개요. CSS를 작성할 때 선택자는 당연히 땔 수 없는 관계이다. 하지만 class, id, 자식 선택자 정도는 쉽게 사용하는데 그 이후부터는 항상 찾아봐야 하는 불편함이 있어서 이참에 공부 겸 정리를 하려고 한다. 태그 선택자.해당하는 태그 전체에게 스타일을 주는 선택자이다. 안녕하세요. div 태그에게 분홍색 배경을 넣어주고 p 태그에게 폰트 크기를 15px로 설정해주고 싶다면 어떻게 해야할까? div { background-color: pink;}p { font-size: 15px;} 태그명을 바로 선택해주면 적용이 가능하다. css 파일에서 태그명 { } 을 통해서 사용이 가능한 방식 id 선택자.특정 id에게만 스타일을 줄 수 있는 선택자이다. id는 한 페이지에 하나만 존.. 2024. 5. 5. Animation - frame by frame 개요. frame by frame 애니메이션을 css를 통해서 구현해보자. frame by frame 애니메이션이란 장면별로 하나하나 움직임을 그려서 표현하는 쉘 애니메이션을 이야기한다. css 애니메이션으로 구현하기 위해서는 이미지 스프라이트를 사용해서 구현해야한다. 각 단락별로 연속되는 이미지를 가지고 만들 수 있는 애니메이션이다. 구현하기 애니메이션이 그려질 박스를 먼저 선언해준다. 해당 div 태그에 이미지를 넣어서 화면에 렌더링 시켜줄 계획이다. div 태그가 애니메이션 틀이라고 생각하면 되고 img 태그가 실제 이미지이다. .spaceship { width: 150px; height: 150px; overflow: hidden;.. 2024. 5. 1. Animation 개요. 요소에게 변화를 주기 위해서 transform과 transition을 사용했다. 이때 최종적으로 이동되는 위치가 한번 꺽어서 다른 방향으로 이동한다면 transform을 사용해서 구현할 수 없어진다. 이때 사용하는 것이 animtaion이다. animation은 닥독으로 사용되는 것이 아닌 tansform이나 width 등 다른 속성과 함께 사용해서 원하는 동작을 만들어내는 속성이다. @keyframes실제로 애니메이션의 동작을 작성하는 속성이다. 이것을 활용해서 원하는 애니메이션을 만들 수 있다. keyframes는 0% ~ 100% 까지의 타임라인이 존재한다. 애니메이션의 시작점이 0%이고 끝점이 100%이다. 중간에 원하는 어떤 지점에도 특정 애니메이션을 넣을 수 있다. 이제 앞서 .. 2024. 4. 28. CSS 변환 개요. CSS를 사용할 때 특정 요소를 변경하는 방법은 몇가지가 있다. 요소의 크기를 크게 만드려면 width와 height 값을 조절하면 가능하다. 또한 위치를 이동시키려면 position을 absolute로 바꾸고 top이나 left 값 등을 바꿔주면 가능하다. 또다른 방법으로는 transform이 존재한다. width, height 또는 position과 비교했을 때 어떤 차이점이 있길래 transform이생겨났을까? 바로 성능적인 부분에서 차이가 난다. width와 height을 사용하는 방식은 문서의 레이아웃을 다시 계산하고 요소를 재배치해야해서 브라우저에 많은 계산을요구한다. 하지만 transform 속성을 사용하면 GPU 가속을 활용해서 요소의 크기를 조절하므로 성능상 이점이 있다. 위.. 2024. 4. 25. 토마토 키우기 - 44일차 날씨가 우중~~충 하네요. 토토는 분명 자라고 있는 것은 맞는 거 같은데 음,,, 머랄까 먼가 먼가하네요 변화가 없는 것 같지만 없는게 아니랍니다 아마도 점점 자라고 있을거에요. ( 열매는 없지만... ) 2024. 4. 22. 개발 환경 구성하기 개요. 개발자로써 [ GitHub만 있으면 그만 아니야? ] 라는 생각으로 살다가 어느날 문뜩 프론트엔드 개발자인데 정작 나를 위한 웹사이트는 하나도 없네? 생각을 하게 되었다. 비교적 옛날 유형어 자기 PR의 시대라는 말이 있는데 나를 알리기 위해서 어떤 것을 보여줄 수 있을까? 하다 못해 관심이 있는 SEO를 마음껏 고려하면서 홈페이지를 만든다면 괜찮지 않을까? 또 내가 배우며 공부한 기능, 기술을 회사에 100% 반영할 수 없는 것은 당연한 현실이다. 공부에서 끝나지 않고 자연스럽게 홈페이지에 적용한다면 그것도 재밋지 않을까? 라는 생각을 했다. 그 첫번째 시작이 개발 환경 구성이다. 히스토리. 현재 회사의 개발 환경은 내가 프로젝트를 진행하면서 경험한 불편함을 보안하면서 만들고 있다. ( 이것을 .. 2024. 4. 21. 이전 1 2 3 4 ··· 81 다음 반응형
