haehaee 님의 블로그

웹 요소를 이동시키는 translate() 함수트렌스레이트 transition: 1s; 부드럽게 움직이게 한다(0.6초 정도 추천) #movex:hover { transform: translateX(50px); 마우스를 올리면 x좌표로 50px이동 요소를 확대 축소하는 scale() 함수스케일 요소를 회전시키는 rotate() 함수 트랜지션의 속성을 한꺼번에 표기하는 transition원본 요소를 디자인원본에 수도 클래스(호버 클래스) 생성호버 클래스 내부에 변해야될 상태 디자인원본에 트렌지션 부여 (호버 클래스에 부여도..

Flexbox의 기본 개념 - 1차원 레이아웃 모델의 특징과 주축/교차 축 등 핵심 용어 이해Flex Container 속성 - 부모 요소에 적용하여 자식 아이템의 방향, 줄 바꿈, 정렬을 제어하는 방법Flex Items 속성 - 자식 요소의 팽창, 수축, 기본 크기 및 개별 정렬과 순서를 제어하는 방법Flex Responsive 속성 - 플렉스박스를 활용하여 화면 크기에 유동적으로 대응하는 반응형 레이아웃 구축 Flexbox현대 웹 디자인에서 가장 널리 쓰이는 레이아웃 시스템 플렉스 박스의 기본 개념 정리1. 플렉스박스의 정의플렉스박스(Flexbox)는 'Flexible Box'의 줄임말로, 행(Row) 또는 열(Column)을 주축으로 하여 요소를 배치하는 1차원 레이아웃 모델이다.복잡한 계산 없이 ..

.box:nth-child(odd) { - 홀수.box:nth-child(even) { - 짝수 flex-direction: row; - 디폴트 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 justify-content:..