일주일이 빠르게 지나가고 2주차가 시작되었다. 1일차에는 css의 flex, transform, transition을 배웠다.
flex
일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 복잡해진다.
이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있다.
flexbox는 기본적으로 자식요소인 flex item과 그 상위 요소인 flex container로 구성된다.
.container{
display: flex;
}flexbox는 부모요소에 display: flex; 속성을 주는 것으로 생성 할 수있다.
flex속성이 부여된 요소가 부모 요소가되며,
자식요소는 자동적으로 item이 됩니다.
flex의 기본 주축은 row(행) 으로 구성되어있으며
다양한 flex속성을 이용해 정렬의 방향을 변경 할 수 있습니다.
그리고, container와 item, 즉 부모요소와 자식요소의 속성은 서로다릅니다.
참고
flexbox를 지원하지 않는 브라우저도 존재합니다만, 대체적으로 요즘은 거의모두 지원함.
flexbox의 대표적인요소로는
flex-direction : flex-item의 주 축을 설정
flex-wrap : flex-item의 여러 줄 묶음 설정
justify-content : 주 축의 정렬 방법을 설정
align-items : 교차 축에서 flex-item의 정렬 방법을 설정 (1줄)flexbox의 이해를 돕는 간단한 문제풀이 사이트입니다.
유용하니 꼭 한번씩 해보면 좋을 것 같습니다.
https://flexboxfroggy.com/#ko
transform, transition
transform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
transform은 css의 시각적 서식 모델의 좌표 공간을 변경합니다.
transform의 속성은 아주 많습니다.
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);rotate와 translate는 요소를 이동시키며,
scale은 요소의 크기를 변경시킵니다.
skew는 요소의 각도를 변경시킵니다.
transition
transition은 요소의 전환 효과를 지정하는 단축속성입니다.
transition : 속성명 지속시간 타이밍함수 대기시간; 으로 작성하며
지속시간은 필수 작성 요소입니다.
transition은 다음과 같이 작성합니다.
/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;2주차 첫째날에는 css의 flex, transform, transition을 학습했습니다. 기존에 공부하였던 부분이지만 부족한점을 많이느꼈습니다. transform의 많은 속성을 이해하기 어려웠기 때문에 더 많은 복습이 필요할 것 같습니다. 그리고 flex는 가장 많이 사용하는 css 속성이기 때문에 반드시 사용하기 편하게 익히는 연습이 필요할 것 같습니다.
