CSS 썸네일형 리스트형 [CSS] 자식 요소의 위치 변경 부모 요소가 자식요소를 감싸고 있을 때,부모 요소에 position : relative 속성을 부여하고,자식 요소에 position : absolute 속성을 부여하면 top, left, right, bottom 등을 사용해 절대 위치를 부여할 수 있다. 나 같은 경우에는 오른쪽에 노란색으로된 링크를 누르면등록 버튼이 생기는데 등록버튼이 링크 바로 밑에 붙어서 생기는 문제가 있었다. 하단에 고정된 모습이다. .whole-sale-page { background-color: white; padding: 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: col.. 더보기 [CSS] Antd CSS 수정하기 Ant Design - The world's second most popular React UI framework Ant Design - The world's second most popular React UI frameworkAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design Antd에서 기능을 import해서input, button, Modal 심지어 Dropdown까지 모던한 디자인의 요소들을 사용할 수 있습니다.그런데 색깔이나 크기가 마음에 안든다면 CSS를 수정해야.. 더보기 [CSS] Animation 실습을 진행하다가강사님께서 대뜸 처음 보는 HTML코드를 쓰셨는데효과가 나타나서 신기했다. marquee behavior = "alternate">숫자만 3자리, 중복숫자 Xmarquee> 좌우로 움직이는 효과인데 GPT에게 CSS로 해당 코드를 짜려면 어떻게 하는지 물어봤다. !DOCTYPE html>html lang="en">head>meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0">title>Marquee Alternate Effecttitle>style>.marquee-alternate {width: 300px; /* 컨테이너 너비 */height: 50px; /* 컨테이너 높이 */ma.. 더보기 [CSS] Antd CSS Framework 처음 사용해 본 CSSs Framework는 React BootStrap이었는데 이번 프로젝트에서는 Antd라는 Framework를 사용해 볼 예정입니다. Framework를 사용하면 좋은 점은 CSS에 시간과 노력을 투자할 필요가 줄어든다는 점입니다. 그래서 기능에 더 집중할 수 있게 됩니다. 그 중에서도 Antd는 중국에서 만든 FrameWork로 기능이 많고 깔끔한 디자인인게 장점이고 그렇기 때문에 용량 문제가 단점으로 꼽힐 수 있습니다. Ant Design of React - Ant Design Ant Design of React - Ant Design An enterprise-class UI design language and React UI library with a set of high-qu.. 더보기 [CSS] flex-direction 속성을 게임으로 배우는 방법 안녕하세요 저번 시간에 이어서 Flexbox Froggy를 진행해보겠습니다. 8단계부터는 flex-derection 속성을 이용한 문제입니다. 그럼 시작해 볼까요? flex-direction은 저도 처음 접하는 스타일 속성인데 이것은 요소들의 정렬 방향을 정해준다 합니다. 8단계를 먼저 살펴볼까요? 연꽃이 오른쪽에 있어서 오른쪽으로 방향을 정해주면 될 것 같네요! 지금 개구리들이 왼쪽으로 정렬되어 있기 때문에 오른쪽으로 정렬 방향을 바꾸어 주면 될 것 같습니다. 이때 사용하는 것이 flex-direction:row-reverse; 개구리들이 쏙 들어가네요 이제 9단계입니다. 9단계는 아래로 정렬해주면 되겠네요. 위에서 아래로 정렬해주는 flex-direction:column; 을 사용해주고 클리어했습니다.. 더보기 [CSS] align-items 속성을 게임으로 배워보자 전 포스팅에 이어서 Flexbox Froggy 게임을 진행해보도록 하겠습니다. jusify-content 속성은 가로선(좌우)을 기준으로 정렬했다면 align-items 속성은 세로선(상하)을 기준으로 정렬해주는 스타일인 것 같습니다. 5단계는 개구리들을 바닥쪽으로 정렬해 주어야겠네요. align-items:flex-end; 를 써줍니다. 연꽃이 가운데에 있네요. 가운데로 슝 align-items:center를 적용하였지만 세로상의 가운데로만 이동하였습니다. 가로상으로도 가운데로 이동하려면 justify-content의 힘이 필요할 것 같네요. justify-content:center를 적어주니 연꽃에 도착합니다. 이젠 들어가야될 코드가 바로 떠오르지 않나요? 게임을 하니까 금방 외워지네요! 아래로 정렬.. 더보기 이전 1 2 다음
