학습 내용

CSS

transform

특정 요소의 크기를 키우고 싶은 경우 transform의 scale 속성을 이용하여 해당 속성의 크기를 특정 배율만큼 증가시킬 수 있습니다.

아래와 같이 scale() 내부에 배율에 해당하는 숫자를 넣으면 요소의 크기가 커지게 됩니다.

El1 El2 {
	transform: scale(maginification)
}

transform이라는 애니메이션과 같은 효과를 주기 위해서 transform이 적용된 요소의 부모 요소에 transition 속성을 추가할 수 있습니다.

El1 {
transition: 0.5s
}

위오 같이 transition을 이용하면, 요소가 커지는 효과를 해당시간만큼 천천히 볼 수 있게 만들어 줍니다.

flex

flex의 경우에는 주축과 교차축을 지니고 있다는 것을 잊고 있었습니다.
flex의 기본적인 주축은 수평 방향입니다.

flex-direction: column을 이용하여 수직 방향으로 주축을 바꿀 수 있습니다.
또한 flex-direction: column-reverse를 사용하여 아래부터 위로 쌓이도록 설정할 수 있습니다.

flex는 flex container와 flex item이 존재합니다.
flex container 내부에 있는 아이템들이 컨테이너에 넘치는 경우에는 flex-wrap: wrap을 이용하여, 아이템들을 줄바꿈해줄 수 있습니다.

기본적으로 flex-wrap은 flex-wrap:nowrap을 속성값으로 지닙니다.
flex-wrap 역시도 flex-wrap:wrap-reverse를 통해 역방향(주축만)으로 쌓이도록 만들 수 있습니다.

flex의 item에 대한 속성값 중,
align-item은 flex container가 한 줄인 경우에 사용하며
align-content는 flex container가 두 줄 이상 존재하는 경우에 사용할 수 있습니다.

align-item은 해당 flex item 박스 안에서 요소의 수직축을 정렬시키기 위한 속성이며,
align-content역시 마찬가지 입니다.

이에 반해, justify-content는 flex item 박스 안에서 요소의 수평축을 정렬시키기 위한 속성입니다.

justify-content: space-between을 사용하는 경우에는 요소 수평의 양 끝점에 아이템들을 배치하고 나머지 아이템들은 동일한 간격으로 배치시키게 됩니다.

flex-flow 속성은 단축 속성으로,
flex-direction과 flex-wrap을 한 번에 설정할 수 있게 해줍니다.

flex-flow: column wrap;

flex의 여러가지 속성들

• flex-basis : 아이템의 크기를 결정합니다. 기본값은 auto이며, 아이템 내부에 있는 요소의 크기에 따라 자동으로 맞춰집니다.

• flex-grow : 양수와 음수 모두 지정할 수 있으며 양수로 지정하면 flex 아이템 별로 주축 방향으로 flex-basis값 이상으로 늘어나게 됩니다. 각 아이템에 지정된 flex-grow값의 비율에 따라 남은 공간의 비율을 적용하여 늘어나게 됩니다. 기본값은 0입니다.
  ※ 주의할 점은 컨테이너의 비율이 아닌 남은 공간의 비율을 따른다는 점입니다.

• flex-shrink : 주축의 공간이 부족할 때 각 아이템의 사이즈를 줄이는 방식을 정하는 속성입니다. 이는 flew-grow와 반대의 특징을 지닙니다. 양수와 음수 모두 지정할 수 있으며 양수를 지정하는 경우 flex 아이템의 크기가 좁아지게 됩니다. 기본값은 1입니다.

• flex : 이는 flex-grow, flex-shrink, flex-basis를 한 번에 정할 수 있는 단축속성입니다.
  ※ 주의할 점은 flex: auto를 사용하는 경우 이는 flex: 1 1 auto와 같습니다.
※ flex-initial은 flex: 0 1 auto와 같습니다.
※ flex-none은 flex: 0 0 auto와 같습니다.
※ flex: 2는 flex: 2 1 0과 같습니다. 이는 flex-grow값만 설정하는 것과 같습니다.

• flex-basis : 아이템의 크기를 결정합니다. 기본값은 auto이며, 아이템 내부에 있는 요소의 크기에 따라 자동으로 맞춰집니다.

• flex-basis : 아이템의 크기를 결정합니다. 기본값은 auto이며, 아이템 내부에 있는 요소의 크기에 따라 자동으로 맞춰집니다.

각각의 flex 아이템들은 order라는 속성을 이용하여, 순서를 지정할 수 있습니다.

CSS 변수

CSS 속성값을 미리 변수에 저장하여, 해당 변수를 쉽게 참조하기 위해 사용하기 위한 방법입니다.
CSS 변수를 선언하기 위해서는 다음과 같이 --변수이름: 속성값 형태로 작성해야 합니다.

body{
	--mainColor: #orange;
}

CSS 변수를 참조하기 위해서는 다음과 같이 var()를 이용하여 작성해야 합니다.

.container{
	background-color: var(--mainColor);
}

변수를 선언한 해당 요소의 후손 요소에서만 사용이 가능합니다.