호다닥

Flexbox layout은 container 내부 items에게 공간을 효율적으로 나눠주기 위한 module의 일종으로 내부 items의 크기를 모르거나 동적으로 작동할 때마저 적용이 가능하다. flex container는 items을 사용가능한 공간에 확장시키거나 overflow를 막기 위해 감추는 동작이 가능하다. 가장 중요한 점은 flex layout은 기존의 수직으로 작동하는 block이나 수평으로 작동하는 inline과 달리 방향을 정할 수 있다. flex-direction row : 기본설정으로 왼쪽에서 오른쪽 방향이다. row-reverse : 오른쪽에서 왼쪽 방향이다. column : row와 같지만 위에서 아래 방향이다. column : row-reverse와 같지만 아래서 위 방향이다..

CSS display property display 프로퍼티는 layout 정의에 사용되는 중요한 요소이며 4가지 value를 가지고 있다. 1. block2. inline3. inline-block4. none 1. blockdisplay 프로퍼티 값이 block 레벨일 경우, 항상 새로운 라인에서 시작된다. 즉, 각 요소는 화면 크기 전체의 가로폭을 차지한다.width, height, margin, padding 프로퍼티 지정이 가능하다. block레벨 요소 내에 inline 레벨 요소를 포함할 수 있다. 2. inlinedisplay 프로퍼티 값이 inline 레벨일 경우, 새로운 라인에서 시작하지 않고 문장의 중간에 삽입이 가능하다. 즉, 줄을 바꾸지 않고 다른 요소와 함게 한 행에 위치한다.co..

CSS State 크롬 개발자도구에서 element를 선택하고 :hov를 클릭하면 states를 확인할 수 있다. 박스:hover 박스 위에 뭔가 올라가면(hover), property들이 적용된다. 박스:active 박스를 클릭할 때 property들이 적용된다. 박스:focus 폼이나 링크를 선택하거나 활성화시키면 property들이 적용된다. Transition Transition은 아래의 효과들이 자연스럽게 동작할 수 있게 부드럽게 처리해주는 기능이다. transition-property: all; → 어떤 효과에 대한 장면전환을 할 지 결정한다. all은 모든 그래픽 효과들이 동작하게 한다. transition-duration: 1s; → 장면전환이 1초에 거쳐 일어난다. 아래와 같이 한줄에 코..