- 웹 접근성을 높이는 CSS 포커스 링 스타일링1. outline을 이용한 포커스 링 스타일 조정 button:focus { outline: 2px solid #ff0000; /* 빨간색 포커스 링 */ outline-offset: 4px; /* 테두리와의 간격 */}2. box-shadow를 이용한 커스텀 포커스 효과 button:focus { outline: none; /* 기본 포커스 제거 */ box-shadow: 0 0 5px 2px rgba(0, 150, 255, 0.8); /* 파란색 발광 효과 */}3. focus-visible을 이용한 개선된 접근성 button:focus-visible { outline: 3px dashed #00ff00; /* 초록색 점선 포커스 */}

[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를yermi.tistory.com- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.- stacking-pixels.htmlpixel-container를 포함한 HTML 기본 구조를 설정한다.이 컨테이너는 픽셀들이 쌓이는 공간이 된다. - stacking-pixels.csspixel-con..

- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.- falling-pixels.htmlHTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.pixel-container는 픽셀들이 떨어질 영역을 지정한다. -falling-pixels.csspixel-container와 pixel 클래스에 대한 스타일을 지정한다.픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.body { margin: 0; p..

- div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법] div를 사용하다 보면 가운데 정렬하고 싶을 때가 많다. 아래와 같은 div가 있고, child를 가운데 정렬하고 싶다고 보자. 눈으로 볼 수 있도록 아래와 같은 스타일을 추가해준다. 이렇게 하면 왼쪽 상단에 갈색 네모가 위치해 있다. .parent { background-color: white; border: solid 1px black; width: 200px; height: 200px; } .child { background-color: brown; width: 50px; height: 50px; } HTML 삽입 미리보기할 수 없는 소스 - 상단 가운데 정렬 이 위치를 상단 가운데로 정렬해보려고 한다. ch..

- Flex와 Grid 개념 정리 사이트 CSS 레이아웃 관련해서 찾아보던 중 1분코딩이라는 블로그가 개념을 잘 정리해놔서 포스팅한다. 아래의 게시글들이 Flex와 Grid에 대해 가장 잘 정리해놓았다고 생각한다. - CSS Flex, Grid 관련 게시글 이번에야말로 CSS Flex를 익혀보자 studiomeal.com 이번에야말로 CSS Grid를 익혀보자 studiomeal.com 이 분 인프런에서 Flex와 Grid 관련 강의도 하신 거 같다. 관심 있으신 분은 수강하시길! (따로 돈 받은 거 아님) CSS Flex와 Grid 제대로 익히기 강의 - 인프런 현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다., 당신이 웹 퍼블리셔, 프론트엔드 ..