728x90 300x250 SMALL Front-end/CSS65 flex : auto, flex:1, flex:2, flex: initial축약형 flex 축약형 표현 flex: initial; = flex: 0 1 auto; flex: auto; = flex: 1 1 auto; flex: none; = flex: 0 0 auto; flex: 1 = flex: 1 0 auto; flex: 2 = flex: 2 0 auto; flex: initial = felx: 0 1 auto; flex: initial로 지정하면 기본값이 적용 flex: 0 1 auto와 같은 효과를 나타내기 때문에 flex-grow가 0이기 때문에 flex-basis값보다 커지지 않고 flex-shrink가 1이기 때문에 컨테이너 공간이 부족하면 크기가 줄어들게 된다. flex-basis가 auto이기 때문에 flex항목은 내부 컨텐츠 크기 만큼 공간을 차지하게 된다 flex:.. 2021. 11. 21. css로 화살표 모양 만들기 > 이런 ">" 모양의 화살표는 자주 사용 되는데 간단하게 css로 만들 수 있습니다. .arrow:after { content: ''; display:inline-block; width: 0.8rem; height: 0.8rem; margin-left: 0.5rem; border-top: 0.1rem solid #333; border-right: 0.1rem solid #333; transform: rotate(45deg); } 먼저 boarder만 있는 네모를 만든다고 생각하고 border 값을 top과 right만 준 상태에서 transform:rotate(45deg);를 이용해서 45도 회전 시켜주면 아래와 같은 모양을 만들 수 있습니다. transform css Browser Support 2021. 11. 17. flex 1 1 auto / flex 0 0 100px flex 코딩에서 흔히 볼 수 있는 1 1auto 속성 flex : 1 1 auto; 앞에서 flex-grow, flex-shrink, flex-basis 에 대해서 설명했었는데요 이 3가지를 한꺼번에 표현한 것입니다. https://moo-you.tistory.com/380 flex-grow 사용법 flex-grow는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백을 메우는 속성입니다. .item { display: flex; background: rgba(45, 183, 20, 0.5); flex-direction: column; justify-content: center.. moo-you.tistory.com https://moo-you.tistory.com/385 flex-sh.. 2021. 11. 16. css 말줄임 여러줄 일 때 글자가 길어질 때 ... 처리하는 방법입니다. 한줄일 경우 말 줄임 효과 css .txt { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } inline으로 하면 너비 값을 가질 수 없어서 block로 처리하고 텍스트가 길어질 경우 자동 줄바꿈이 되지 않고 한줄에 표시되도록 white-space:nowrap; 설정 넘쳐나는 텍스트를 감추기 위해서 overflow:hidden; 넘쳐난 텍스트의 말줄임 표시를 하는 text-overflow:ellipsis 속성을 추가하여 다음과 같이 말줄임효과를 주었습니다. 그렇다면 글자가 여러줄일 경우 말줄임 표시는 어떻게 해야 할까요 여러줄 말줄임 표시 방법 .txt { displ.. 2021. 11. 13. 이전 1 ··· 8 9 10 11 12 13 14 ··· 17 다음 728x90 반응형 LIST