반응형 전체 글267 [CSS] flex-grow & flex-shirink flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이에요. flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됩니다. 기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않았던 거예요. /* 1:2:1의 비율로 세팅할 경우 */ .item:nth-child(1) { flex-grow: 1; } .item:nth-child(2) { flex-grow: 2; } .item:nth-child(3) { flex-grow: 1; } 각 아이템의 컨텐츠가 “AAAAA”, “B”, “CCC”로 원래의 크기가 다르기 때문에.. 2023. 10. 22. [CSS] flex) justify-content & align-content justify-content 가로 축을 기준으로 좌우에 대한 정렬을 관장함 [해당요소] flex-start (default) : 요소들을 컨테이너의 왼쪽으로 정렬 flex- end : 요소들을 컨테이너의 우측으로 정렬 center : 요소들을 컨테이너의 중앙으로 정렬 space-between : 요소들 사이에 동일한 간격을 둡니다. space-around : 요소들 주위에 동일한 간격을 둡니다. space-evenly(FireFox Only) : 첫번째로 오는 정렬 대상 전에 두 개의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다. See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen. => sp.. 2023. 10. 22. [CSS] box-shadow 개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position : 세로 위치이다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어진다. (필수) blur : 그림자를 흐릿하게 만든다. 값이 클 수록 더욱 흐려진다. spread : 양수면 그림자를 확장하고, 음수면 축소한다. color : 그림자 색을 정한다. inset : 그림자를 요소의 안쪽에 만든다. initial : 기본.. 2023. 10. 14. [CSS] overflow: hidden hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있습니다. .lyrics { overflow: hidden; } See the Pen position-sticky by mirian (@anananananancatdeveloper) on CodePen. overflow 속성을 hidden으로 지정된 요소 내에서는 긴 텍스트의 뒷 부분이 아예 잘려버리는 것을 확인할 수 있습니다. 2023. 10. 14. 이전 1 ··· 55 56 57 58 59 60 61 ··· 67 다음 반응형
