NOW OR NEVER

Grid 2차원(행이라는 차원과 열이라는 차원 제공)의 레이아웃 시스템 제공 flexible box: 1차원의 레이아웃을 위하며 grid보다 쉽고 빠르게 제공 가능하지만 다차원의 레이아웃 잡는데는 무리가 있다. 그래서 복잡한 레이아웃을 위해 grid 사용 예전부터 핵(hack)이라고 불리는 다양한 레이아웃 대체 방식 해결 위해 만들어진 특별한 css 모듈(예전에 레이아웃을 잡기 위해서는 table 코딩, float 이용한 정렬방식, position 방식, flexible box를 많이 사용했었는데 그것들을 다 대체할 수 있게 완벽히 해결할 수 있는 레이아웃 잡는방식이 grid이다.) grid를 통해 고차원적으로 레이아웃 완성 가능 대치의 개념과 정렬의 개념을 동시에 가지고 있다. 파이어 폭스 브라우저 사..

Flex flex item 속성 1.order : flex item의 순서 결정 각각의 item의 순서 설정 item에 순서를 지정하고 숫자가 클수록 순서가 밀림 음수가 허용(더 작을수록 순서가 앞으로 오게 됨) html 구조와 상관없이 순서 변경 가능해서 css만으로 순서 변경시 유용 order 값 같을 시 html 구조(먼저 작성된 순서대로)대로 나열 됨 숫자 : 기본값은 0으로 item 순서 결정 2. flex : flex-grow, flex-shrink, flex-basis를 아우르는 단축속성 flex: flex-grow flex-shrink flex-basis; 주의사항: flex basis 개별 속성 사용시 기본 값은 auto지만 단축 속성일 때 사용시(명시적으로 적지 않았을 때) 기본 값은 ..

애니메이션 animation 요소에 애니메이션을 설정/제어 애니메이션은 기본적으로 프레임으로 이루어져 있다. 이 속성을 통해 실질적인 애니메이션 프레임을 만들어내는 것이 아니라 만들어낸 프레임을 제어하는 데 사용 애니메이션을 직접적으로 만들어주는 것이 아니라 keyframes규칙에 설정된 애니메이션의 정의를 설정하고 개별 속성들을 통해 제어하는 개념 실질적으로 애니메이션을 선언하는 것은 keyframes 규칙이다. 다양하고 풍부한 내용들을 움직이게 만들 수 있다. See the Pen Animation by ssoyuni (@sssoyuni) on CodePen. 1. 단축 속성 animation : 애니메이션이름(keyframes 규칙으로 만들어져 있는 이름) 지속시간 [타이밍함수 대기시간 반복횟수 반..

float : 요소를 좌우 방향으로 띄우는(부유하는) 개념(수평 정렬) 요소를 수평방향으로 정렬하는 용도로 많이 사용 flex box가 생기면서 수평 정렬하는 개념은 많이 퇴색됨 float : 방향; 기사처럼 요소 주변에 글(문자)이 흐르게 하는 용도로 사용 가능 1. 속성 값 none : 기본 값으로 요소 띄움 없음 left : 왼쪽으로 띄움 right : 오른쪽으로 띄움 2. 수평 정렬 float이 적용되기 전에는 위에서부터 아래로 쌓임 float이 들어간 요소들은 다 수평 정렬 float: left; 좌측부터 수평으로 쌓는 개념 float: right; 우측부터 수평으로 쌓는 개념 3. float 해제 거의 대부분 필수 적 float이 가진 문제점 : float 속성이 적용된 요소 주위로 다른 요소..