반응형 전체 글293 [CSS] background /*PICK YOUR FAVORITE*/ .pick-your-favorite { background-image: url("../images/favorite_bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } background와 관련된 요소들이 적힌 css 클래스를 가져와봤다. 대부분 코드만 봐도 이해가 가기에 이해가 안가는 부분만 살펴보기로 했다. - background-attachment: fixed; 이전에 봤던, position:fixed와 같다. 배경이미지가 지정된 곳에 고정되어 스크롤을 움직여도 위치가 변하지 않는다. - b.. 2023. 10. 22. [CSS] calc calc() calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. 무슨 말인고 하니… /* property: calc(expression) */ width: calc(100% - 80px); 일반적인 사칙연산 뿐만 아니라 이렇게 말도 안되는 식도 허용된다는 것이다. 2023. 10. 22. [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. 이전 1 ··· 61 62 63 64 65 66 67 ··· 74 다음 반응형
