반응형 WEB/CSS41 [CSS] transform :perspective() transform : perspective() - 3D 공간에서처럼 원근감을 구현시킬 때 사용 - 값이 적을수록 가깝게 보이고, 클수록 멀게 보인다. See the Pen Untitled by Bockchi Blood (@Bockchi-Blood) on CodePen. 2023. 10. 22. [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음 반응형
