Web28 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. 아이폰에서 폰트 크기가 제대로 적용이 안돼요... Next.js에서 개발을 진행하고 있는데, 아이폰 환경에서는 폰트의 크기가 제대로 적용되지 않는 문제가 발생했다. 폰트 크기는 분명 적용했고 다른 요소의 컴포넌트는 제대로 폰트가 적용이 되는데 딱 하나의 컴포넌트만 적용이 안됐다. iOS 모든 환경에서 안되는 것이 아닌 아이폰에서만 발생하는 문제였다. 맥북에서는 정상적으로 동작했다. 환경은 Next.js / Styled Components 를 사용하고 있다. 혹시 Styled Components와 Next.js를 함께 사용하면 발생하는 문제일 수 있다고 생각해서 Styled Components 대신에 CSS를 사용도 해봤다. 하지만 여전히 문제는 해결되지 않았다. 이유를 열심히 찾아보니 아이폰에서는 뷰포트가 변경되면 자동으로 폰트 크기를 조절하고 있단다... 2024. 4. 9. 구글 SEO 웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶2024.03.20 - [Web] - 웹 접근성 시나리오 - 2 ▶2024.03.24 - [Web] - 랜드마크 롤 ▶2024.03.27 - [Web] - WAI-aria ▶2024.03.31 - [Web] - 웹 접근성 시나리오 - 3 ▶2024.04.04 - [Web] - 사용자가 입력하는 이미지 ▶2024.04.06 - [Web] - 구글 SEO 2024. 4. 6. 사용자가 입력하는 이미지 웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2 ▶ 2024.03.24 - [Web] - 랜드마크 롤 ▶ 2024.03.27 - [Web] - WAI-aria ▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3 ▶ 2024.04.04 - [Web] - 사용자가 입력하는 이미지 2024. 4. 4. 웹 접근성 시나리오 - 3 웹 접근성 공부를 위해서 공부한 내용 시리즈 ▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성 ▶ 2024.02.21 - [Web] - 웹 접근성 시나리오 ▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까? ▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습 ▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2 ▶ 2024.03.24 - [Web] - 랜드마크 롤 ▶ 2024.03.27 - [Web] - WAI-aria ▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3 2024. 3. 31. 이전 1 2 3 4 다음 반응형
