YoonStudyNote

교차 축(cross-axis)의 정렬 방법을 설정한다. 주의할 점은 flex-wrap 속성을 통해 Items가 여러줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다. Items가 한 줄일 경우 align-items 속성을 사용한다 값 의미 기본값 stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch flex-start Items를 시작점(flex-start)으로 정렬 flex-end Items를 끝점(flex-end)으로 정렬 center Items를 가운데 정렬 space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 space-around Items를 균등한 여백을 포함하여 정렬 align-..

주 축(main-axis)의 정렬 방법을 설정한다. 값 의미 기본값 flex-start Items를 시작점(flex-start)으로 정렬 flex-start flex-end Items를 끝넘(flex-end)으로 정렬 center Items를 가운데 정렬 space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 space-around Items를 균등한 여백을 포함하여 정렬 justify-content: 정렬방법; .container{ border: 4px solid; display: flex; justify-content: space-around; } .container .items{ width: 150px; height: 100px..

flex-wrap Items의 여러 줄 묶음(줄 바꿈)을 설정한다. 값 의미 기본값 nowrap 모든 Items를 여러 줄로 묶지 않음(한 줄에 표시) nowrap wrap Items를 여러 줄로 묶음 wrap-reverse Items를 wrap의 역 방향으로 여러 줄 묶음 flex-wrap: 여러줄묶음; 기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다. (요소가 넘치더라도 무조건 한줄이다.) 이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변한다. Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 한다. .container{ border: 4px solid; display: flex; flex-wrap: wrap; } .container ...

주 축(main-axis)과 교차 축(cross-axis) 위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같다. 값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다. 반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다. 즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다. 시작점(flex-start)과 끝점(flex-end) 시작점(flex-start)과 끝점(flex-end)이라는 개념도 있다. 이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 역시 방향에 따라 시작점과 끝점이 달라진다. 뒤에서 언급할 속성 중 값으로 flex-start와 ..

flex-flow 이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정한다. flex-flow: 주축 여러줄묶음; .flex-container { flex-flow: row-reverse wrap; } 값 의미 기본값 flex-direction items의 수 축(main-axis)을 설정 row flex-wrap items의 여러 줄 묶음(줄 바꿈) 설정 nowrap flex-direction Items의 주 축(main-axis)을 설정합니다. 값 의미 기본값 row Items를 수평축(왼쪽에서 오른쪽으로)으로 표시 row row-reverse Items를 row의 반대 축으로 표시 column Items를 수직축(위에서 아래..

Flex Container를 위한 속성들은 다음과 같다. 주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴본다. 속성 의미 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈)설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) display display..

flex는 수직이나 수평 정렬에 관련된 CSS 속성이라고 보면 된다. .container{ border: 2px solid red; } .container .items{ width: 100px; height: 100px; border: 2px solid; border-radius: 10px; display: inline-block; } display: inline으로 설정하면 inline요소로 바뀌기 때문에 width와 height값이 적용되지 않는 모습을 볼 수 있기 때문에, display: inline-block으로 해야한다. 또한 문제점은 items는 inline요소가 되었기 때문에 화면에 출력된 모습을 보면 margin값을 넣지 않았는데도 서로 한칸씩 떨어져있는 모습도 볼 수 있다. 이러한걸 방지..

일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보 columns 다단을 정의 값 의미 기본값 auto 브라우저가 단의 너비와 개수를 설정 auto column-width 단의 최적 너비를 설정 auto column-count 단의 개수를 설정 auto columns : 너비 개수; .text{ columns: 100px 2; } column-width 단의 최적 너비를 설정 값 의미 기본값 auto 브라우저가 단의 너비를 설정 auto 단위 px, em, cm 등 단위로 지정 column-width: 너비; 각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정된다. column-count..

애니메이션의 재생과 정지를 설정 값 의미 기본값 running 애니메이션을 동작 running paused 애니메이션 동작을 정지 body{ padding: 20px; } .box::before{ content:"running"; font-size: 20px; color: white; font-weight: 700; } .box{ width: 100px; height: 100px; background: tomato; border-radius: 10px; animation: size-up 3s linear infinite alternate; display: flex; justify-content: center; align-items: center; } .box:hover{ animation-play-sta..

애니메이션의 전후 상태(위치)를 설정 값 의미 기본값 none 기존 위치에서 시작-> 애니메이션 시작 위치로 이동-> 동작-> 기존 위치에서 끝 none forwards 기존 위치에서 시작-> 애니메이션 시작 위치로 이동-> 동작-> 애니메이션 끝 위치에서 끝 backwards 애니메이션 시작 위치에서 시작-> 동작-> 기존 위치에서 끝 both 애니메이션 시작 위치에서 시작-> 동작-> 애니메이션 끝 위치에서 끝 .box{ width: 100px; height: 100px; background: tomato; border-radius: 10px; margin: 30px; animation: movemove 2s 2s; animation-fill-mode: both; } @keyframes movemov..